Introduction à TypeScript
Introduction à TypeScript
Syntaxe de base
Nouveautés de TypeScript/ES6
2
Introduction à TypeScript
TypeScript - Présentation
• Langage de script typé, un sur-ensemble de Ecmascript (JavaScript)
• Support d'EcmaScript 3 et 5 et ES6.
• Release 1.0 en Avril 2014
• Compilé en JavaScript.
• Opensource, source disponible sur github
TypeScript - Caractéristiques
• Vérificateur statique : La détection d'erreurs dans le code sans
l'exécuter est appelée vérification statique.
• Langage typé
• Préserve le comportement d'exécution de JavaScript
• Une fois votre code TS est compilé, le code JS brut résultant n'a
aucune information de type.
TypeScript - Téléchargement
TypeScript peut être téléchargé de 3 façons:
• Npm module
• NuGet package
• Visual Studio Extension
Vous pouvez consulter https://www.typescriptlang.org/download
Syntaxe de base
Déclaration de variable
C’est la même déclaration de JavaScript
On peut utiliser :
1. Var : définir une variable globale
2. Let: définir une variable dans un block de code
3. Const: définir une constante
Déclaration de variables - Var
Syntaxe: var maVariable :type;
Avec var:
• On peut créer plusieurs variables ayant le même nom
• La variable déclarée est accessible partout
=> Ceci peut engendrer plusieurs erreurs
Déclaration de variables - Let
Syntaxe : let maVariable :type;
• Block scoping : La variable déclarée dans un block, n’est pas visible à
l’éxtérieur function f(input: boolean) {
let a = 100;
if (input) {
function f(x) { let x = 100; } => erreur
let b = a + 1;
function g() {
return b; }
let x = 100;
// Error: 'b' doesn't exist here
var x = 100;} => erreur
return b; }
• On ne peut pas créer plusieurs variables ayant le même nom
• Interdit d’utiliser une variable avant qu’elle soit déclarée
++a; //illégal
let a;
Déclaration de variables - const
const maVariable = valeur;
• Nous utilisons const pour des variables où la valeur ne change pas.
• La visibilité des variables crées avec const est comme celles crées
avec let.
Les types de base
• Les types de bases sont les même qu'en Javascript
Type Syntaxe
Number let val1: number = 6;
let val2: number = 0xf00d;
let big: bigint = 100n; (for Big integers)
String let color: string = "blue";
Array let list: number[] = [1, 2, 3]; syntaxe : type[]
ou bien
let list: Array<number> = [1, 2, 3]; syntaxe :
Array<type>
Les types de base
Type Syntaxe
Tuple : tableau avec un Déclaration: let x: [string, number];
nombre fixe d’éléments
ayant des types connus
Initialization: x = ["hello", 10]; // OK
mais différents
Enum enum Color { Red, Green, Blue, }
let c: Color = Color.Green;
Unknown (le type est non llet notSure: unknown = 4;
reconnu à l’avance)
notSure = "maybe a string instead"; // OK, definitely a
boolean notSure = false;
Les types de base
Type Syntaxe
Object : aucun des ces declare function create(o: object | null): void;
types
create({ prop: 0 }); OK
(number, string, boolean
create(42); create( "string"); ce n’est pas le type
, null, undefined)
Object
Any (n’importe quel type let looselyTyped: any = 4;
JS)
Void : pour une fonction function warnUser(): void {
qui ne retourne rien
console.log("This is my warning message"); }
Null / Undefined let u: undefined = undefined;
let n: null = null;
Les types de base
Type Syntaxe
Never // fonction qui retourne toujours des exceptions
error(message: string): never {
throw new Error(message);
}
// le type retourné est never
function fail() { return error("Something failed"); }
//pas de retour (ne se termine pas
function infiniteLoop(): never { while (true) {} }
Boucle For
Deux boucles for possibles for … of et for ….in
1. For … in : Renvoie une liste de clés sur l'objet en
cours d'itération
2. For … of : Renvoie une liste de valeurs des
propriétés de l'objet en cours d'itération
let list = [4, 5, 6];
for (let i in list) {
console.log(i);} "0", "1", "2",
for (let i of list) {
console.log(i);}
"4", "5", "6"
Les fonctions paramétrées
Paramètre optionnel
TypeScript permet de rendre des paramètres optionnels. Ces
paramètres doivent être placés à la fin
function afficheNom(nom: string, prenom?: string): void {
let texte = nom;
if (prenom) {
texte += ' ' + prenom;
}
alert(texte);
}
afficheNom('Durand');
afficheNom('Dupont', 'Marcel');
Les fonctions paramétrées
Paramètres du reste
Des fois on ne sait pas de combien de paramètres on a besoin. On utilise
alors les paramètres du reste
function ajouter(base, ...elements) {
for (var i = 0; i < elements.length; i++) {
base += elements[i];
}
return base;
}
var resultat = ajouter(10, 1, 2);
alert(resultat);
• On ajoute au premier paramètre tous les autres transmis, quel qu’en soit
le nombre.
Les fonctions – Type de retour
• Une fonction qui retourne une valeur ayant un type.
function carre(x: number): number {
Return x * x ;
}
• Si la fonction ne renvoie pas de valeur on lui donne le type void :
function affiche(texte: string): void {
alert(texte);
}
Les classes - Définition
• Comme dans ES6, il y a la notion de classes
class Salutation {
saluer: string;
Constructor(message: string) {
this.saluer = message;
}
greet() {
return "Hello, " + this.saluer;
}
}
let Salut = new Salutation("world");
Les classes - Héritage
class Etudiant extends Personne{ // class Etudiant herite de Personne
classe: string; // attribut
constructor(name: string, classe: string) { // contructeur
super(name); // appel constructeur de la class mère
this.classe= classe;
}
initiation(): string { // une methode
return “Bonjour!"
}
}
//instanciation
var MonEtudiant = new Etudiant(Mohamed',5GL');
//appel d'un methode
MonEtudiant,initiation();
Les modules
• À partir d'ECMAScript 2015, JavaScript a un concept de modules.
TypeScript partage ce concept.
• Les modules sont exécutés dans leur propre étendue, pas dans la
portée globale; cela signifie que les variables, fonctions, classes, etc.
déclarées dans un module ne sont pas visibles à l'extérieur du
module à moins qu'elles ne soient explicitement exportées en
utilisant l'un des formes d'exportation.
• Inversement, pour consommer une variable, une fonction, une
classe, une interface, etc. exportée depuis un module différent, il
faut l'importer à l'aide de l'un des formulaires d'importation.
Les modules
• Dans TypeScript, tout comme dans ECMAScript 2015, tout fichier
contenant une importation ou une exportation de niveau supérieur
est considéré comme un module. Inversement, un fichier sans
aucune déclaration d'import ou d'export de niveau supérieur est
traité comme un script dont le contenu est disponible dans la portée
globale (et donc aux modules également).
Nouveautés de TypeScript/ES6
Les interfaces
Les Enumérations
• Les énumérations sont l'une des rares fonctionnalités de TypeScript
qui ne sont pas une extension au niveau du type de JavaScript.
• Les énumérations permettent à un développeur de définir un
ensemble de constantes nommées. L'utilisation d'énumérations
peut faciliter la documentation de l'intention ou la création d'un
ensemble de cas distincts. TypeScript fournit à la fois des
énumérations numériques et basées sur des chaînes.
Les décorateurs
• Un décorateur est un type spécial de déclaration qui peut être
attaché à une déclaration de classe, une méthode, un accesseur,
une propriété ou un paramètre.
• Les décorateurs permettent d'ajouter à la fois des annotations et
une syntaxe de méta-programmation pour les déclarations de classe
et les membres.
• Les décorateurs utilisent la forme @expression, où expression doit
s'évaluer en une fonction qui sera appelée au moment de
l'exécution avec des informations sur la déclaration décorée.
Evaluation d’un décorateur
Il existe un ordre bien défini sur la façon dont les décorateurs
appliqués à diverses déclarations à l'intérieur d'une classe sont
appliqués :
• Les décorateurs de paramètre , suivis de méthode, d' accesseur ou
de décorateurs de propriété sont appliqués pour chaque membre
d'instance ou bien chaque membre statique.
• Les décorateurs de paramètres sont appliqués pour le constructeur.
• Les décorateurs de classe sont appliqués pour la classe.
Les décorateurs dans Angular
Décorateur Angular Exemple
Décorateur de classe @Component, @NgModule
Décorateur de propriété pour @Input, @Output
les propriétés dans une classe
Décorateur de méthode pour @HostListener
les méthodes dans une classe
Décorateur de paramètre pour @Inject
les paramètres dans une
classe
Références
• https://www.typescriptlang.org/docs/handbook/typescript-from-
scratch.html
Merci de votre attention
