Introducció

En aquest tema, aprendrem sobre les classes i les interfícies en TypeScript, dos conceptes fonamentals per a la programació orientada a objectes (OOP). Les classes ens permeten crear objectes amb propietats i mètodes, mentre que les interfícies defineixen contractes que les classes poden implementar.

Classes en TypeScript

Definició de Classes

Una classe és una plantilla per crear objectes. Una classe pot tenir propietats (variables) i mètodes (funcions).

class Persona {
    nom: string;
    edat: number;

    constructor(nom: string, edat: number) {
        this.nom = nom;
        this.edat = edat;
    }

    saludar() {
        console.log(`Hola, em dic ${this.nom} i tinc ${this.edat} anys.`);
    }
}

const persona1 = new Persona('Joan', 30);
persona1.saludar(); // Hola, em dic Joan i tinc 30 anys.

Explicació del Codi

Definició de la Classe: class Persona defineix una nova classe anomenada Persona.
Propietats: nom i edat són propietats de la classe.
Constructor: constructor(nom: string, edat: number) és una funció especial que s'executa quan es crea una nova instància de la classe.
Mètode: saludar() és un mètode que imprimeix un missatge de salutació.

Modificadors d'Accés

Els modificadors d'accés controlen la visibilitat de les propietats i mètodes d'una classe.

public: Accessible des de qualsevol lloc.
private: Accessible només dins de la classe.
protected: Accessible dins de la classe i les subclasses.

class Animal {
    public nom: string;
    private edat: number;

    constructor(nom: string, edat: number) {
        this.nom = nom;
        this.edat = edat;
    }

    public ferSoroll() {
        console.log(`${this.nom} fa un soroll.`);
    }

    private envellir() {
        this.edat++;
    }
}

const animal1 = new Animal('Gos', 5);
animal1.ferSoroll(); // Gos fa un soroll.
// animal1.envellir(); // Error: envellir és privat.

Interfícies en TypeScript

Definició d'Interfícies

Una interfície defineix un contracte que les classes poden implementar. Les interfícies no tenen implementacions de mètodes, només definicions.

interface Volador {
    volar(): void;
}

class Ocell implements Volador {
    volar() {
        console.log('L\'ocell està volant.');
    }
}

const ocell1 = new Ocell();
ocell1.volar(); // L'ocell està volant.

Explicació del Codi

Definició de la Interfície: interface Volador defineix una interfície amb un mètode volar.
Implementació de la Interfície: class Ocell implements Volador indica que la classe Ocell implementa la interfície Volador.
Mètode: volar() és el mètode definit a la interfície i implementat a la classe.

Propietats en Interfícies

Les interfícies també poden definir propietats.

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

const persona2: Persona = {
    nom: 'Anna',
    edat: 25
};

console.log(persona2.nom); // Anna

Exercicis Pràctics

Exercici 1: Crear una Classe

Crea una classe Cotxe amb les propietats marca i model, i un mètode detalls que imprimeixi la marca i el model del cotxe.

class Cotxe {
    marca: string;
    model: string;

    constructor(marca: string, model: string) {
        this.marca = marca;
        this.model = model;
    }

    detalls() {
        console.log(`Cotxe: ${this.marca} ${this.model}`);
    }
}

const cotxe1 = new Cotxe('Toyota', 'Corolla');
cotxe1.detalls(); // Cotxe: Toyota Corolla

Exercici 2: Crear una Interfície

Crea una interfície Empleat amb les propietats nom i salari, i un mètode treballar. Implementa aquesta interfície en una classe Treballador.

interface Empleat {
    nom: string;
    salari: number;
    treballar(): void;
}

class Treballador implements Empleat {
    nom: string;
    salari: number;

    constructor(nom: string, salari: number) {
        this.nom = nom;
        this.salari = salari;
    }

    treballar() {
        console.log(`${this.nom} està treballant.`);
    }
}

const treballador1 = new Treballador('Maria', 3000);
treballador1.treballar(); // Maria està treballant.

Resum

En aquest tema, hem après sobre les classes i les interfícies en TypeScript. Les classes ens permeten crear objectes amb propietats i mètodes, mentre que les interfícies defineixen contractes que les classes poden implementar. Hem vist com utilitzar modificadors d'accés per controlar la visibilitat de les propietats i mètodes, i hem practicat amb exercicis per reforçar els conceptes apresos.

Classes i interfícies

Introducció

Classes en TypeScript

Definició de Classes

Explicació del Codi

Modificadors d'Accés

Interfícies en TypeScript

Definició d'Interfícies

Explicació del Codi

Propietats en Interfícies

Exercicis Pràctics

Exercici 1: Crear una Classe

Exercici 2: Crear una Interfície

Resum

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques