Angular

Appearance

Les interfaces ​

Les interfaces en TypeScript sont un moyen puissant de définir des contrats au sein de votre code ainsi que de définir des formes personnalisées pour des types de données complexes. Elles permettent de définir la structure spécifique qu'un objet doit suivre, ce qui est particulièrement utile pour la cohérence dans les gros projets et la collaboration au sein des équipes.

Définition d'une Interface ​

Une interface est définie en utilisant le mot-clé interface. Elle peut inclure des propriétés et des méthodes, avec ou sans une implémentation concrète.

typescript
interface Personne {
    nom: string;
    age: number;
    sePresenter(): void;
}
interface Personne {
    nom: string;
    age: number;
    sePresenter(): void;
}

Dans cet exemple, l'interface Personne définit deux propriétés (nom et age) et une méthode (sePresenter).

Implémentation d'une Interface ​

Une classe peut implémenter une interface pour garantir qu'elle respecte la structure définie par cette interface.

typescript
class Employe implements Personne {
    nom: string;
    age: number;

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

    sePresenter() {
        console.log(`Bonjour, je m'appelle ${this.nom} et j'ai ${this.age} ans.`);
    }
}
class Employe implements Personne {
    nom: string;
    age: number;

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

    sePresenter() {
        console.log(`Bonjour, je m'appelle ${this.nom} et j'ai ${this.age} ans.`);
    }
}

Dans cet exemple, la classe Employe implémente l'interface Personne et doit donc définir les propriétés nom et age ainsi que la méthode sePresenter.

Interfaces pour les Objets ​

Les interfaces sont souvent utilisées pour définir la forme des objets, assurant ainsi que les objets disposent des propriétés et méthodes attendues.

typescript
function afficherPersonne(personne: Personne) {
    console.log(`${personne.nom} a ${personne.age} ans.`);
}

let alice = {nom: "Alice", age: 30, sePresenter: () => {}};
afficherPersonne(alice);
function afficherPersonne(personne: Personne) {
    console.log(`${personne.nom} a ${personne.age} ans.`);
}

let alice = {nom: "Alice", age: 30, sePresenter: () => {}};
afficherPersonne(alice);

Interfaces avec Propriétés Optionnelles ​

Les interfaces peuvent également définir des propriétés optionnelles, marquées avec un signe ?.

typescript
interface Config {
    couleur?: string;
    largeur?: number;
}

function configurer(config: Config) {
    // ...
}
interface Config {
    couleur?: string;
    largeur?: number;
}

function configurer(config: Config) {
    // ...
}

Dans cet exemple, les propriétés couleur et largeur de l'interface Config sont optionnelles.

Interfaces pour l'Indexation ​

Les interfaces peuvent être utilisées pour définir des types d'objets avec des signatures d'index, ce qui est utile pour les objets agissant comme des dictionnaires ou des cartes.

typescript
interface MapStringToString {
    [cle: string]: string;
}

let dictionnaire: MapStringToString = {"bonjour": "hello", "monde": "world"};
interface MapStringToString {
    [cle: string]: string;
}

let dictionnaire: MapStringToString = {"bonjour": "hello", "monde": "world"};

Interfaces Extensibles et Héritage ​

Les interfaces peuvent étendre d'autres interfaces, permettant ainsi la réutilisation et l'extension des définitions.

typescript
interface Employe extends Personne {
    poste: string;
}
interface Employe extends Personne {
    poste: string;
}