TypeScript Avancé : Types Génériques

Introduction

TypeScript offre un système de types puissant qui va bien au-delà des types de base. Ce guide explore les concepts avancés qui vous permettront de créer des applications plus robustes, maintenables et expressives.

Types Génériques

Les génériques sont l'un des outils les plus puissants de TypeScript. Ils permettent de créer des composants réutilisables qui fonctionnent avec différents types tout en conservant la sécurité des types. Cette expertise est essentielle pour nos projets de développement webet applications mobiles React Native.

Avantages des génériques :

✓Réutilisabilité du code avec sécurité des types
✓Évite la duplication de code
✓Meilleure IntelliSense et autocomplétion
✓Détection d'erreurs à la compilation

Exemples de génériques

// Fonction générique simple
function identity<T>(arg: T): T {
  return arg;
}

// Interface générique pour API
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
  timestamp: Date;
}

// Classe générique Repository
class Repository<T extends { id: string }> {
  private items: T[] = [];
  
  add(item: T): void {
    this.items.push(item);
  }
  
  findById(id: string): T | undefined {
    return this.items.find(item => item.id === id);
  }
  
  update(id: string, updates: Partial<T>): T | null {
    const item = this.findById(id);
    if (item) {
      Object.assign(item, updates);
      return item;
    }
    return null;
  }
}

Types Utilitaires

TypeScript fournit de nombreux types utilitaires qui permettent de transformer les types existants de manière élégante et réutilisable.

Types de transformation

• Partial<T> - Propriétés optionnelles
• Required<T> - Propriétés requises
• Readonly<T> - Propriétés en lecture seule
• Record<K,T> - Type de dictionnaire

Types de sélection

• Pick<T,K> - Sélectionner des propriétés
• Omit<T,K> - Exclure des propriétés
• Extract<T,U> - Extraire des types
• Exclude<T,U> - Exclure des types

Exemples pratiques

interface User {
  id: string;
  name: string;
  email: string;
  password: string;
  role: 'admin' | 'user';
  createdAt: Date;
}

// Types utilitaires en action
type CreateUserInput = Omit<User, 'id' | 'createdAt'>;
type UpdateUserInput = Partial<Pick<User, 'name' | 'email'>>;
type PublicUser = Omit<User, 'password'>;
type UserRole = Pick<User, 'role'>;

// Type personnalisé avec Record
type UserPermissions = Record<User['role'], string[]>;

const permissions: UserPermissions = {
  admin: ['read', 'write', 'delete'],
  user: ['read']
};

Types Conditionnels

Les types conditionnels permettent de créer des types qui changent en fonction de conditions, offrant une flexibilité extraordinaire dans la définition de types complexes.

Cas d'usage des types conditionnels :

Type Guards

Créer des types qui s'adaptent selon la présence de propriétés.

API Responses

Types différents selon le statut de la réponse.

Fonction Overloads

Types de retour conditionnels selon les paramètres d'entrée.

// Types conditionnels avancés
type ApiResult<T, E = Error> = T extends string 
  ? { success: true; data: T }
  : { success: false; error: E };

// Type conditionnel avec inférence
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// Exemple complexe : Deep Readonly
type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object 
    ? DeepReadonly<T[P]> 
    : T[P];
};

// Fonction avec types conditionnels
function processData<T>(
  data: T
): T extends string ? string[] : T extends number ? number[] : never {
  if (typeof data === 'string') {
    return data.split('') as any;
  }
  if (typeof data === 'number') {
    return [data] as any;
  }
  throw new Error('Unsupported type');
}

Mapped Types

Les mapped types permettent de transformer les types existants en créant de nouveaux types basés sur des itérations sur les propriétés d'un type existant.

Applications pratiques :

🔧Création de formulaires typés
🔧Validation de schémas
🔧Transformation d'API responses
🔧Création de types proxy

// Mapped types personnalisés
type Stringify<T> = {
  [K in keyof T]: string;
};

type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

// Mapped type avec conditions
type OptionalByType<T, U> = {
  [K in keyof T]: T[K] extends U ? T[K] | undefined : T[K];
};

// Exemple avancé : Form State
type FormState<T> = {
  [K in keyof T]: {
    value: T[K];
    error?: string;
    touched: boolean;
  };
};

// Utilisation
interface LoginForm {
  email: string;
  password: string;
}

type LoginFormState = FormState<LoginForm>;
// Résultat:
// {
//   email: { value: string; error?: string; touched: boolean };
//   password: { value: string; error?: string; touched: boolean };
// }

Bonnes Pratiques

Pour tirer le meilleur parti des types avancés de TypeScript, voici quelques bonnes pratiques à suivre dans vos projets.

Recommandations :

📚Documentez vos types complexes avec des commentaires
📚Utilisez des noms de types explicites et descriptifs
📚Évitez la sur-ingénierie avec des types trop complexes
📚Testez vos types avec des tests de compilation

Conclusion

Les types avancés de TypeScript sont des outils puissants qui permettent de créer des applications plus sûres, plus maintenables et plus expressives. En maîtrisant ces concepts, vous pourrez tirer pleinement parti de la puissance de TypeScript.

Besoin d'aide avec TypeScript ?

Notre équipe peut vous aider à maîtriser TypeScript et améliorer la qualité de votre code.

Contactez-nous

TypeScript Avancé : Types Génériques et Utilitaires