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); // 30
Propietats 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); // undefined
Implementació 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); // Enginyer
Exercicis 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); // Corolla
Exercici 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