Rétrécissement : typeof, instanceof et unions discriminées
Utilisez des gardes de type pour rétrécir les types union à l’exécution avec typeof, instanceof et les motifs d’unions discriminées.
Rétrécissement : typeof, instanceof et unions discriminées est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Qu’est-ce que le raffinement de type ?
TypeScript commence avec un type large, par exemple string | number. Le raffinement consiste à préciser le type pour obtenir un type plus spécifique à l’intérieur d’un bloc conditionnel. TypeScript suit automatiquement ce raffinement.
Raffinement avec typeof
L’opérateur typeof affine les types primitifs. À l’intérieur d’un bloc if, TypeScript connaît le type exact.
function format(value: string | number | boolean): string {
if (typeof value === 'string') {
return value.toUpperCase(); // string here
}
if (typeof value === 'number') {
return value.toFixed(2); // number here
}
return String(value); // boolean here
}Raffinement avec instanceof
instanceof affine les instances de classes. TypeScript connaît la classe précise à l’intérieur du bloc.
function processError(err: unknown) {
if (err instanceof Error) {
console.error(err.message); // Error methods available
} else if (err instanceof Response) {
console.error('HTTP error:', err.status);
} else {
console.error('Unknown:', err);
}
}Raffinement par vérité logique
TypeScript exclut null et undefined lors des vérifications de vérité logique.
function printLength(value: string | null | undefined) {
if (value) {
console.log(value.length); // string here (null/undefined filtered)
}
}Raffinement par égalité
L’égalité stricte affine le type jusqu’au type littéral. C’est utile pour les unions discriminées et les énumérations de chaînes.
function handle(action: 'submit' | 'cancel' | 'reset') {
if (action === 'submit') {
// action is exactly 'submit'
doSubmit();
}
}Raffinement avec l’opérateur in
L’opérateur in affine les types d’unions d’objets en vérifiant quelles propriétés existent.
interface Cat { meow(): void; }
interface Dog { bark(): void; }
function speak(animal: Cat | Dog) {
if ('meow' in animal) {
animal.meow(); // Cat
} else {
animal.bark(); // Dog
}
}Unions discriminées — raffinement fondé sur une balise
Une union discriminée possède une propriété de type littéral commune, appelée le discriminant. TypeScript affine l’union dans un switch ou un if en fonction de cette propriété.
type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;
function render(state: State) {
switch (state.status) {
case 'loading': return '<Spinner />';
case 'success': return renderUsers(state.data); // state.data available
case 'error': return renderError(state.message);
}
}Prédicats de type — gardes de type personnalisées
Une fonction prédicat de type affine le type pour l’appelant. Utilisez param is Type comme type de retour.
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'name' in value &&
typeof (value as User).name === 'string'
);
}
const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
console.log(data.name); // typed as User
}Fonctions d’assertion
Une fonction d’assertion lève une erreur si la condition échoue et affine le type après l’appel.
function assertIsString(val: unknown): asserts val is string {
if (typeof val !== 'string') throw new Error('Expected string');
}
const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string hereVérification d’exhaustivité
Lorsqu’un switch sur une union discriminée laisse un type never dans la branche par défaut, TypeScript vérifie que tous les cas sont traités. Ajoutez une branche par défaut qui affecte la valeur à never afin d’obtenir une erreur de compilation si une nouvelle variante est ajoutée.
function render(state: State): string {
switch (state.status) {
case 'loading': return '...';
case 'success': return state.data.length.toString();
case 'error': return state.message;
default:
const _exhaustive: never = state;
throw new Error('Unhandled state: ' + _exhaustive);
}
}Raffinement avec Array.isArray
Array.isArray() affine une valeur pour la faire reconnaître comme un tableau.
function processInput(input: string | string[]) {
if (Array.isArray(input)) {
return input.join(', '); // string[]
}
return input.toUpperCase(); // string
}Vérification rapide
Quelle technique de raffinement utilise une propriété littérale commune pour distinguer les variantes d’un type union ?
Récapitulatif : raffinement TypeScript
typeof pour les types primitifs. instanceof pour les classes. L’opérateur in pour les formes d’objets. La vérité logique filtre null et undefined. Les unions discriminées avec une propriété littérale commune permettent d’écrire des instructions switch exhaustives. Les prédicats de type personnalisés (is) servent aux vérifications d’exécution complexes. La vérification d’exhaustivité utilise never dans les branches par défaut.
Questions Fréquemment Posées
La leçon « Rétrécissement : typeof, instanceof et unions discriminées » est-elle gratuite ?
Oui — le texte complet de « Rétrécissement : typeof, instanceof et unions discriminées » 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 « Rétrécissement : typeof, instanceof et unions discriminées » ?
Utilisez des gardes de type pour rétrécir les types union à l’exécution avec typeof, instanceof et les motifs d’unions discriminées. 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 4 sur 4.
Combien de temps prend la leçon « Rétrécissement : typeof, instanceof et unions discriminées » ?
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