Types mappés et types conditionnels
Créez des types mappés pour transformer toutes les propriétés d’un type et utilisez des types conditionnels avec infer pour une logique avancée au niveau des types.
Types mappés et types conditionnels est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Types mappés — transformer chaque propriété
Les types mappés parcourent les clés d'un type et les transforment. Ils constituent la base des types utilitaires Partial, Readonly et Record.
// Partial implemented as a mapped type:
type MyPartial<T> = {
[K in keyof T]?: T[K];
};
// Readonly:
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};Remapper les clés avec as
Utilisez as dans la clause de mappage pour renommer les clés. Combinez-le avec les types littéraux de gabarit pour réaliser des transformations puissantes.
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }Filtrer les propriétés avec never
Renvoyez never lors du remappage d'une clé pour supprimer cette propriété du type obtenu.
// Keep only function-valued properties:
type FunctionProperties<T> = {
[K in keyof T as T[K] extends Function ? K : never]: T[K];
};Types conditionnels — équivalent de if/else pour les types
Les types conditionnels utilisent le modèle T extends U ? TrueType : FalseType. Ils sont évalués au niveau des types, et non lors de l'exécution.
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>; // numberTypes conditionnels distributifs
Lorsque T est une union, les types conditionnels se distribuent sur chaque membre. string | number extends string ? ... effectue une vérification distincte pour chacun : (string extends string ? ...) | (number extends string ? ...).
type ToArray<T> = T extends any ? T[] : never;
type StringOrNumberArray = ToArray<string | number>;
// string[] | number[] (not (string | number)[])Utiliser infer pour extraire des types
infer R introduit une variable de type que TypeScript renseigne. Cela permet de capturer des parties de la structure d'un type.
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>; // numberTypes littéraux de gabarit
Les types littéraux de gabarit utilisent la même syntaxe avec des accents graves que les littéraux de gabarit, mais au niveau des types, afin de créer des unions à partir de combinaisons de littéraux de chaîne.
type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'Combiner les types mappés et conditionnels
Les modèles TypeScript les plus puissants combinent les deux. Les types intégrés Required, Partial, Readonly et Record sont tous des types mappés.
// Make all functions in an object async:
type Asyncify<T> = {
[K in keyof T]: T[K] extends (...args: infer A) => infer R
? (...args: A) => Promise<R>
: T[K];
};DeepPartial — Type utilitaire récursif
Partial intégré ne s’applique qu’à un seul niveau. DeepPartial effectue une récursion dans les objets imbriqués.
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};Cas réel : types de réponse d’API
Les types mappés et conditionnels permettent de puissantes dérivations de types d’API — par exemple, d’extraire uniquement les propriétés d’un objet sérialisables en JSON.
Évitez la sur-ingénierie
Des manipulations complexes de types peuvent rendre le code difficile à comprendre. Demandez-vous toujours : un simple alias de type ou une interface serait-il plus clair ? Les types doivent documenter l’intention, et non démontrer votre maîtrise de TypeScript.
Vérification rapide
Quelle valeur T extends U ? A : B prend-il lorsque T est un type union ?
Récapitulatif : types mappés et conditionnels
Les types mappés parcourent les clés avec [K in keyof T]. Utilisez as pour remapper les clés. Renvoyez never pour filtrer. Les types conditionnels suivent la forme T extends U ? A : B. infer extrait les variables de type. Les types littéraux de modèle construisent des unions de chaînes. Combinez ces deux mécanismes pour réaliser de puissantes transformations de types, comme DeepPartial et Asyncify.
Questions Fréquemment Posées
La leçon « Types mappés et types conditionnels » est-elle gratuite ?
Oui — le texte complet de « Types mappés et types conditionnels » 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 « Types mappés et types conditionnels » ?
Créez des types mappés pour transformer toutes les propriétés d’un type et utilisez des types conditionnels avec infer pour une logique avancée au niveau des types. 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 3 sur 4.
Combien de temps prend la leçon « Types mappés et types conditionnels » ?
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
- Génériques : T extends et contraintes
- Types utilitaires : Partial, Required, Pick et Omit
- Types mappés et types conditionnels
- Rétrécissement : typeof, instanceof et unions discriminées