Els tipus condicionals en TypeScript són una característica avançada que permet definir tipus basats en una condició. Són similars a les expressions condicionals (ternàries) en JavaScript, però aplicades als tipus. Aquesta funcionalitat és molt poderosa i permet crear tipus més flexibles i reutilitzables.
Conceptes Clau
-
Sintaxi Bàsica:
T extends U ? X : YT extends U: Aquesta és la condició. SiTés assignable aU, el tipus resultant seràX.X: El tipus resultant si la condició és certa.Y: El tipus resultant si la condició és falsa.
-
Assignabilitat:
- La condició
T extends Ucomprova siTés assignable aU. Això significa queTha de tenir totes les propietats deU.
- La condició
Exemples Pràctics
Exemple 1: Tipus Bàsic Condicional
type IsString<T> = T extends string ? "Yes" : "No"; type A = IsString<string>; // "Yes" type B = IsString<number>; // "No"
Exemple 2: Filtratge de Tipus
type Filter<T, U> = T extends U ? T : never; type Numbers = Filter<number | string | boolean, number>; // number type Strings = Filter<number | string | boolean, string>; // string
Exemple 3: Tipus de Retorn Condicional
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type Func = () => string; type FuncReturnType = ReturnType<Func>; // string
Exemple 4: Excloure Tipus
type Exclude<T, U> = T extends U ? never : T; type NonString = Exclude<string | number | boolean, string>; // number | boolean
Exercicis Pràctics
Exercici 1: Crear un Tipus Condicional
Defineix un tipus condicional IsBoolean<T> que retorni "True" si T és un boolean i "False" en cas contrari.
type IsBoolean<T> = T extends boolean ? "True" : "False"; // Proves type Test1 = IsBoolean<boolean>; // "True" type Test2 = IsBoolean<string>; // "False"
Exercici 2: Filtrar Tipus
Defineix un tipus ExtractString<T> que extregui només els tipus string de T.
type ExtractString<T> = T extends string ? T : never; // Proves type Test3 = ExtractString<string | number | boolean>; // string type Test4 = ExtractString<number | boolean>; // never
Exercici 3: Tipus de Retorn
Defineix un tipus FunctionReturnType<T> que extregui el tipus de retorn d'una funció T.
type FunctionReturnType<T> = T extends (...args: any[]) => infer R ? R : any; // Proves type Test5 = FunctionReturnType<() => number>; // number type Test6 = FunctionReturnType<(x: string) => void>; // void
Errors Comuns i Consells
-
Confusió amb
extends:- Recorda que
extendsen aquest context no significa herència, sinó assignabilitat. És una verificació de si un tipus és assignable a un altre.
- Recorda que
-
Tipus Complexos:
- Quan treballis amb tipus condicionals complexos, pot ser útil desglossar-los en tipus més petits i manejables per facilitar la comprensió i el manteniment.
-
Inferència de Tipus:
- Utilitza
inferper extreure tipus dins de tipus condicionals. Això pot simplificar molt les definicions de tipus.
- Utilitza
Conclusió
Els tipus condicionals són una eina poderosa en TypeScript que permet crear tipus dinàmics i flexibles basats en condicions. Amb la pràctica, podràs utilitzar-los per escriure codi més robust i reutilitzable. En el proper mòdul, explorarem com treballar amb funcions i mòduls en TypeScript, aprofundint en la definició de tipus de funció i l'ús de mòduls per organitzar el codi.
Curs de TypeScript
Mòdul 1: Introducció a TypeScript
- Què és TypeScript?
- Configuració de l'entorn de TypeScript
- Tipus bàsics
- Anotacions de tipus
- Compilació de TypeScript
Mòdul 2: Treballant amb Tipus
Mòdul 3: Tipus Avançats
Mòdul 4: Funcions i Mòduls
- Tipus de Funció
- Paràmetres Opcional i per Defecte
- Paràmetres Rest
- Mòduls i Espais de Noms
- Decoradors
Mòdul 5: Programació Asíncrona
Mòdul 6: Eines i Millors Pràctiques
- Linting i Formatació
- Proves de Codi TypeScript
- TypeScript amb Webpack
- TypeScript amb React
- Millors Pràctiques