En aquest tema, explorarem dos conceptes fonamentals en TypeScript: els tipus d'unió i els tipus d'intersecció. Aquests tipus ens permeten crear tipus més flexibles i potents, que poden representar una combinació de múltiples tipus.
Tipus d'Unió
Els tipus d'unió permeten que una variable pugui tenir més d'un tipus. Això és útil quan una variable pot tenir valors de diferents tipus en diferents moments.
Sintaxi
La sintaxi per definir un tipus d'unió és utilitzar el símbol | entre els tipus.
let id: number | string; id = 101; // Correcte id = "ABC123"; // Correcte id = true; // Error: El tipus 'boolean' no es pot assignar al tipus 'number | string'
Exemple Pràctic
Suposem que estem desenvolupant una aplicació que pot acceptar tant números d'identificació com cadenes de text com a identificadors d'usuari.
function printId(id: number | string) {
if (typeof id === "number") {
console.log(`L'ID és un número: ${id}`);
} else {
console.log(`L'ID és una cadena: ${id}`);
}
}
printId(123); // L'ID és un número: 123
printId("ABC123"); // L'ID és una cadena: ABC123Tipus d'Intersecció
Els tipus d'intersecció permeten combinar múltiples tipus en un sol tipus. Una variable d'un tipus d'intersecció ha de complir amb tots els tipus combinats.
Sintaxi
La sintaxi per definir un tipus d'intersecció és utilitzar el símbol & entre els tipus.
interface Person {
name: string;
}
interface Employee {
employeeId: number;
}
type EmployeePerson = Person & Employee;
let emp: EmployeePerson = {
name: "John",
employeeId: 1234
};Exemple Pràctic
Suposem que volem definir un tipus que combini les propietats d'una persona i d'un empleat.
interface Person {
name: string;
age: number;
}
interface Employee {
employeeId: number;
department: string;
}
type EmployeePerson = Person & Employee;
let emp: EmployeePerson = {
name: "Alice",
age: 30,
employeeId: 5678,
department: "Engineering"
};
console.log(emp);Exercicis Pràctics
Exercici 1: Tipus d'Unió
Defineix una funció formatInput que accepti un paràmetre que pot ser un número o una cadena. La funció ha de retornar la cadena "Número: " seguida del número si el paràmetre és un número, o "Cadena: " seguida de la cadena si el paràmetre és una cadena.
function formatInput(input: number | string): string {
if (typeof input === "number") {
return `Número: ${input}`;
} else {
return `Cadena: ${input}`;
}
}
// Prova la funció
console.log(formatInput(42)); // Número: 42
console.log(formatInput("Hola")); // Cadena: HolaExercici 2: Tipus d'Intersecció
Defineix dues interfícies Car i Electric. La interfície Car ha de tenir les propietats make i model, i la interfície Electric ha de tenir la propietat batteryLife. Defineix un tipus ElectricCar que sigui una intersecció de Car i Electric. Crea un objecte de tipus ElectricCar.
interface Car {
make: string;
model: string;
}
interface Electric {
batteryLife: number;
}
type ElectricCar = Car & Electric;
let myElectricCar: ElectricCar = {
make: "Tesla",
model: "Model S",
batteryLife: 100
};
console.log(myElectricCar);Resum
En aquest tema, hem après sobre els tipus d'unió i intersecció en TypeScript. Els tipus d'unió ens permeten definir variables que poden tenir més d'un tipus, mentre que els tipus d'intersecció ens permeten combinar múltiples tipus en un sol tipus. Aquests conceptes són molt útils per crear tipus més flexibles i robustos en les nostres aplicacions.
En el proper tema, explorarem els tipus avançats, començant pels genèrics.
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