Maîtrise les Types Conditionnels en TypeScript

Ah, les types conditionnels en TypeScript… Un peu comme des caméléons, ils changent de forme et s’adaptent aux besoins de ton code ! Peut-être que tu connais déjà les types de base, mais avec les types conditionnels, on passe à un niveau supérieur. Imagine des types intelligents qui s’adaptent à la situation, comme des super-héros du typage. Allez, installe-toi confortablement, et prépare-toi à ajouter un peu de magie à ton code TypeScript ! 🧙‍♂️

Pourquoi utiliser les types conditionnels ? 🧐

En TypeScript, on adore quand tout est bien rangé, tout bien typé. Mais parfois, notre code a besoin d’un type qui s’adapte en fonction de certaines conditions. Imagine que tu as une fonction qui peut renvoyer soit un string, soit un number, en fonction des paramètres d’entrée. 😱 Sans types conditionnels, il faudrait gérer chaque cas à la main, et ça devient vite pénible ! Heureusement, les types conditionnels sont là pour apporter souplesse et réactivité, un peu comme un ninja du typage. 🥷

La base : syntaxe des types conditionnels 🧩

Les types conditionnels, c’est un peu comme un opérateur ternaire, mais pour les types. Voici un exemple pour te mettre l’eau à la bouche :

typescript

Dans cet exemple, IsString est un type conditionnel qui vérifie si T est un string. Si oui, il retourne "C'est une chaîne", sinon "Ce n'est pas une chaîne". C’est simple, mais attends de voir ce qu’on peut en faire dans des cas plus avancés !

Cas pratique : adapter un type selon la configuration 🛠️

Imaginons une fonction qui prend un paramètre de configuration et doit renvoyer un type différent selon cette configuration. Les types conditionnels sont parfaits pour ce genre de magie ✨ !

Exemple de code

typescript

Dans cet exemple, Response<T> adapte le type selon que mode est "simple" ou "détaillé". La magie opère : fetchData(simpleConfig) renvoie un objet avec seulement data, alors que fetchData(detailedConfig) inclut aussi details. Pratique, non ?

Types conditionnels imbriqués : du typage à la carte 🧇

Pourquoi s’arrêter là ? Tu peux aussi imbriquer les types conditionnels pour gérer des cas encore plus précis ! Imagine que tu veux adapter le type non seulement en fonction du mode, mais aussi selon si l’utilisateur est authentifié ou non. Prêt à voir de la haute voltige typographique ? 🎢

typescript

Ici, UserResponse adapte le type en fonction de deux critères : mode et isAuthenticated. Résultat ? Un typage ultra-précis qui couvre tous les cas possibles !

Types conditionnels avancés avec `infer` : la déduction de type 🕵️‍♂️

Prêt pour un petit tour de passe-passe ? TypeScript propose un mot-clé spécial dans les types conditionnels : infer. Grâce à lui, tu peux déduire un type directement dans ton type conditionnel. Pratique pour extraire des informations de types complexes !

Exemple avec `infer`

typescript

Ici, ReturnTypeOfFunction utilise infer R pour déduire le type de retour d’une fonction. Dans cet exemple, HelloReturnType sera de type string, puisque getHello retourne une chaîne de caractères.

Conclusion 🎉

Les types conditionnels en TypeScript, c'est comme un super pouvoir pour ton code. Ils te permettent de créer des types dynamiques et de garder un typage rigoureux, tout en allégeant le code. Alors, prêt à en mettre plein la vue à tes collègues ? Expérimente avec ces types conditionnels et découvre de nouvelles manières de structurer ton code TypeScript ! 🚀

Plus d'excuses pour les types approximatifs : avec les types conditionnels, ton code TypeScript devient tout simplement infaillible ! 👌

1type IsString<T> = T extends string
2  ? "C'est une chaîne"
3  : "Ce n'est pas une chaîne";

1type Config = {
2  mode: 'simple' | 'détaillé';
3};
4
5type Response<T extends Config> = T['mode'] extends 'simple'
6  ? { data: string }
7  : { data: string; details: string[] };
8
9function fetchData<T extends Config>(config: T): Response<T> {
10  if (config.mode === 'simple') {
11    return { data: 'Données simplifiées' } as Response<T>;
12  } else {
13    return {
14      data: 'Données complètes',
15      details: ['détail1', 'détail2'],
16    } as Response<T>;
17  }
18}
19
20const simpleConfig = { mode: 'simple' };
21const detailedConfig = { mode: 'détaillé' };
22
23const resultSimple = fetchData(simpleConfig); // { data: "Données simplifiées" }
24const resultDetailed = fetchData(detailedConfig); // { data: "Données complètes", details: [...] }

1type UserResponse<
2  T extends Config,
3  Authenticated extends boolean,
4> = Authenticated extends true
5  ? T['mode'] extends 'simple'
6    ? { data: string }
7    : { data: string; details: string[] }
8  : { error: 'Non authentifié' };
9
10function fetchUserData<T extends Config, Authenticated extends boolean>(
11  config: T,
12  isAuthenticated: Authenticated,
13): UserResponse<T, Authenticated> {
14  if (!isAuthenticated) {
15    return { error: 'Non authentifié' } as UserResponse<T, Authenticated>;
16  }
17  if (config.mode === 'simple') {
18    return { data: 'Données simplifiées' } as UserResponse<T, Authenticated>;
19  } else {
20    return {
21      data: 'Données complètes',
22      details: ['détail1', 'détail2'],
23    } as UserResponse<T, Authenticated>;
24  }
25}
26
27const resultAuthSimple = fetchUserData(simpleConfig, true); // { data: "Données simplifiées" }
28const resultAuthDetailed = fetchUserData(detailedConfig, true); // { data: "Données complètes", details: [...] }
29const resultNotAuth = fetchUserData(detailedConfig, false); // { error: "Non authentifié" }

1type ReturnTypeOfFunction<T> = T extends (...args: any[]) => infer R
2  ? R
3  : never;
4
5function getHello(): string {
6  return 'Hello, world!';
7}
8
9type HelloReturnType = ReturnTypeOfFunction<typeof getHello>; // Résultat : string