TypeScript : les bonnes pratiques pour un code maintenable

Introduction

TypeScript est devenu incontournable dans l'écosystème JavaScript moderne. Mais avoir TypeScript ne suffit pas : il faut l'utiliser correctement pour en tirer tous les bénéfices.

Voici les bonnes pratiques que j'applique quotidiennement pour écrire du code TypeScript maintenable et robuste.

1. Configuration stricte

Activez les options strictes dans tsconfig.json :

``json { "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true } } `

2. Évitez any

any désactive le typage. Utilisez plutôt :

`typescript // ❌ Mauvais function process(data: any) { ... }

// ✅ Bon function process(data: unknown) { if (isValidData(data)) { ... } }

// ✅ Meilleur : typage explicite interface UserData { id: number; name: string; email: string; }

function processUser(data: UserData) { ... } `

3. Types vs Interfaces

Utilisez les interfaces pour les objets et les types pour les unions/intersections :

`typescript // Interface pour les objets interface User { id: number; name: string; }

// Type pour les unions type Status = "pending" "active" "inactive";

// Type pour les intersections type AdminUser = User & { permissions: string[] }; `

4. Narrowing avec les type guards

`typescript // Type guard personnalisé function isUser(value: unknown): value is User { return ( typeof value === "object" && value !== null && "id" in value && "name" in value ); }

// Utilisation function processData(data: unknown) { if (isUser(data)) { // TypeScript sait que data est User ici console.log(data.name); } } `

5. Generics intelligents

`typescript // ❌ Trop générique function fetchData(url: string): Promise { ... }

// ✅ Contraint et utile interface ApiResponse { data: T; status: number; message: string; }

async function fetchApi( endpoint: string ): Promise> { ... } `

6. Utility Types natifs

TypeScript fournit des types utilitaires puissants :

`typescript interface User { id: number; name: string; email: string; createdAt: Date; }

// Tous les champs optionnels type PartialUser = Partial;

// Seulement certains champs type UserPreview = Pick;

// Exclure certains champs type UserWithoutDates = Omit;

// Tous les champs requis type RequiredUser = Required>;

// Lecture seule type ReadonlyUser = Readonly; `

7. Enums vs Union Types

Préférez les union types aux enums dans la plupart des cas :

`typescript // ❌ Enum (génère du code JS) enum Status { Pending = "PENDING", Active = "ACTIVE", }

// ✅ Union type (zero runtime cost) type Status = "pending" "active" "inactive";

// ✅ Const object si vous avez besoin des valeurs const STATUS = { PENDING: "pending", ACTIVE: "active", INACTIVE: "inactive", } as const;

type Status = typeof STATUS[keyof typeof STATUS]; `

8. Gestion des erreurs typée

`typescript // Résultat typé à la Rust type Result = | { success: true; data: T } | { success: false; error: E };

async function fetchUser(id: number): Promise> { try { const user = await api.getUser(id); return { success: true, data: user }; } catch (e) { return { success: false, error: e as Error }; } }

// Utilisation const result = await fetchUser(1); if (result.success) { console.log(result.data.name); // TypeScript connaît le type } else { console.error(result.error.message); } `

9. Const assertions

`typescript // Sans const assertion : type string[] const colors = ["red", "green", "blue"];

// Avec const assertion : type readonly ["red", "green", "blue"] const colors = ["red", "green", "blue"] as const;

// Utile pour les configurations const config = { api: "https://api.example.com", timeout: 5000, } as const; `

10. Organisation des types

Structure recommandée :

` src/ ├── types/ │ ├── index.ts # Exports centralisés │ ├── api.ts # Types API │ ├── models.ts # Types métier │ └── utils.ts # Types utilitaires ``

Conclusion

TypeScript est un outil puissant quand il est bien utilisé. Ces bonnes pratiques vous aideront à écrire du code plus sûr, plus lisible et plus facile à maintenir.

Besoin d'accompagnement sur vos projets TypeScript ? Contactez-moi.