Introduction au langage TypeScript
Introduction au langage TypeScript
Prérequis :
- Connaissance des principes de bases de la programmation orientée objet
- Connaissance des principes de bases de Javascript
- Compilateur TypeScript installé
(0.1)
Sommaire :
- Introduction
- Typage
- Classe
- Fonction anonyme fléchée
- Modularité
- Conclusion
(0.2)
1. Introduction
Cet article est une présentation succincte des principaux apports de TypeScript que sont le typage, les classes, les fonctions anonymes "fléchées" et la modularité.
Il convient également de rappeler que le langage TypeScript est avant tout du Javascript amélioré ce qui permet la réutilisation de ses connaissances en Javascript. Il faut néanmoins avoir conscience que les limitations intrinsèques de Javascript reflètent également dans TypeScript. Par exemple, la notion de d'attributs privés d'une classe qui existe dans la plupart des langages orientés objets, bien que syntaxiquement présente dans TypeScript, n'est pas restrictive mais uniquement indicative dans la mesure où un attribut privé pourra malgré tout être utilisé en dehors de sa classe.
La spécification complète du langage TypeScript est disponible sur le site officiel.
2. Typage
Le principal apport du langage TypeScript, celui qui justifie le nom même du langage, est la possibilité d'associer, facultativement, un type à une donnée.
Code:
1
2
3
4
| var pi: number;
var message: string;
var flag: boolean;
var joker: any; |
(2.1)
Dans l'exemple ci-dessus, quatre variables sont déclarées sans être initialisées à l'aide d'un type dont la signification est explicite.
- La variable pi a pour type number, un nombre entier ou flottant.
- La variable message a pour type string, une chaine de caractères.
- La variable flag a pour type boolean, un booléen qui peut prendre la valeur true ou false.
- La variable joker a pour type any, qui est le type par défaut qu'attribut TypeScript à une variable s'il ne parvient pas à déterminer son type lors de sa déclaration.
(2.2)
Bien entendu, il est possible d'initialiser une variable au moment de sa déclaration comme on peut le voir ci-dessous.
Code:
1
2
3
4
| var pi: number = 3.14;
var message: string = "Bonjour !";
var flag: boolean = true;
var joker: any = null; |
(2.3)
Bien que la mention explicite du type soit recommandée, en l'absence de celui-ci lors de la première initialisation d'une variable, TypeScript en infère automatiquement le type.
A noter que TypeScript, contrairement à Javascript, peut ainsi être considéré comme un langage à typage statique.
3. Classe
La notion de classe introduite dans TypeScript anticipe la prochaine évolution de Javascript (ECMAScript 6).
Code:
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
| class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}
stop() {
clearTimeout(this.timerToken);
}
}
window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
}; |
(3.1)
Comme on peut le voir dans l'exemple ci-dessus, une classe Greeter y est définie d'une façon proche de la plupart des langages orientés objet.
La classe Greeter possède ici trois attributs (element, span et timerToken), défini un constructeur (constructor) et deux méthodes (start et stop). Son instanciation se fait à l'aide de l'opérateur new comme on peut le voir à la fin de l'exemple précédent.
Code:
var greeter = new Greeter(el);
(3.2)
De pair avec la notion de classe, TypeScript implémente la notion d'héritage simple par l'utilisation du mot-clé extends.
L'extension de la classe Greeter de l'exemple précédent pourrait se faire ainsi :
Code:
1
2
3
4
5
6
7
8
| class GreeterId extends Greeter {
id: string;
constructor(element: HTMLElement, id: string) {
super(element);
this.id = id;
}
} |
(3.3)
Cette nouvelle classe GreeterId se contente d'ajouter un nouvel attribut id à la classe Greeter.
Toutes les classes définies dans TypeScript peuvent ensuite être considérées comme des nouveaux types.
4. Fonction anonyme fléchée
Un autre apport notable de TypeScript à Javascript est sa nouvelle manière de définir une fonction anonyme. Comme celle présente à l'intérieur de la méthode start en paramètre à l'appel de setInterval et qui peut être dénommée ici notation "fléchée" (arrow function).
Code:
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
(4.1)
L'avantage par rapport à l'actuelle norme de Javascript (ECMAScript 5), est que la notation fléchée ne change pas la valeur de contexte du mot-clé this à l'intérieur de la fonction anonyme. Cela évite donc l'utilisation d'une variable intermédiaire servant à propager la valeur de this à l'intérieur de la fonction anonyme. Par exemple, la ligne de code précédente aurait pu être transcrite ainsi en Javascript actuel :
Code:
1
2
3
4
| var _this = this;
this.timerToken = setInterval(function () {
return _this.span.innerHTML = new Date().toUTCString();
}, 500); |
(4.2)
Cette la nouvelle notation plus concise sera utile en particulier pour les fonctions callback.
5. Modularité
TypeScript introduit de nouvelles techniques de modularisation devenues nécessaires par le typage statique et par l'héritage de classes.
Parmi ces techniques de modularisation, le référencement d'un fichier TypeScript externe est peut-être la plus simple.
Elle consiste à ajouter en tout début de fichier, le source TypeScript externe contenant des déclarations nécessaire au compilateur afin qu'il en déduise entre autre les types et les héritages.
Code:
/// <reference path="Externe.ts"/>
(5.1)
A noter que cela ressemble un peu aux #include des langages C/C++.
6. Conclusion
Cette présentation est évidemment loin d'être complète. Pour se familiariser avec TypeScript, il peut être utile d'utiliser la page de test afin de voir instantanément la conversion d'un code TypeScript en un code Javascript. Sinon, la spécification, malheureusement non traduite en français, reste indispensable pour approfondir le sujet.
En espérant que cet article vous aura été utile.
