Classes TypeScript

Définition et syntaxe

Les classes sont disponibles à partir de JavaScript ES6 et en TypeScript. Comme dans tous les langages objet, une classe est une empreinte servant à créer des objets, chaque objet contenant un mélange de données (propriétés) et de code (méthodes).

On déclare une classe avec le mot-clé class suivi du nom de la classe en PascalCase et d’une paire d’accolades { }.

class Person {
  name: string;

  constructor(theName: string) {
    this.name = theName;
  }

  sayMyName() {
    console.log('Mon nom est ' + this.name);
  }
}

Dans l’exemple, la classe Person possède 3 membres :

  • une propriété name ;
  • un constructeur, qui est une méthode spéciale exécutée à chaque fois qu’on crée une instance de la classe avec new Person() ;
  • une méthode sayMyName().

Tous ces membres sont facultatifs (le corps de la classe pourrait être vide). Il pourrait également y avoir plusieurs propriétés et plusieurs méthodes, mais en général il n’y a qu’un seul constructeur (ou aucun).

Les membres peuvent être déclarés dans n’importe quel ordre, mais la convention est de respecter l’ordre suivant : propriétés, constructeur, méthodes. On utilise la notation camelCase pour les noms de membre.

Dans les méthodes de classe, on doit accéder aux autres membres de la classe via le préfixe this, par exemple this.name ou this.sayMyName(). Ce préfixe est obligatoire pour accéder aux autres membres.

Organisation du code dans la classe

Dans le corps d’une classe de composant, la convention est de déclarer les membres dans l’ordre suivant :

  • Propriétés
  • Constructeur
  • Méthodes Angular (par ex ngOnInit())
  • Méthodes utilisateur

Visibilité des membres (public, private, protected)

Tous les membres d’une classe sont publiques par défaut, comme si le mot-clé public avait été utilisé explicitement.

Autrement dit, les deux syntaxes ci-dessous sont équivalentes :

class Person {
  sayMyName() {    // `public` implicite
    console.log('Salut Vince');
  }
}

class Person {
  public sayMyName() {
    console.log('Salut Vince');
  }
}

Comme dans la plupart des langages objet, on peut changer explicitement la visibilité des membres avec les mots-clé private et protected :

  • private : membre visible uniquement à l’intérieur de la classe, mais pas à l’extérieur.
  • protected : membre visible à l’intérieur de la classe et dans ses descendants, mais pas à l’extérieur.
export class MeteoComponent {
  private city;
  protected getTemperature() {}
}

Dans un composant Angular, les propriétés et les méthodes que vous utilisez dans le template doivent être public. Celles que vous n’utilisez QUE dans la classe peuvent être private ou protected.

Propriété-paramètre

La syntaxe propriété-paramètre permet de transformer un paramètre de constructeur en propriété de classe.

Voir Les propriétés-paramètres en TypeScript.