TypeScript, introduction aux classes

TypeScript, introduction aux classes

Introduction

Pourquoi est-ce important d’avoir des classes en JavaScript?

  • Les classes offrent une structure abstraite.
  • Fournir une méthodologie cohérente pour les développeurs d’utiliser des classes à la place des formats des frameworks (emberjs, reactjs, etc..)
  • Les développeurs orienté objets comprennent facilement le fonctionnement des classes

Observons le fonctionnement de class avec l’exemple classique du Point:


class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}

Cette classe va générer le code suivant en ES5 :


var Point = (function () {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    Point.prototype.add = function (point) {
        return new Point(this.x + point.x, this.y + point.y);
    };
    return Point;
})();

C’était une façon classique de faire des classes en ES5, pas très pratique avec tous les prototypes.

Héritage

Les classes en TypeScript (comme dans les autres langages) permettent l’héritage en utilisant le mot-clef extends.


class Point3D extends Point {
    z: number;
    constructor(x: number, y: number, z: number) {
        super(x, y);
        this.z = z;
    }
    add(point: Point3D) {
        var point2D = super.add(point);
        return new Point3D(point2D.x, point2D.y, this.z + point.z);
    }
}

Si vous avez un constructeur dans votre classe et que vous devez appeler le constructeur parent dans votre constructeur actuel. Assurez-vous d’utiliser le mot clef super.

Il est assez facile d’utiliser le mot clef super pour surcharger une méthode. Dans notre exemple, j’ai surchargé la méthode add() en utilisant super.add() dans cette même méthode.

 

Statique

Les classes TypeScript peuvent avoir des propriétés statiques qui sont partagées entre toutes les instances de la classe. Souvent nous les définissons dans la classe elle-même comme dans l’exemple suivant :


class Something {
    static instances = 0;
    constructor() {
        Something.instances++;
    }
}

var s1 = new Something();
var s2 = new Something();
console.log(Something.instances); // 2

Il est possible d’avoir des propriétés statiques comme des fonctions statiques.

Public, protected, private

Comme dans tous les langages objets, nous retrouvons en TypeScript des accesseurs qui déterminent l’accessibilité des propriétés d’une classe.

Si un accesseur n’est pas spécifié, alors public est défini par défaut. Vous pourrez trouver un exemple d’utilisation des différents accesseurs ci-dessous :


class FooBase {
    public x: number;
    private y: number;
    protected z: number;
}

// EFFECT ON INSTANCES
var foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected

// EFFECT ON CHILD CLASSES
class FooChild extends FooBase {
    constructor() {
      super();
        this.x; // okay
        this.y; // ERROR: private
        this.z; // okay
    }
}

Le constructeur non obligatoire

Une classe en TypeScript n’a pas forcement besoin d’avoir un constructeur :


class Foo {}
var foo = new Foo();

Définir quand même un constructeur

Pour définir une propriété d'une classe, il est quand même préférable de passer par un constructeur comme suit :

class Foo {
    x: number;
    constructor(x:number) {
        this.x = x;
    }
}</code>

Il est possible de déclarer directement dans les paramètres du constructeur :


class Foo {
    constructor(public x:number) {
    }
}

 

Et voilà, on a fait à peu près le tour du sujet. Les classes en TypeScript constituent vraiment une petite révolution pour structurer un peu mieux son code JavaScript, autrement qu'avec les prototypes.

En espérant que vous avez appris des choses, à la semaine prochaine.

Partagez, si vous aimez

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *