TypeScript - Classes: A Beginner's Guide

Bonjour là-bas, future superstar du codage ! ? Êtes-vous prêt à plonger dans le monde passionnant des classes TypeScript ? Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer de zéro et monter en compétence. D'ici la fin de ce tutoriel, vous serez capable de créer des classes comme un pro ! Alors, mettons-nous en route pour cette aventure ensemble.

Qu'est-ce que les Classes ?

Avant de rentrer dans les détails, comprenons ce qu'elles sont. Pensez à une classe comme un plan pour créer des objets. Comme les architectes utilisent des plans pour construire des maisons, nous utilisons des classes pour créer des objets dans notre code. Ces objets peuvent avoir des propriétés (comme la couleur d'une maison) et des méthodes (comme ouvrir une porte).

Création de Classes

Commençons par créer notre première classe. Nous allons créer une simple classe Car.

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep !");
}
}

Reprenons cela :

1. Nous commençons avec le mot-clé class suivi du nom de notre classe, Car.
2. À l'intérieur de la classe, nous définissons des propriétés : make, model, et year.
3. Le constructeur est une méthode spéciale qui est appelée lorsque nous créons un nouvel objet Car. Il configure les valeurs initiales pour nos propriétés.
4. Nous avons également une méthode honk qui, lorsqu'elle est appelée, affiche "Beep beep !" dans la console.

Création d'Objets d'Instance

Maintenant que nous avons notre classe Car, créons quelques objets de voiture réels !

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

Ici, nous avons créé deux objets Car : myCar et yourCar. Le mot-clé new indique à TypeScript de créer une nouvelle instance de notre classe Car.

Accès aux Attributs et Fonctions

Maintenant que nous avons nos objets de voiture, comment les utilisons-nous ? Voyons voir :

console.log(myCar.make);  // Affiche : Toyota
console.log(yourCar.year);  // Affiche : 2019

myCar.honk();  // Affiche : Beep beep !

Nous utilisons la notation pointée pour accéder aux propriétés et méthodes de nos objets. C'est comme dire : "Hé, myCar ! Quelle est ta marque ?" ou "Hé, myCar ! Donne-nous un coup de klaxon !"

Héritage de Classe

L'héritage est une fonctionnalité puissante qui nous permet de créer de nouvelles classes basées sur des classes existantes. Créons une classe SportsCar qui hérite de notre classe Car :

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`Racing at ${this.topSpeed} mph !`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // Affiche : Beep beep !
mySpeedster.race();  // Affiche : Racing at 210 mph !

Voici ce qui se passe :

1. Nous utilisons le mot-clé extends pour hériter de Car.
2. Nous ajoutons une nouvelle propriété topSpeed.
3. Dans le constructeur, nous appelons super() pour initialiser les propriétés de la classe parente.
4. Nous ajoutons une nouvelle méthode race spécifique à SportsCar.

Notre SportsCar a toutes les propriétés et méthodes de Car, plus ses propres ajouts !

Remplacement de Méthode

Parfois, nous voulons changer la manière dont une méthode de la classe parente fonctionne dans notre classe enfant. Cela s'appelle le remplacement de méthode. Remplaçons la méthode honk dans notre SportsCar :

class SportsCar extends Car {
// ... code précédent ...

honk() {
console.log("Vroom vroom !");
}
}

mySpeedster.honk();  // Affiche : Vroom vroom !

Maintenant, lorsque nous appelons honk() sur un SportsCar, il émet un son plus sportif !

Le Mot-clé static

Le mot-clé static nous permet de créer des propriétés et des méthodes qui appartiennent à la classe elle-même, et non pas aux instances de la classe. Ajoutons une méthode statique à notre classe Car :

class Car {
// ... code précédent ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // Affiche : 4

Nous pouvons appeler cette méthode sur la classe Car elle-même, sans créer une instance.

L'Opérateur instanceof

L'opérateur instanceof nous permet de vérifier si un objet est une instance d'une classe particulière :

console.log(myCar instanceof Car);  // Affiche : true
console.log(mySpeedster instanceof SportsCar);  // Affiche : true
console.log(mySpeedster instanceof Car);  // Affiche : true
console.log(myCar instanceof SportsCar);  // Affiche : false

Cela est utile lorsque vous avez besoin de vérifier avec quel type d'objet vous traitez.

Masquage des Données

En TypeScript, nous pouvons utiliser des modificateurs d'accès pour contrôler la visibilité des membres de la classe. Les trois modificateurs d'accès sont public, private, et protected :

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Fonds insuffisants !");
}
}

protected getBalance() {
return this.balance;
}
}

• private : Accessible uniquement à l'intérieur de la classe.
• public : Accessible depuis n'importe où (par défaut si non spécifié).
• protected : Accessible à l'intérieur de la classe et de ses sous-classes.

Classes et Interfaces

Les interfaces en TypeScript nous permettent de définir un contrat pour nos classes. Créons une interface pour notre classe Car :

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... implémentation ...
}

En implémentant une interface, nous nous assurons que notre classe suit une structure spécifique.

Résumé des Méthodes

Voici un résumé des méthodes que nous avons couvertes dans ce tutoriel :

Méthode	Description
constructor()	Initialise une nouvelle instance d'une classe
honk()	Fait klaxonner la voiture
race()	Simule une course (pour SportsCar)
static numberOfWheels()	Retourne le nombre de roues (pour la classe Car)
deposit()	Ajoute de l'argent à un compte bancaire
withdraw()	Retire de l'argent d'un compte bancaire
getBalance()	Retourne le solde actuel d'un compte bancaire

Et voilà ! Vous avez fait vos premiers pas dans le monde des classes TypeScript. Souvenez-vous, la pratique rend parfait, alors n'ayez pas peur d'expérimenter avec ces concepts. Créez vos propres classes, combinez différentes fonctionnalités, et surtout, amusez-vous à coder ! Qui sait, peut-être serez-vous celui qui enseignera cette classe la prochaine fois ! ?

Credits: Image by storyset