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

interface Persona {
    nom: string;
    edat: number;
}

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.

© Copyright 2024. Tots els drets reservats