0Pricing
Frontend Academy · Leçon

Génériques : T extends et contraintes

Écrivez des fonctions et des interfaces génériques, contraignez les paramètres de type avec extends et utilisez des valeurs par défaut génériques pour créer des API flexibles.

Génériques : T extends et contraintes est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Que sont les types génériques ?

Les types génériques vous permettent d'écrire des fonctions, des classes et des interfaces qui fonctionnent avec plusieurs types tout en conservant la sûreté du typage. Au lieu d'écrire une fonction distincte pour chaque type, vous écrivez une seule fonction générique paramétrée par une variable de type.

Une fonction générique simple

Le paramètre de type T est déclaré entre chevrons. TypeScript déduit T à partir du type de l'argument : aucune annotation explicite n'est nécessaire lors de l'appel.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Interfaces et types génériques

Paramétrez les interfaces et les types avec des génériques pour décrire des structures de données réutilisables.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends — Contraindre les types génériques

Utilisez T extends SomeType pour limiter les valeurs possibles de T. La fonction n'accepte que les types qui respectent cette contrainte.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof et contraintes génériques

keyof T produit une union des clés de propriétés de T. Associé aux génériques, il permet un accès aux propriétés avec sûreté du typage.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Valeurs par défaut des génériques

Fournissez un type par défaut pour un paramètre générique avec T = DefaultType. Cette possibilité est utile lorsqu'une valeur par défaut pertinente existe, tout en permettant aux appelants de la remplacer.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Plusieurs paramètres de type

Les fonctions peuvent posséder plusieurs paramètres de type indépendants.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Classes génériques

Les classes peuvent également être génériques. C'est courant dans les structures de données comme les piles, les files et les magasins observables.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Fonctions génériques asynchrones

Les fonctions génériques asynchrones sont courantes pour les appels d'API typés.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

Inférence dans les types conditionnels

Le mot-clé infer à l'intérieur d'un type conditionnel extrait un type à partir d'un modèle. Il est utilisé dans le code des bibliothèques pour extraire le type de retour d'une fonction ou le type d'élément d'un tableau.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

Quand utiliser les génériques

Utilisez les génériques lorsque : 1) la même logique s'applique à plusieurs types ; 2) vous avez besoin d'une relation entre les types d'entrée et de sortie ; 3) vous construisez une structure de données ou un utilitaire réutilisable. N'utilisez pas les génériques uniquement par principe : les types concrets sont plus clairs lorsqu'il n'existe qu'un seul cas d'utilisation.

Vérification rapide

Que garantit la contrainte T extends { length: number } ?

Récapitulatif : types génériques

Les génériques paramètrent les types afin qu'une fonction, une classe ou une interface puisse fonctionner avec plusieurs types. T extends SomeType ajoute des contraintes. keyof T fournit des unions de clés de propriétés. Les valeurs par défaut génériques utilisent T = Default. infer extrait des types dans les types conditionnels. Utilisez les génériques pour créer des utilitaires et des structures de données typés et réutilisables.

Questions Fréquemment Posées

La leçon « Génériques : T extends et contraintes » est-elle gratuite ?

Oui — le texte complet de « Génériques : T extends et contraintes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Génériques : T extends et contraintes » ?

Écrivez des fonctions et des interfaces génériques, contraignez les paramètres de type avec extends et utilisez des valeurs par défaut génériques pour créer des API flexibles. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Génériques : T extends et contraintes » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Génériques : T extends et contraintes
  2. Types utilitaires : Partial, Required, Pick et Omit
  3. Types mappés et types conditionnels
  4. Rétrécissement : typeof, instanceof et unions discriminées
← Retour à Frontend Academy