Els tipus mapats (Mapped Types) són una característica avançada de TypeScript que permet crear nous tipus basats en la transformació d'altres tipus. Aquesta funcionalitat és especialment útil per a la creació de tipus derivats de manera dinàmica, mantenint la consistència i la seguretat de tipus.
Conceptes Clau
- Tipus Mapats Bàsics: Permeten transformar les propietats d'un tipus existent.
- Modificadors de Propietats: Poden afegir o eliminar modificadors com
readonlyo?(opcional). - Tipus Predefinits: TypeScript proporciona alguns tipus mapats predefinits com
Partial,Readonly,Pick, iRecord.
Tipus Mapats Bàsics
Els tipus mapats es defineixen utilitzant la sintaxi de tipus indexats, on es recorre cada propietat d'un tipus existent i es transforma segons sigui necessari.
Exemple Bàsic
type Person = {
name: string;
age: number;
address: string;
};
type ReadonlyPerson = {
readonly [K in keyof Person]: Person[K];
};En aquest exemple, ReadonlyPerson és un tipus mapat que fa que totes les propietats de Person siguin de només lectura (readonly).
Explicació del Codi
keyof Person: Obté una unió de les claus del tipusPerson("name" | "age" | "address").[K in keyof Person]: Itera sobre cada clau dePerson.Person[K]: Obté el tipus de la propietat corresponent enPerson.
Modificadors de Propietats
Els tipus mapats poden utilitzar modificadors per canviar les propietats de les claus.
Exemple amb Modificadors
type OptionalPerson = {
[K in keyof Person]?: Person[K];
};
type ReadonlyOptionalPerson = {
readonly [K in keyof Person]?: Person[K];
};?: Fa que les propietats siguin opcionals.readonly: Fa que les propietats siguin de només lectura.
Tipus Predefinits
TypeScript proporciona alguns tipus mapats predefinits que són molt útils.
Partial
Fa que totes les propietats d'un tipus siguin opcionals.
Readonly
Fa que totes les propietats d'un tipus siguin de només lectura.
Pick
Selecciona un subconjunt de propietats d'un tipus.
Record
Crea un tipus amb un conjunt de claus i un tipus de valor comú.
Exercicis Pràctics
Exercici 1
Crea un tipus mapat que faci que totes les propietats d'un tipus siguin opcionals i de només lectura.
type Person = {
name: string;
age: number;
address: string;
};
type ReadonlyOptional<T> = {
readonly [K in keyof T]?: T[K];
};
type ReadonlyOptionalPerson = ReadonlyOptional<Person>;Exercici 2
Utilitza el tipus Pick per crear un nou tipus que només contingui les propietats name i address de Person.
Solucions
Solució Exercici 1
type Person = {
name: string;
age: number;
address: string;
};
type ReadonlyOptional<T> = {
readonly [K in keyof T]?: T[K];
};
type ReadonlyOptionalPerson = ReadonlyOptional<Person>;
// Exemple d'ús
const person: ReadonlyOptionalPerson = {
name: "John",
// age i address són opcionals i de només lectura
};Solució Exercici 2
type NameAndAddress = Pick<Person, "name" | "address">;
// Exemple d'ús
const person: NameAndAddress = {
name: "John",
address: "123 Main St",
// age no està permès
};Conclusió
Els tipus mapats són una eina poderosa en TypeScript per crear tipus derivats de manera dinàmica i segura. Amb ells, pots transformar i modificar tipus existents per adaptar-los a les necessitats específiques del teu projecte, mantenint la seguretat de tipus i la consistència del 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