Qu’est-ce que c’est ?

TypeScript est une surcouche du langage JavaScript de plus en plus utilisée, dont la version 2.0 a été publiée très récemment.
Nous allons voir dans cet article les possibilités offertes par ce nouveau langage, dans sa version 2.0.

Le typage

La base de TypeScript est d’apporter le typage au JavaScript. Cela permet d’avoir un code plus lisible, et une meilleure organisation. TypeScript supporte l’inférence de type, mais veillez à ne pas en abuser pour garder le code lisible.

Les types de base

TypeScript possède trois types de base :

  • boolean
  • string
  • number

On peut noter qu’il n’y a pas de différenciation entre int , float , double etc.

La syntaxe est la suivante :

pour les variables

JavaScript
1
2
let n: number;
let b: boolean = true;

pour les fonctions

JavaScript
1
2
3
function hello(name: string): string {
    return "Welcome, " + name;
}

Viennent ensuite les types spéciaux :

  • null
  • undefined
  • any
  • never

Les habitués du JavaScript noteront ici une différence majeure apportée par TypeScript. En effet, null et undefined sont maintenant des types à part entière. De plus, avec le flag --strictNullChecks , tous les types sont non-nullable par défaut. Ainsi, si une variable peut être null ou undefined, il faut faire une union de type, comme ceci:

JavaScript
1
2
let x: number | null;
let s: string | undefined;

On peut aussi utiliser les optionnels, dont nous parlerons plus tard.

Le type any est le “joker” qui permet à une variable de recevoir n’importe quel type. Ce type permet surtout de garder la compatibilité avec le JavaScript, mais va à l’encontre de la philosophie TypeScript qui apporte les types. Il est donc à utiliser avec parcimonie.

JavaScript
1
2
3
4
let a: any;
a = true; // Ok
a = "Hello world !"; // OK
a = 1; // OK

Le type never traduit les cas impossibles. Il est surtout utilisé comme type de retour des fonctions qui ne terminent jamais, comme les exemples suivants :

JavaScript
1
2
3
4
5
6
7
8
9
10
// This function has an unreachable end point
function infiniteLoop(): never {
   while (true) {
   }
}
    
// This function has an unreachable end point
function error(message: string): never {
    throw new Error(message);
}

Les fonctions ne se terminant jamais ont un type de retour établi par défaut à never.

JavaScript
1
2
3
4
5
// Inferred return type is never
function infiniteLoop() {
    while (true) {
    }
}

never est un sous-type de tous les types existants. Il est donc attribuable à tous les types, et est ignoré dans les unions.
Une fonction ayant un type de retour à never peut donc être appelée lorsqu’on attend un type de retour plus restrictif.

JavaScript
1
2
3
4
5
6
7
8
9
function myFunction(f: () => number) {
    let tmp = f();
    return tmp;
}
 
// Call as expected
myFunction(() => 42); // OK
// Call with a function returning never
myFunction(() => { throw new Error(); }); // OK

Les classes et les Interfaces

TypeScript apporte au JavaScript une programmation orientée objet classique. On peut donc créer des classes et des interfaces, de la manière suivante :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface MyInterface {
     hello(message: string): void;
}
class User implements MyInterface {
     private uniqueIdentifier: string;
     public nickname: string;
     protected realname: string;
     public constructor(identifier: string, nickname: string, realname: string) {
         this.uniqueIdentifier = identifier;
         this.nickname = nickname;
         this.realname= realname;
     }
     public hello(message: string): void {
         console.log(this.nickname + " says " + message);
     }
     public get identifier(): string {
         return this.uniqueIdentifier;
     }
     public set identifier(newIdentifier: string) {
         this.uniqueIdentifier= newIdentifier;
     }
}

Le mot-clé class permet de créer une classe, qui peut contenir des propriétés et des méthodes.
Le mot-clé interface permet de définir une interface, qui peut contenir une liste de méthodes. Les classes utilisant le mot-clé implements sur cette interface devront fournir une implémentation de ces méthodes.

Les mots-clés public, private, et protected définissent le niveau d’accessibilité des propriétés et des méthodes de la classe.

  • une propriété public est accessible de n’importe où.
  • une propriété private n’est accessible qu’à l’intérieur de la classe la contenant.
  • une propriété protected est accessible à partir de la classe la contenant, et de toutes les classes en héritant (cf ci-dessous).

Les mots-clés get et set permettent de définir des accesseurs. Ici, les accesseurs identifier pour permettre un accès à la propriété uniqueIdentifier qui n’est pas visible en dehors de la classe. Ainsi, grâce à l’accesseur get identifier (), on pourra connaître le nom de l’utilisateur sans pouvoir le changer. L’accesseur set identifier (newName: string) permet de changer la valeur de la propriété uniqueIdentifier . Vous pourriez vous demander à quoi bon mettre une propriété en private si c’est pour offrir la possibilité de la changer après coup. Et bien, il y a plusieurs raisons:

  • Vous n’êtes en aucun cas obligé de fournir les deux méthodes. Il se peut que nous ayons besoin uniquement d’un getter et non d’un setter, ou inversement.
  • Vous pouvez vouloir faire du traitement, comme par exemple:

JavaScript
1
2
3
4
public set identifier(newIdentifier: string) {
    let prefix: string = "my_prefix_";
    this.uniqueIdentifier = prefix + newIdentifier;
}

Les accesseurs s’utilisent de manière transparente, comme s’il s’agissait d’une propriété publique :

1
2
3
let user = new User('42', 'Universal Response', 'A simple number');
let id: string = user.identifier; // id has value '42'
let user.identifier = '21'; // uniqueIdentifier has now value 'my_prefix_21'

Une classe peut hériter d’une autre classe, en utilisant le mot-clé extends. Une classe fille possédera les attributs et les méthodes de la classe mère.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Vehicle {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    move(distance: number): void {
        console.log("Moving the vehicle");
    }
}
class Car extends Vehicle {
    constructor(name: string) {
        super(name);
    }
}

Ici, la classe Car hérite de la classe Vehicle. Elle a donc accès à la propriété name, et à la méthode move. Les classes ayant un constructeur et héritant d’une autre classe doivent appeler le constructeur de leur classe mère avec le mot-clé super. Ce mot-clé permet d’accéder à la classe mère de façon générale.
Une classe fille peut surcharger les méthodes de la classe mère, pour fournir sa propre implémentation.

JavaScript
1
2
3
4
5
6
7
8
class Car extends Vehicle {
    constructor(name: string) {
        super(name);
    }
    move(distance: number): void {
        console.log("Moving the car");
    }
}

Une classe peut contenir des propriétés ou méthodes abstraites. Celle-ci sont définies par le mot-clé abstract. Ces propriétés ou méthodes voient leur signature définies dans la classe, mais pas leur implémentation. Une classe contenant une ou plusieurs propriétés ou méthodes abstraites doit être elle-même abstraite.
Une classe héritant d’une classe abstraite doit implémenter toutes les propriétés et méthodes abstraites, ou les redéfinir en tant qu’abstraites, devenant alors elle-même abstraite.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
abstract class Vehicle {
    name: string;
    constructor(name: string) {
        this.name = name;
    }  
}
    
class Car extends Vehicle {
    constructor(name: string) {
        super(name);
    }
    move(distance: number): void {
        console.log("Moving the car");
    }
}
 
abstract class Bike extends Vehicle {
    constructor(name: string) {
        super(name);
    }
    abstract move(distance: number): void;
}

 

Les types génériques

Typescript supporte les types génériques. Une fonction utilisant un type générique est écrite de la manière suivante :

JavaScript
1
2
3
function myFunction<T>(arg: T): T {
    return arg;
}

La fonction ci-dessus accepte n’importe quel type pour le paramètre arg. Nous avons pourtant vu précédement que le type any servait déjà de “joker” permettant d’accueillir n’importe quel type. Ainsi, la fonction ci-dessus aurait pu être écrite de la manière suivante :

JavaScript
1
2
3
function myFunction(arg: any): any {
    return arg;
}

Là aussi, le paramètre arg peut recevoir n’importe quel type. Mais le type générique apporte plus. En effet, le compilateur possède l’information que la fonction prend un paramètre de type T, et renvoie une donnée du même type.
Si on donne un type string en entrée, la fonction retournera un type string, contrairement à la version utilisant le type any, qui pourrait recevoir un type string, effectuer des opérations et retourner un type number.

Pour appeler une fonction possédant un type générique, on s’y prend de la manière suivante :

JavaScript
1
let output = myFunction<string>("Hello World!"); // Type of output is string

Comme vous pouvez le voir, on précise explicitement le type utilisé entre chevrons. On peut aussi laisser le compilateur trouver tout seul quel type est utilisé à partir du type des arguments.

JavaScript
1
let output = myFunction("Hello again Wolrd!"); // Type of output is string

Cette méthode permet d’alléger le code et d’éviter de retaper des informations inutiles, ce qui permet une meilleure lisibilité. Cependant, il se peut que parfois le compilateur n’arrive pas à décoder tout seul le type utilisé, et que la première méthode soit nécessaire.

Nous ne détaillerons pas plus les types génériques ici, mais vous pouvez approfondir le sujet en allant sur le site de TypeScript.

La compilation

Pour compiler votre fichier .ts, téléchargez le compilateur en tapant la commande suivante :

Shell
1
npm install -g typescript

Ensuite, tapez la commande suivante :

Shell
1
tsc file.ts

Vous pouvez ensuite rajouter des options de compilation, comme ceci :

Shell
1
tsc file.ts --strictNullChecks

Vous aurez en sortie un fichier nommé file.js

NOTE: Pour effectuer de simples tests, vous pouvez utiliser le playground fourni pas TypeScript.

En conséquence directe du typage, TypeScript offre une vérification à la compilation. On a donc les vérifications basiques, telles que des appels à des fonctions avec des paramètres qui ne sont pas du type souhaité, mais aussi des éléments plus poussés.

Code inaccessible

TypeScript est capable de détecter les parties du code qui ne seront jamais accessibles.

JavaScript
1
2
3
4
function f(x: number): number {
    return 0;
    let y = x + 1; // Error: Unreachable code detected.
}

Retour de fonctions implicites

TypeScript détecte les chemins n’ayant aucun retour dans les fonctions. Par défaut, un undefined est retourné. Le flag --noImplicitReturn permet d’avoir une erreur à la compilation.

JavaScript
1
2
3
4
5
6
7
function f(x: number): number {
    if (x > 0) {
        return x;
    }
    // implicitly returns undefined
    // With flag: 'Error: Not all code paths return a value.'
}

Variables utilisées avant d’être assignées

Avec le flag --strictNullChecks , TypeScript envoie une erreur lorsqu’une variable est utilisée avant d’avoir été initialisée. L’assignation de la variable doit être faite dans tous les chemins possibles de la fonction.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
// Compiled with --strictNullChecks
let x: number;
let y: number | null;
let z: number | undefined;
x;  // Error, reference not preceded by assignment
y;  // Error, reference not preceded by assignment
z;  // Ok, it's undefined
x = 1;
y = null;
x;  // Ok
y;  // Ok

Détection des types

TypeScript est capable de spécifier le type d’une variable à un instant précis du code, en fonction des différents chemins possibles.

JavaScript
1
2
3
4
5
6
7
8
function f(x: string | number | boolean): void {
    if (typeof x === "boolean") {
        x; // type of x is boolean here
        x = "Hello world!";
        x; // type of x is string here
    }
    x; // type of x is number | string here
}

Cette fonctionnalité est particulèrement intéressante avec le flag --strictNullChecks , qui explicite les types null et undefined.

JavaScript
1
2
3
4
5
6
function myFunction(s: string | null): void {
    if (typeof s === "null") {
        return;
    }
    x; // type of x is string here
}

D’autres outils appréciables

Nous avons déjà vu beaucoup de fonctionnalités apportant de la clarté au code, et une sécurité en comparaison d’un code JavaScript. Mais certaines autres méritent d’être mentionnées.

L’import et l’export

Nous n’avons pas envie de recoder toutes les fonctionnalités de base à chaque projet. Pour éviter cela, TypeScript met en place le système de modules. Pour importer un module, il suffit d’utiliser le mot-clé import et de spécifier la source.

JavaScript
1
2
import { Car } from './car';
let car = new Car();

Notez qu’on ne spécifie pas l’extension du fichier dans le chemin suivant from.

Il est possible de renommer ce que l’on importe

JavaScript
1
2
import { WeirdName as Car } from './weird-name';
let car = new Car();

On peut aussi importer tout un module sous un seul et même nom, qui sera ensuite utilisé pour accéder à ce que contient le module.

JavaScript
1
2
import * as vehicle from './vehicle';
let car = new vehicle.Car();

Par défaut, les déclarations (classe, variables, fonctions etc.) ne sont pas visibles en dehors du module. Il faut ajouter le mot-clé export pour les rendre visibles.

JavaScript
1
2
3
4
5
6
7
8
9
export class Vehicle {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}
export helloWorld(): string {
    return "Hello world!";
}

Il existe des fichiers de déclarations (extention .d.ts) qui permettent de définir un type pour des bibliothèques existantes en JavaScript. Sans ces fichiers, il ne serait pas possible d’utiliser l’immense réserve de bibliothèques de JavaScript, ce qui serait très regrettable.

Pour installer un fichier de déclaration, tapez la commande suivante:

JavaScript
1
npm install --save @types/lodash

Généralement, le fichier de déclaration possède le même nom que la bibliothèque. Mais si ce n’est pas le cas, vous pouvez chercher le paquet correspondant à votre bibliothèque.

Une fois installé, vous pouvez l’importer

1
import * as lodash from "lodash";

Variables en lecture seulement

Il est possible de déclarer une variable comme constante. Une variable constante doit être initialisée à sa déclaration et ne pourra jamais être modifiée ensuite.

JavaScript
1
2
3
4
const s: string = "Hello Wolrd!";
s = "Goodbye world!"; // Error: Left-hand side of an assignment expression cannot be a constant
    
const notInitialized; // Error: const declarations must be initialized

TypeScript permet aussi de précéder la déclaration d’une propriété par le mot-clé readonly. Ces propriétés seront disponibles à la lecture, mais pas à l’écriture. Seule exception à cette règle : l’assignation d’une valeur à une variable en lecture seulement dans un constructeur.

JavaScript
1
2
3
4
5
6
7
class MyClass {
    readonly n: number = 1;
    readonly s: string;
    constructor() {
        this.s = "hello";  // Assignment permitted in constructor
    }
}

JavaScript
1
2
3
4
let array: ReadonlyArray<number> = [0, 1, 2, 3, 4];
array[5] = 5;      // Error, elements are read-only
array.push(5);     // Error, no push method (because it mutates array)
array.length = 3;  // Error, length is read-only

Attention: dans certains cas, TypeScript considère des éléments comme readonly, même s’ils ne le sont pas déclarés explicitement. Ainsi, une propriété déclarée avec une accesseur get mais pas d’accesseur set est implicitement readonly, de même que les membres d’une énumération.

Paramètres optionnels

TypeScript supporte les paramètres optionnels. Ceux-ci sont traduits en rajoutant le type undefined au type de base, s’il n’ est pas déjà présent.
Ainsi, les deux types ci-dessous sont strictement équivalents.

JavaScript
1
2
3
// Compiled with --strictNullChecks
type T1 = (x?: number) => void;              // x has type number | undefined
type T2 = (x?: number | undefined) => void;  // x has type number | undefined

Opérateur !

Situé après une expression, cet opérateur indique au compilateur que le résultat de l’expression est non-null. Parce que parfois, vous savez qu’un élément est non-null, mais le compilateur ne le sait pas.

JavaScript
1
2
3
4
5
6
7
8
9
10
// Compiled with --strictNullChecks
function validateElement(e?: Element) {
    // Throw exception if e is null or invalid element
}
 
function doSomethingOnElement(e?: Element) {
    validateElement(e);
    let s = e!.name;  // Assert that e is non-null and access name
    // Do stuff
}

Async / Await

TypeScript permet, avec l’option de compilation --targetES6, d’utiliser les mots-clés async et await.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function ping(): Promise<void> {
    for(let i = 0; i < 42; ++i) {
        await needTime(420);
        console.log('ping n°' + i);
    }
}
 
function needTime(ms: number): Promise<any> {
    return new Promise(resolve => setTimeout(resolve, ms))
}
    
(async function main(): Promise<void> {
    await ping();
    console.log('main over');
}());

Dans le code ci-dessus, la fonction needTime renvoie une promesse. Le retour est donc asynchrone. La fonction ping doit attendre le résultat de la fonction needTime, elle utilise donc le mot-clé await. Comme elle attend, elle doit être marquée comme asynchrone à l’aide du mot async. La fonction main attend le résultat da la fonction ping avec await, et doit donc elle aussi être marquée comme async.

Si vous testez ce code, les messages ‘ping n°X’ s’afficheront toutes les 420 millisecondes, puis ensuite le message ‘main over’.
En revanche, si vous supprimez les mots-clés async et await de la fonction main, le message ‘main over’ apparaîtra avant les autres messages, parce que la fonction main n’aura pas attendu la fonction ping.

NOTE: L’option de compilation --targetES6 génère du code qui n’est pas encore supporté par tous les navigateurs. Vérifiez la compatibilité avec vos navigateurs cibles avant de l’utiliser.

Conclusion

TypeScript est donc une surcouche du JavaScript, mais bien plus encore. C’est un langage orienté objet à part entière. On peut, par exemple, implémenter des design patterns propres à ce type de langage, comme le visiteur (cf annexes).

De gros projets se développent avec TypeScript, comme le framework Angular 2 développé par Google, ou encore Dojo 2.

Annexes

Voici une implémentation de design pattern visiteur en langage TypeScript :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
namespace VisitorPattern {
  
    export interface Shape {
        visited(visitor: ShapeVisitor): void;
    }
 
    export class Circle implements Shape {
        center: number[];
        radius: number;
 
        constructor(center: number[], radius: number) {
            this.center = center;
            this.radius = radius;
        }
 
        public visited(visitor: ShapeVisitor): void {
            console.log("Method 'visited' of Circle is being called");
            visitor.visitCircle(this);
        }
    }
 
    export class Square implements Shape {
        center: number[];
        sideSize: number;
 
        constructor(center: number[], sideSize: number) {
            this.center = center;
            this.sideSize = sideSize;
        }
 
        public visited(visitor: ShapeVisitor): void {
            console.log("Method 'visited' of Square is being called");
            visitor.visitSquare(this);
        }
    }
 
    export class Rectangle implements Shape {
        center: number[];
        height: number;
        width:number;
 
        constructor(center: number[], height: number, width: number) {
            this.center = center;
            this.height = height;
            this.width = width;
        }
 
        public visited(visitor: ShapeVisitor): void {
            console.log("Method 'visited' of Rectangle is being called");
            visitor.visitRectangle(this);
        }
    }
 
    export class Objs {
        private shapes: Shape[] = [];
 
        public addShape(shape: Shape): void {
            this.shapes.push(shape);
        }
 
        public removeShape(shape: Shape): void {
            var index = this.shapes.indexOf(shape);
            this.shapes.splice(index, 1);
        }
 
        public visitAll(visitor: ShapeVisitor): void {
            let max = this.shapes.length;
 
            for(let i = 0; i < max; i += 1) {
                this.shapes[i].visited(visitor);
            }
        }
    }
 
     export interface ShapeVisitor {
        visitCircle(circle: Circle): void;
        visitSquare(square: Square): void;
        visitRectangle(rectangle: Rectangle): void;
    }
 
    export class CircleVisitor implements ShapeVisitor {
        public visitCircle(circle: Circle): void {
            console.log("The circle center is: x=" + circle.center[0] + ", y=" + circle.center[1]);
            console.log("The circle radius is: " + circle.radius);
        }
        public visitSquare(square: Square): void {
            console.log("I'm a circle, not a square");
        }
 
        public visitRectangle(rectangle: Rectangle): void {
            console.log("I'm a circle, not a rectangle");
        }
    }
 
    export class SquareVisitor implements ShapeVisitor {
        public visitCircle(circle: Circle): void {
            console.log("I'm a square, not a circle");
        }
 
        public visitSquare(square: Square): void {
            console.log("The square center is: x=" + square.center[0] + ", y=" + square.center[1]);
            console.log("The square size is: " + square.sideSize + " x " + square.sideSize);
        }
 
        public visitRectangle(rectangle: Rectangle): void {
            console.log("I'm a square, much better than a simple rectangle !");
        }
    }
 
    export class RectangleVisitor implements ShapeVisitor {
        public visitCircle(circle: Circle): void {
            console.log("I'm a rectangle, not a circle");
        }
 
        public visitSquare(square: Square): void {
            console.log("I'm a rectangle, not a square.")
        }
 
        public visitRectangle(rectangle: Rectangle): void {
            console.log("The rectangle center is: x=" + rectangle.center[0] + ", y=" + rectangle.center[1]);
            console.log("The rectangle size is: " + rectangle.width + " x " + rectangle.height);
        }
    }
}
 
(function main() {
    let objs: VisitorPattern.Objs = new VisitorPattern.Objs();
 
    objs.addShape(<VisitorPattern.Shape> new VisitorPattern.Circle([0,0], 42));
    objs.addShape(<VisitorPattern.Shape> new VisitorPattern.Square([42,42], 42));
    objs.addShape(<VisitorPattern.Shape> new VisitorPattern.Rectangle([21,21], 21, 21));
 
    let circleVisitor: VisitorPattern.CircleVisitor = new VisitorPattern.CircleVisitor();
    let squareVisitor: VisitorPattern.SquareVisitor = new VisitorPattern.SquareVisitor();
    let rectangleVisitor: VisitorPattern.RectangleVisitor = new VisitorPattern.RectangleVisitor();
 
 
    objs.visitAll(circleVisitor);
    objs.visitAll(squareVisitor);
    objs.visitAll(rectangleVisitor);
}());