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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
language: TypeScript
contributors:
- ["Philippe Vlérick", "https://github.com/pvlerick"]
translators:
- ["Alois de Gouvello", "https://github.com/aloisdg"]
filename: learntypescript-fr.ts
lang: fr-fr
---
TypeScript est un langage visant à faciliter le développement d'applications larges et scalables, écrites en JavaScript.
TypeScript ajoute des concepts classiques comme les classes, les modules, les interfaces, les génériques et le typage statique (optionnel) à JavaScript.
C'est une surcouche de JavaScript : tout le code JavaScript est valide en TypeScript ce qui permet de l'ajouter de façon transparente à n'importe quel projet. Le code TypeScript est transcompilé en JavaScript par le compilateur.
Cet article se concentrera seulement sur la syntaxe supplémentaire de TypeScript, plutôt que celle de [JavaScript](../javascript-fr/).
Pour tester le compilateur de TypeScript, rendez-vous au [Playground](https://www.typescriptlang.org/Playground) où vous pourrez coder, profiter d'une autocomplétion et accéder directement au rendu JavaScript.
```ts
// Il y a 3 types basiques en TypeScript
var isDone: boolean = false;
var lines: number = 42;
var name: string = "Anders";
// Si nous ne pouvons pas déterminer le type, on utilise `Any`
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // ok, définitivement un booléen
// Pour les collections, il y a les tableaux typés et les tableaux génériques
var list: number[] = [1, 2, 3]; // Un tableaux typé
var list: Array<number> = [1, 2, 3]; // un tableau générique
// Pour les énumeration
enum Color { Red, Green, Blue };
var c: Color = Color.Green;
// Enfin, `void` est utilisé dans le cas spécifique
// d'une fonction ne retournant rien
function bigHorribleAlert(): void {
alert("Je suis une petite boîte ennuyeuse !");
}
// Les fonctions sont des entités de première classe. Le langage supporte
// les expressions lambda et utilise l'inférence de type
// Les fonctions ci-dessous sont équivalentes, une signature identique
// sera inférée par le compilateur, et le même JavaScript sera généré
var f1 = function(i: number): number { return i * i; }
// Retourne un type inféré
var f2 = function(i: number) { return i * i; }
var f3 = (i: number): number => { return i * i; }
// Retourne un type inféré
var f4 = (i: number) => { return i * i; }
// Retourne un type inféré, ici le mot clé `return` n'est pas nécessaire
var f5 = (i: number) => i * i;
// Les interfaces sont structurées, tout les objets qui ont ces propriétés
// sont compatible avec l'interface
interface Person {
name: string;
// Les propriétés optionnelles sont identifiées avec un "?"
age?: number;
// Et bien sûr, les fonctions
move(): void;
}
// Un objet implémentant l'interface "Person" peut être traité comme
// une Person car il a les propriétés "name" et "move"
var p: Person = { name: "Bobby", move: () => {} };
// Des objets implémentants la propriété optionnelle :
// valide car "age" est un nombre
var validPerson: Person = { name: "Bobby", age: 42, move: () => {} };
// invalide car "age" n'est pas un nombre
var invalidPerson: Person = { name: "Bobby", age: true };
// Les interfaces peuvent aussi décrire un type de fonction
interface SearchFunc {
(source: string, subString: string): boolean;
}
// Seul les types des paramètres sont importants. Les noms ne le sont pas.
var mySearch: SearchFunc;
mySearch = function(src: string, sub: string) {
return src.search(sub) != -1;
}
// Les membres des classes sont publiques par défaut.
class Point {
// Propriétés
x: number;
// Constructeur - Les mots clés "public" et "private" dans ce contexte
// génèrent le code de la propriété et son initialisation dans le
// constructeur. Ici, "y" sera défini de la même façon que "x",
// mais avec moins de code. Les valeurs par défaut sont supportées.
constructor(x: number, public y: number = 0) {
this.x = x;
}
// Fonctions
dist() { return Math.sqrt(this.x * this.x + this.y * this.y); }
// Membres statiques
static origin = new Point(0, 0);
}
var p1 = new Point(10 ,20);
var p2 = new Point(25); // y sera 0
// Héritage
class Point3D extends Point {
constructor(x: number, y: number, public z: number = 0) {
// Un appel explicite au constructeur de la super classe
// est obligatoire.
super(x, y);
}
// Redéfinition
dist() {
var d = super.dist();
return Math.sqrt(d * d + this.z * this.z);
}
}
// Modules, "." peut être utilisé comme un séparateur de sous modules.
module Geometry {
export class Square {
constructor(public sideLength: number = 0) {
}
area() {
return Math.pow(this.sideLength, 2);
}
}
}
var s1 = new Geometry.Square(5);
// Alias local pour référencer un module
import G = Geometry;
var s2 = new G.Square(10);
// Génériques
// Classes
class Tuple<T1, T2> {
constructor(public item1: T1, public item2: T2) {
}
}
// Interfaces
interface Pair<T> {
item1: T;
item2: T;
}
// Et fonctions
var pairToTuple = function<T>(p: Pair<T>) {
return new Tuple(p.item1, p.item2);
};
var tuple = pairToTuple({ item1:"hello", item2:"world"});
// Inclure des références à un fichier :
/// <reference path="jquery.d.ts" />
```
## Lectures complémentaires
* [Site officiel de TypeScript](https://www.typescriptlang.org/)
* [Code source sur GitHub](https://github.com/microsoft/TypeScript)
|
