Types conditionnels et mappés dans React
Créez des types de propriétés de composants dont la structure varie selon d’autres valeurs de propriétés avec des types conditionnels.
Types conditionnels et mappés dans React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Bases des types conditionnels
Un type conditionnel utilise la syntaxe T extends U ? X : Y : si T peut être affecté à U, le type se résout en X, sinon en Y.
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
type C = IsString<'hello'>; // truePropriétés conditionnelles fondées sur d'autres propriétés
Utilisez les types conditionnels pour rendre une propriété obligatoire ou facultative en fonction de la valeur d'une autre propriété.
type InputProps<T extends 'text' | 'number'> = {
type: T;
} & (T extends 'number' ? { min?: number; max?: number } : { maxLength?: number });
const numInput: InputProps<'number'> = { type: 'number', min: 0, max: 100 };
const txtInput: InputProps<'text'> = { type: 'text', maxLength: 50 };Types mappés
Les types mappés créent un nouveau type en transformant chaque propriété d'un type existant. La syntaxe in keyof parcourt toutes les clés.
type Optional<T> = { [K in keyof T]?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };Rendre les propriétés facultatives pour les formulaires de mise à jour
Utilisez Partial<T> (un type mappé intégré) pour les propriétés des formulaires de mise à jour lorsque tous les champs ne sont pas obligatoires.
interface User { id: string; name: string; email: string; role: string; }
// Update form — all fields optional:
type UserUpdateProps = Partial<Omit<User, 'id'>>;
function UserUpdateForm(props: UserUpdateProps) {
// name, email, role are all optional
}Record avec des types mappés
Créez des types de recherche dont les clés proviennent d'une union et dont les valeurs ont une structure cohérente.
type Status = 'idle' | 'loading' | 'success' | 'error';
type StatusConfig = Record<Status, {
label: string;
icon: React.ReactNode;
color: string;
}>;
const statusConfig: StatusConfig = {
idle: { label: 'Ready', icon: <ReadyIcon />, color: 'gray' },
loading: { label: 'Loading...', icon: <Spinner />, color: 'blue' },
success: { label: 'Done', icon: <CheckIcon />, color: 'green' },
error: { label: 'Error', icon: <XIcon />, color: 'red' },
};Sélectionner les clés obligatoires
Utilisez les types conditionnels avec -? (pour supprimer le caractère facultatif) afin d'extraire uniquement les clés obligatoires d'un type.
type RequiredKeys<T> = {
[K in keyof T]-?: undefined extends T[K] ? never : K;
}[keyof T];
interface FormData { name: string; email: string; phone?: string; }
type Required = RequiredKeys<FormData>; // 'name' | 'email'Types littéraux de modèle
Les types littéraux de modèle composent des types littéraux de chaîne, ce qui permet de typer les noms d'événements, les chaînes de classes CSS et les chemins d'API.
type EventName = 'click' | 'change' | 'focus';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onChange' | 'onFocus'
type ApiPath<R extends string> = `/api/${R}`;
type UserPath = ApiPath<'users'>; // '/api/users'Extraire conditionnellement des propriétés
Utilisez Extract et Exclude pour filtrer les types d'union.
type AllProps = 'onClick' | 'onHover' | 'onChange' | 'style';
type EventHandlers = Extract<AllProps, `on${string}`>;
// 'onClick' | 'onHover' | 'onChange'
type NonEventProps = Exclude<AllProps, `on${string}`>;
// 'style'Types mappés pour la validation des formulaires
Générez des types d'erreurs de validation qui reproduisent la structure des données de votre formulaire — une chaîne de message d'erreur par champ.
interface LoginForm { email: string; password: string; }
type FormErrors<T> = { [K in keyof T]?: string };
type LoginErrors = FormErrors<LoginForm>;
// { email?: string; password?: string }
const errors: LoginErrors = { email: 'Invalid email format' };Types mappés discriminés
Combinez les types mappés et les types conditionnels pour créer des types dont la structure change en fonction d'un discriminant.
type EventMap = {
click: { x: number; y: number };
keydown: { key: string; code: string };
resize: { width: number; height: number };
};
type Handler<E extends keyof EventMap> = (event: EventMap[E]) => void;
function on<E extends keyof EventMap>(event: E, handler: Handler<E>) {
window.addEventListener(event, handler as EventListener);
}Quand ne pas sur-concevoir les types
Les types conditionnels et mappés offrent davantage de possibilités, mais ajoutent aussi de la complexité. Utilisez-les lorsqu'ils éliminent une duplication réelle ou empêchent des bogues avérés — pas seulement pour montrer vos connaissances en TypeScript.
Vérification rapide
Que fait le type mappé { [K in keyof T]?: T[K] } ?
Récapitulatif
Les types conditionnels (T extends U ? X : Y) créent des types qui opèrent une bifurcation en fonction de l'affectabilité. Les types mappés ([K in keyof T]) transforment chaque propriété d'un type. Utilisez-les pour les types partiels des formulaires de mise à jour, les cartes d'événements typées, les structures d'erreurs de formulaire et les chemins d'API littéraux de modèle.
Questions Fréquemment Posées
La leçon « Types conditionnels et mappés dans React » est-elle gratuite ?
Oui — le texte complet de « Types conditionnels et mappés dans React » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Types conditionnels et mappés dans React » ?
Créez des types de propriétés de composants dont la structure varie selon d’autres valeurs de propriétés avec des types conditionnels. Tu pratiques React 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 React Academy ?
Aucune expérience préalable n'est requise. React 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 2 sur 4.
Combien de temps prend la leçon « Types conditionnels et mappés dans React » ?
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 React Academy ?
Oui. Chaque leçon React 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
- Unions discriminées pour les variantes de composants
- Types conditionnels et mappés dans React
- Composants polymorphes avec la propriété « as »
- Formulaires sûrs du point de vue des types et contrats de réponses d’API