En aquest tema, explorarem els tipus avançats de TypeScript, que et permetran escriure codi més flexible, robust i mantenible. Aquests tipus són especialment útils quan treballes en projectes complexos o quan necessites definir estructures de dades més sofisticades.
- Tipus Unió i Intersecció
Tipus Unió
Els tipus unió permeten que una variable pugui tenir més d'un tipus. Això és útil quan una variable pot tenir valors de diferents tipus.
let id: number | string; id = 101; // Correcte id = "202"; // Correcte // id = true; // Error: 'boolean' no és assignable a 'number | string'
Tipus Intersecció
Els tipus intersecció combinen múltiples tipus en un sol tipus. Això és útil quan vols combinar les propietats de diversos tipus.
interface Person {
name: string;
}
interface Employee {
employeeId: number;
}
type EmployeePerson = Person & Employee;
const emp: EmployeePerson = {
name: "John",
employeeId: 1234
};
- Tipus Condicionals
Els tipus condicionals permeten definir tipus basats en una condició. Són similars a les expressions condicionals en JavaScript.
type IsString<T> = T extends string ? "Yes" : "No"; type Test1 = IsString<string>; // "Yes" type Test2 = IsString<number>; // "No"
- Tipus Mapejats
Els tipus mapejats permeten crear nous tipus transformant les propietats d'un tipus existent.
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
interface User {
name: string;
age: number;
}
const user: Readonly<User> = {
name: "Alice",
age: 30
};
// user.age = 31; // Error: no es pot assignar a 'age' perquè és una propietat de només lectura.
- Tipus Indexats
Els tipus indexats permeten accedir a les propietats d'un tipus utilitzant una sintaxi d'índex.
interface Car {
make: string;
model: string;
year: number;
}
type CarKeys = keyof Car; // "make" | "model" | "year"
type CarMake = Car["make"]; // string
- Tipus de Plantilla de Lletres
Els tipus de plantilla de lletres permeten crear tipus basats en cadenes literals.
type EventName = "click" | "mouseover" | "keydown";
function handleEvent(event: EventName) {
console.log(`Handling ${event} event`);
}
handleEvent("click"); // Correcte
// handleEvent("submit"); // Error: 'submit' no és assignable a 'EventName'Exercicis Pràctics
Exercici 1: Tipus Unió i Intersecció
Defineix un tipus unió per a una variable que pugui ser un número o una cadena. Després, crea un tipus intersecció que combini les propietats de dos tipus d'interfície.
Exercici 2: Tipus Condicionals
Crea un tipus condicional que determini si un tipus és un array o no.
Exercici 3: Tipus Mapejats
Defineix un tipus mapejat que faci que totes les propietats d'un tipus d'interfície siguin opcionals.
Solucions
Solució Exercici 1
type NumberOrString = number | string;
interface A {
propA: string;
}
interface B {
propB: number;
}
type AandB = A & B;
const example: AandB = {
propA: "Hello",
propB: 42
};Solució Exercici 2
type IsArray<T> = T extends any[] ? "Array" : "Not Array"; type TestArray1 = IsArray<number[]>; // "Array" type TestArray2 = IsArray<string>; // "Not Array"
Solució Exercici 3
type Partial<T> = {
[P in keyof T]?: T[P];
};
interface Product {
id: number;
name: string;
}
type OptionalProduct = Partial<Product>;
const product: OptionalProduct = {
id: 1
};Conclusió
Els tipus avançats de TypeScript et permeten escriure codi més flexible i robust, adaptant-se a les necessitats específiques del teu projecte. A mesura que et familiaritzis amb aquests conceptes, podràs aprofitar al màxim les capacitats de TypeScript per crear aplicacions més segures i mantenibles. En el següent tema, explorarem els decoradors de TypeScript, una altra eina poderosa per millorar el teu codi.
Dramaturg amb TypeScript: De Principiant a Avançat
Mòdul 1: Introducció a Playwright i TypeScript
- Què és Playwright?
- Configuració del Teu Entorn de Desenvolupament
- Introducció a TypeScript
- Sintaxi Bàsica de TypeScript
Mòdul 2: Començant amb Playwright
- Instal·lant Playwright
- Creant el Teu Primer Script de Playwright
- Comprenent els Conceptes Bàsics de Playwright
- Executant Proves de Playwright
Mòdul 3: Fonaments de Playwright i TypeScript
- Escrivint Proves en TypeScript
- Utilitzant Interfícies i Tipus de TypeScript
- Depurant Proves de Playwright
- Gestionant Codi Asíncron
Mòdul 4: Funcions Avançades de Playwright
- Treballant amb Selectors
- Gestionant Múltiples Pàgines i Frames
- Intercepció de Xarxa i Simulació
- Emulant Dispositius i Geolocalització
Mòdul 5: Estratègies d'Automatització de Proves
- Organitzant Proves i Suites de Proves
- Utilitzant Fixtures i Hooks
- Execució Paral·lela de Proves
- Integració Contínua amb Playwright
Mòdul 6: Tècniques Avançades de TypeScript
- Generics en TypeScript
- Tipus Avançats de TypeScript
- Decoradors de TypeScript
- Millors Pràctiques de TypeScript i Playwright
Mòdul 7: Aplicacions Reals de Playwright
- Proves de Cap a Cap amb Playwright
- Proves Visuals amb Playwright
- Proves de Rendiment amb Playwright
- Estudi de Cas: Implementant Playwright en un Projecte