Introducció
Les interfícies en TypeScript són una manera poderosa de definir la forma d'un objecte. Ens permeten descriure quines propietats i mètodes ha de tenir un objecte, proporcionant una estructura clara i robusta per al nostre codi.
Conceptes Clau
- Definició d'Interfícies: Les interfícies defineixen la forma d'un objecte, especificant les propietats i els seus tipus.
- Implementació d'Interfícies: Les classes poden implementar interfícies per assegurar-se que compleixen amb la forma definida.
- Interfícies Extensibles: Les interfícies poden estendre altres interfícies, permetent la reutilització i l'extensió de definicions.
Definició d'Interfícies
Sintaxi Bàsica
En aquest exemple, l'interfície Persona defineix que un objecte de tipus Persona ha de tenir dues propietats: nom (de tipus string) i edat (de tipus number).
Exemple Pràctic
interface Persona {
nom: string;
edat: number;
}
const joan: Persona = {
nom: "Joan",
edat: 30
};
console.log(joan.nom); // Joan
console.log(joan.edat); // 30Propietats Opcional
Les propietats d'una interfície poden ser opcionals utilitzant el símbol ?.
interface Persona {
nom: string;
edat?: number; // Propietat opcional
}
const maria: Persona = {
nom: "Maria"
};
console.log(maria.nom); // Maria
console.log(maria.edat); // undefinedImplementació d'Interfícies
Les classes poden implementar interfícies per assegurar-se que compleixen amb la forma definida per l'interfície.
Exemple Pràctic
interface Persona {
nom: string;
edat: number;
saludar(): void;
}
class Alumne implements Persona {
nom: string;
edat: number;
constructor(nom: string, edat: number) {
this.nom = nom;
this.edat = edat;
}
saludar(): void {
console.log(`Hola, em dic ${this.nom} i tinc ${this.edat} anys.`);
}
}
const alumne1 = new Alumne("Anna", 22);
alumne1.saludar(); // Hola, em dic Anna i tinc 22 anys.Interfícies Extensibles
Les interfícies poden estendre altres interfícies, permetent la reutilització i l'extensió de definicions.
Exemple Pràctic
interface Persona {
nom: string;
edat: number;
}
interface Treballador extends Persona {
feina: string;
}
const treballador1: Treballador = {
nom: "Pere",
edat: 45,
feina: "Enginyer"
};
console.log(treballador1.nom); // Pere
console.log(treballador1.edat); // 45
console.log(treballador1.feina); // EnginyerExercicis Pràctics
Exercici 1
Defineix una interfície Vehicle amb les propietats marca (string) i model (string). Crea un objecte que implementi aquesta interfície.
Solució
interface Vehicle {
marca: string;
model: string;
}
const cotxe: Vehicle = {
marca: "Toyota",
model: "Corolla"
};
console.log(cotxe.marca); // Toyota
console.log(cotxe.model); // CorollaExercici 2
Defineix una interfície Animal amb les propietats nom (string) i edat (number). Crea una classe Gos que implementi aquesta interfície i afegeix un mètode lladrar que imprimeixi un missatge a la consola.
Solució
interface Animal {
nom: string;
edat: number;
}
class Gos implements Animal {
nom: string;
edat: number;
constructor(nom: string, edat: number) {
this.nom = nom;
this.edat = edat;
}
lladrar(): void {
console.log(`${this.nom} està lladrant!`);
}
}
const gos1 = new Gos("Rex", 3);
gos1.lladrar(); // Rex està lladrant!Resum
En aquesta secció, hem après què són les interfícies en TypeScript i com ens ajuden a definir la forma d'un objecte. Hem vist com definir interfícies, com implementar-les en classes i com estendre-les per crear definicions més complexes. També hem practicat amb alguns exercicis per reforçar els conceptes apresos. En el següent tema, explorarem les classes en TypeScript.
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
