Clean Code en TypeScript : principes et exemples pour les développeurs

Clean Code sur TypeScript : comment écrire un code qu'on n'a pas honte de montrer

Le code propre (Clean Code) n'est pas simplement un terme à la mode, mais une approche fondamentale du développement qui transforme un ensemble chaotique d'instructions en un système compréhensible et maintenable. Pour TypeScript, en tant que langage typé statiquement, les principes du code propre prennent une importance particulière : le typage strict et les outils puissants du compilateur permettent de détecter les erreurs dès la phase de développement, mais seulement si le code est structuré correctement. Dans cet article, nous allons analyser les principes clés du Clean Code appliqués à TypeScript, en les appuyant par des exemples concrets.

1. Nommage des variables, fonctions et classes

Le nom d'une variable ou d'une fonction doit répondre à la question "qu'est-ce que c'est ?" ou "que fait-elle ?". En TypeScript, grâce au typage, les noms deviennent encore plus informatifs. Évitez les noms d'une seule lettre (sauf pour les indices de boucles) et les abréviations que vous seul comprenez.

// Mauvaisconst d = new Date();const fn = (a: number, b: number) => a + b;

// Bonconst currentDate = new Date();const sum = (firstNumber: number, secondNumber: number): number => firstNumber + secondNumber;

Pour les classes, utilisez des noms ; pour les fonctions, des verbes ou des constructions verbales. Les variables booléennes doivent commencer par is, has, should.

// Mauvaisconst flag = true;function validate() { /* ... */ }

// Bonconst isUserActive = true;function validateEmail(email: string): boolean { /* ... */ }

2. Principe de responsabilité unique (SRP) pour les fonctions

Chaque fonction doit faire exactement une chose et la faire bien. Si une fonction effectue plusieurs actions, divisez-la en fonctions plus petites. TypeScript permet de typer strictement les données d'entrée et de sortie, ce qui facilite le refactoring.

// Mauvais : la fonction cherche l'utilisateur, vérifie le mot de passe et envoie un emailasync function loginUser(email: string, password: string): Promise<void> {    const user = await findUserByEmail(email);    if (user && user.password === password) {        await sendLoginEmail(user.email);        console.log('Login successful');    }}

// Bon : on sépare les responsabilitésasync function findUserByEmail(email: string): Promise<User | null> { /* ... */ }function isPasswordValid(inputPassword: string, storedHash: string): boolean { /* ... */ }async function notifyUserLogin(email: string): Promise<void> { /* ... */ }

async function loginUser(email: string, password: string): Promise<boolean> {    const user = await findUserByEmail(email);    if (!user || !isPasswordValid(password, user.passwordHash)) {        return false;    }    await notifyUserLogin(user.email);    return true;}

3. Utilisation des types et interfaces au lieu de any

L'un des principaux atouts de TypeScript est son système de types. Évitez any à tout prix. Si le type est inconnu à l'avance, utilisez unknown, les generics ou les unions de types. Cela rend le code auto-documenté et protège contre les erreurs.

// Mauvaisfunction getData(id: any): any {    return fetch(`/api/${id}`);}

// Boninterface ApiResponse<T> {    data: T;    error?: string;}

async function getData<T>(id: string): Promise<ApiResponse<T>> {    const response = await fetch(`/api/${id}`);    return response.json();}

Utilisez des interfaces strictes pour décrire la structure des objets. Cela simplifie le refactoring et aide l'IDE à suggérer les propriétés.

interface User {    readonly id: number;    name: string;    email: string;    role: 'admin' | 'user';}

function updateUserName(user: User, newName: string): User {    return { ...user, name: newName };}

4. Gestion des erreurs et programmation défensive