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.
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.
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).
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.
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 :
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).
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 :
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.
/// <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.
Introduction au langage TypeScript
R�pondre avec citation
Partager