TypeScript Generics

Objectifs de la leçon

Plan du cours

Rappel : identity<T> et Box<T>

Un generic = un paramètre de type. Comme un argument, mais pour les types.

// identity : retourne la même valeur avec le bon type
function identity<T>(value: T): T {
  return value;
}

const num = identity(42);        // type: number
const str = identity("hello");   // type: string

// Box : un conteneur générique
interface Box<T> {
  value: T;
  label: string;
}

const numberBox: Box<number> = { value: 42, label: "age" };
const stringBox: Box<string> = { value: "hello", label: "greeting" };

Le problème : T est trop libre

Sans contrainte, T peut être absolument n'importe quoi.

// On veut une fonction qui retourne la longueur de quelque chose
function getLength<T>(item: T): number {
  return item.length; // ❌ ERREUR : Property 'length' does not exist on type 'T'
}

extends = contrainte, pas héritage

Dans les generics, extends signifie "doit avoir au moins..."

<T extends HasLength> en action

// Définir la contrainte
interface HasLength {
  length: number;
}

// Appliquer la contrainte sur T
function getLength<T extends HasLength>(item: T): number {
  return item.length; // ✅ OK : TypeScript sait que T a .length
}

// ✅ Fonctionne — string a .length
getLength("hello");         // 5

// ✅ Fonctionne — Array a .length
getLength([1, 2, 3]);       // 3

// ✅ Fonctionne — objet avec .length
getLength({ length: 10, name: "test" });  // 10

// ❌ ERREUR — number n'a pas .length
getLength(42);
// Argument of type 'number' is not assignable
// to parameter of type 'HasLength'

Contrainte avec un type inline

Pas besoin de créer une interface séparée pour les cas simples.

// Contrainte inline — T doit avoir au moins { id: number }
function printId<T extends { id: number }>(item: T): void {
  console.log(`ID: ${item.id}`);
}

printId({ id: 1, name: "Alice" });    // ✅ OK
printId({ id: 2, email: "b@c.com" }); // ✅ OK
printId({ name: "Bob" });             // ❌ ERREUR : pas de .id

// Contrainte avec un type plus complexe
function merge<T extends object>(target: T, source: Partial<T>): T {
  return { ...target, ...source };
}

const user = merge(
  { name: "Alice", age: 30 },
  { age: 31 }
); // ✅ type: { name: string; age: number }

Contraintes courantes

keyof — L'union des clés d'un type

keyof T donne toutes les clés possibles de T sous forme d'union.

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// keyof User = "id" | "name" | "email" | "age"
type UserKeys = keyof User;

// On peut l'utiliser pour restreindre une variable
let key: keyof User;
key = "name";   // ✅
key = "email";  // ✅
key = "phone";  // ❌ ERREUR : "phone" n'existe pas dans User

Generics multiples : <T, K>

On peut avoir plusieurs paramètres de type, chacun avec sa propre contrainte.

// K est contraint à être une clé de T
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 1, name: "Alice", age: 30 };

const name = getProperty(user, "name");   // type: string ✅
const age = getProperty(user, "age");     // type: number ✅
const oops = getProperty(user, "phone");  // ❌ ERREUR !
// Argument of type '"phone"' is not assignable
// to parameter of type '"id" | "name" | "age"'

T[K] — Indexed Access Types

Accéder au type d'une propriété dynamiquement.

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
}

// Accès à un type spécifique
type UserId = User["id"];          // number
type UserName = User["name"];      // string
type UserAdmin = User["isAdmin"];  // boolean

// Accès avec une union de clés
type UserStrings = User["name" | "email"];  // string

// Avec keyof — toutes les valeurs possibles
type UserValues = User[keyof User]; // number | string | boolean

Exemple avancé : setProperty<T, K>

function setProperty<T, K extends keyof T>(
  obj: T,
  key: K,
  value: T[K]  // La valeur doit correspondre au type de la clé
): T {
  return { ...obj, [key]: value };
}

const user = { id: 1, name: "Alice", age: 30 };

// ✅ Correct — "name" attend un string
setProperty(user, "name", "Bob");

// ✅ Correct — "age" attend un number
setProperty(user, "age", 31);

// ❌ ERREUR — "age" attend un number, pas un string
setProperty(user, "age", "thirty-one");
// Argument of type 'string' is not assignable
// to parameter of type 'number'

Generics multiples indépendants

Quand T et U n'ont pas de lien entre eux.

// Combiner deux valeurs de types différents
function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

const p1 = pair("hello", 42);       // type: [string, number]
const p2 = pair(true, [1, 2, 3]);   // type: [boolean, number[]]

// Convertir un type en un autre
function transform<T, U>(
  input: T,
  transformer: (value: T) => U
): U {
  return transformer(input);
}

const length = transform("hello", (s) => s.length);  // type: number
const upper = transform("hello", (s) => s.toUpperCase()); // type: string

Vue d'ensemble des types utilitaires

Des outils intégrés à TypeScript pour transformer les types.

Partial<T> — Tout devient optionnel

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// Partial<User> équivaut à :
// {
//   id?: number;
//   name?: string;
//   email?: string;
//   age?: number;
// }

// Use case : mise à jour partielle
function updateUser(id: number, updates: Partial<User>): User {
  const current = getUserById(id);
  return { ...current, ...updates };
}

// ✅ On peut ne passer que ce qui change
updateUser(1, { name: "Bob" });
updateUser(1, { age: 31, email: "new@mail.com" });
updateUser(1, {}); // ✅ Même un objet vide est valide

Comment Partial fonctionne sous le capot

C'est un mapped type — il itère sur les clés et ajoute ?

// L'implémentation réelle de Partial dans TypeScript :
type Partial<T> = {
  [K in keyof T]?: T[K];
};

// Décomposition :
// 1. keyof T        → union de toutes les clés ("id" | "name" | "email" | "age")
// 2. [K in ...]     → pour chaque clé K
// 3. ?              → rendre optionnel
// 4. T[K]           → garder le type original de la valeur

Pick<T, K> — Garder seulement certaines clés

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  password: string;
  createdAt: Date;
}

// Garder seulement id, name, email
type UserPublicInfo = Pick<User, "id" | "name" | "email">;
// = { id: number; name: string; email: string }

// Pour une carte d'utilisateur dans l'UI
type UserCardProps = Pick<User, "name" | "email" | "age">;
// = { name: string; email: string; age: number }

// Pour un endpoint de recherche
type UserSearchResult = Pick<User, "id" | "name">;
// = { id: number; name: string }

function renderUserCard(user: UserCardProps) {
  return `${user.name} (${user.age}) — ${user.email}`;
}

Omit<T, K> — Supprimer certaines clés

L'inverse de Pick : on enlève les clés qu'on ne veut pas.

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  password: string;
  createdAt: Date;
}

// Exclure les champs sensibles pour l'API publique
type SafeUser = Omit<User, "password">;
// = { id: number; name: string; email: string; age: number; createdAt: Date }

// Exclure les champs auto-générés pour la création
type CreateUserDTO = Omit<User, "id" | "createdAt">;
// = { name: string; email: string; age: number; password: string }

function createUser(data: CreateUserDTO): User {
  return {
    ...data,
    id: generateId(),        // Auto-généré
    createdAt: new Date(),   // Auto-généré
  };
}

Pick vs Omit — Quand utiliser lequel ?

Record<K, V> — Dictionnaires typés

Créer un objet dont toutes les clés ont le même type de valeur.

// Record<string, number> = { [key: string]: number }
const scores: Record<string, number> = {
  alice: 95,
  bob: 87,
  charlie: 92,
};

// Record avec une union de clés — TOUTES les clés sont requises
type Status = "pending" | "active" | "archived";

const statusLabels: Record<Status, string> = {
  pending: "En attente",
  active: "Actif",
  archived: "Archivé",
};
// ❌ ERREUR si on oublie une clé !

// Record avec des valeurs complexes
type Theme = "light" | "dark";
interface ThemeColors { bg: string; text: string; accent: string; }

const themes: Record<Theme, ThemeColors> = {
  light: { bg: "#fff", text: "#000", accent: "#0066ff" },
  dark:  { bg: "#1a1a1a", text: "#fff", accent: "#66b3ff" },
};

Record vs Index Signature vs Map

// ✅ Préférer Record quand on connaît les clés possibles
const permissions: Record<"admin" | "user" | "guest", boolean> = {
  admin: true,
  user: true,
  guest: false,
};

Le pattern DTO avec les utilitaires

Combiner Partial + Omit pour des DTOs précis et sûrs.

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  role: "admin" | "user";
  createdAt: Date;
}

// 1️⃣ DTO de création : tout sauf id et createdAt (auto-générés)
type CreateUserDTO = Omit<User, "id" | "createdAt">;
// = { name: string; email: string; age: number; role: "admin" | "user" }

// 2️⃣ DTO de mise à jour : partiel, sans id (on ne change pas l'id)
type UpdateUserDTO = Partial<Omit<User, "id" | "createdAt">>;
// = { name?: string; email?: string; age?: number; role?: "admin" | "user" }

// 3️⃣ DTO de réponse API : tout sauf le mot de passe
type UserResponse = Omit<User, "password">;

Exercice live : API CRUD complète

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  category: string;
  stock: number;
  createdAt: Date;
  updatedAt: Date;
}

// Création : pas d'id ni de timestamps
type CreateProductDTO = Omit<Product, "id" | "createdAt" | "updatedAt">;

// Mise à jour : partiel, sans id ni timestamps
type UpdateProductDTO = Partial<Omit<Product, "id" | "createdAt" | "updatedAt">>;

// Liste : juste les infos essentielles
type ProductListItem = Pick<Product, "id" | "name" | "price" | "category">;

// Filtre de recherche : toutes les clés optionnelles
type ProductFilter = Partial<Pick<Product, "category" | "name">>;

// Implémentation
async function updateProduct(id: number, data: UpdateProductDTO): Promise<Product> {
  // data peut contenir { name: "New name" } ou { price: 29.99 } ou les deux...
  return api.patch(`/products/${id}`, data);
}

Combinaisons avancées

// Required + Pick : rendre certaines clés obligatoires
type RequiredUserFields = Required<Pick<Partial<User>, "name" | "email">>;
// = { name: string; email: string }

// Record + Pick : dictionnaire de sous-types
type UsersByRole = Record<User["role"], User[]>;
// = { admin: User[]; user: User[] }

// Intersection : ajouter des champs à un type existant
type UserWithToken = User & { token: string };

// Pattern complet d'un formulaire
interface FormState<T> {
  values: Partial<T>;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
  isValid: boolean;
}

type UserForm = FormState<CreateUserDTO>;
// values: { name?: string; email?: string; ... }
// errors: { name?: string; email?: string; ... }
// touched: { name?: boolean; email?: boolean; ... }

Piège : extends dans les generics vs héritage

// Héritage de classe
class Animal { name: string; }
class Dog extends Animal { 
  breed: string; 
}
// Dog HÉRITE de Animal
// Dog est un sous-type

// Contrainte de type
function log<T extends { name: string }>(
  item: T
) {
  console.log(item.name);
}
// T doit AVOIR name
// T peut avoir d'autres props

Pièges courants avec les types utilitaires

Points clés à retenir