TypeScript pour les débutants, partie 4: Classes

Cette série de tutoriels vous amènera à apprendre étape par étape. La première partie introduit brièvement TypeScript et recommande certains IDE qui peuvent être utilisés pour écrire TypeScript. La deuxième partie se concentre sur les types de données et la troisième partie discute des bases de l'interface TypeScript.

Comme vous le savez probablement déjà, JavaScript prend désormais en charge les programmes de classe et d'objet nativement. Cependant, TypeScript a longtemps permis aux développeurs d'utiliser des classes dans leur code. Ce code est ensuite compilé en code JavaScript qui peut s'exécuter sur tous les principaux navigateurs. Dans ce didacticiel, vous découvrirez les classes dans TypeScript. Ils sont similaires à leurs homologues ES6, mais sont plus stricts.

Créez votre première classe

Commençons par les bases. Les classes sont la partie de base de la programmation orientée objet. Vous pouvez utiliser des classes pour représenter n'importe quelle entité avec certaines propriétés et fonctions qui peuvent agir sur une propriété donnée. TypeScript vous donne un contrôle total sur les propriétés et les fonctions accessibles à l'intérieur et à l'extérieur des classes qu'il contient. Voici un exemple de base de la façon de créer une classe.

Vous avez peut-être remarqué que le constructeur est similaire à get et name , ainsi qu'à get mais pas readonly . S'il n'est pas spécifié explicitement, le type de paramètre du secteur est déduit du type de retour du Getter. En commençant par TypeScript 4.3, vous pouvez avoir un secteur qui accepte différents types que le type renvoyé par Getter.

Implémentation de classes à l'aide d'interface

Dans notre tutoriel précédent sur l'interface TypeScript, nous avons appris que les interfaces sont essentiellement utilisées pour spécifier la structure de différents objets que nous utiliserons dans notre code. Maintenant, nous apprendrons à implémenter des classes en fonction de certaines interfaces précédemment déclarées.

 interface ipoint {
    x: numéro;
    y: numéro;
    position (x: numéro, y: numéro): vide
}

L'interface Irectangle étend Ipoint {
    Largeur: numéro;
    Longueur: numéro;
    zone (largeur: numéro, longueur: numéro): numéro
}

Le point de classe implémente ipoint {
    x: numéro;
    y: numéro;

    constructeur (x: numéro, y: numéro) {
        this.x = x;
        this.y = y;
    }

    position (): void {
        console.log (`le point est à ($ {this.x}, $ {this.y}).`);
    }
}

Classe Le rectangle implémente irectangle {
    Largeur: numéro;
    Longueur: numéro;
    x: numéro;
    y: numéro;

    constructeur (x: numéro, y: nombre, largeur: numéro, longueur: numéro) {
        this.x = x;
        this.y = y;
        this.width = largeur;
        this.length = longueur;
    }

    zone (): numéro {
        Renvoie ce.width * this.length;
    }

    position (): void {
        console.log (`Le rectangle est à ($ {this.x}, $ {this.y}).`);
    }
}

Laissez MyPoint = nouveau point (10, 20);

Laissez myrect = nouveau rectangle (0, 0, 20, 30);

myPoint.position ();

myrect.position ();

console.log (myrect.area ());

Nous avons créé une interface IRectangle , tout comme nous l'avons fait dans le tutoriel précédent. Un changement supplémentaire ici est que nous ajoutons également une déclaration de fonction à l'interface.

IRectangle , ce qui signifie qu'il aura ces quatre propriétés et deux méthodes pour produire sa position et afficher sa zone.

Résumer

Dans ce tutoriel, j'essaie de présenter les bases des classes dans TypeScript. Nous avons d'abord créé une classe Person très basique qui imprime le nom d'une personne dans la console. Après cela, vous apprenez le mot-clé private , qui peut être utilisé pour empêcher l'accès aux membres d'une classe à tout moment du programme.

Enfin, vous avez appris à étendre différentes classes dans votre code en utilisant des classes de base héritées. Vous pouvez en savoir plus sur les cours dans la documentation officielle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!