SlideShare une entreprise Scribd logo
1  sur  285
Télécharger pour lire hors ligne
TypeScript pour Angular
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille
Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
elmouelhi.achref@gmail.com
H & H: Research and Training 1 / 142
Plan
1 Introduction
2 Variable
Déclaration
Union de type
Variable locale
Cast
Conversion
Alias de type
Nullish Coalescing (Coalescence nulle)
3 Constante
H & H: Research and Training 2 / 142
Plan
4 Fonction
Déclaration et appel
Paramètres par défaut
Paramètres optionnels
Paramètres restants
Paramètres à plusieurs types autorisés
Paramètres en lecture seule
Fonctions fléchées (arrow function)
5 Concept de décomposition (spread)
6 import / export
H & H: Research and Training 3 / 142
Plan
7 Classe
Rappel
Syntaxe
Setter
Getter
Constructeur
Attributs et méthodes statiques
8 Héritage
9 Classe et méthode abstraites
10 Interface
11 Décorateur
12 Généricité
13 Map
14 Set
H & H: Research and Training 4 / 142
Introduction
TypeScript
ECMAScript
ensemble de normes sur les langages de programmation de type
script (JavaScript, ActionScript...)
standardisée par Ecma International (European Computer
Manufacturers Association) depuis 1994
H & H: Research and Training 5 / 142
Introduction
TypeScript
ECMAScript
ensemble de normes sur les langages de programmation de type
script (JavaScript, ActionScript...)
standardisée par Ecma International (European Computer
Manufacturers Association) depuis 1994
Quelques versions
ECMAScript version 5 (ES5) ou ES 2009
ECMAScript version 6 (ES6) ou ES 2015 (compatible avec les
navigateurs modernes)
H & H: Research and Training 5 / 142
Introduction
TypeScript
TypeScript
langage de programmation
procédural et orienté objet
supportant le typage statique, dynamique et générique
open-source
créé par Anders Hejlsberg (inventeur de C#) de MicroSoft
utilisé par Angular (Google)
H & H: Research and Training 6 / 142
Introduction
TypeScript
TypeScript : sur-couche de ES6 ajoutant
typage
meilleure gestion de module (à ne pas confondre avec les
modules Angular)
JavaScript
(ES5)
ES6
TypeScript
H & H: Research and Training 7 / 142
Introduction
TypeScript
Le navigateur ne comprend pas le TypeScript
Il faut le transcompiler (ou transpiler) en JavaScript
file.ts
transpiler
file.js
H & H: Research and Training 8 / 142
Introduction
TypeScript
Comment va t-on procéder dans ce cours?
file.ts
transpiler
file.js
exécuter
résultat
tsc file.ts node file.js
tsc file.ts | node file.js
Pour consulter la liste d’ptions pour la commande tsc
https://www.typescriptlang.org/docs/handbook/compiler-options.html
H & H: Research and Training 9 / 142
Introduction
TypeScript
De quoi on a besoin?
Node.js pour exécuter la commande node
TypeScript pour exécuter la commande tsc
H & H: Research and Training 10 / 142
Introduction
TypeScript
Pour Node.js, il faut
aller sur https://nodejs.org/en/
choisir la dernière version, télécharger et installer
H & H: Research and Training 11 / 142
Introduction
TypeScript
Pour Node.js, il faut
aller sur https://nodejs.org/en/
choisir la dernière version, télécharger et installer
Pour TypeScript, il faut
ouvrir une console (invite de commandes)
lancer la commande npm install -g typescript
vérifier la version avec la commande tsc -v
H & H: Research and Training 11 / 142
Introduction
TypeScript
Quel IDE pour TypeScript (et éventuellement Angular)
Microsoft recommande Visual Studio Code
code.visualstudio.com/download
H & H: Research and Training 12 / 142
Variable Déclaration
TypeScript
Déclarer une variable
var nomVariable: typeVariable;
H & H: Research and Training 13 / 142
Variable Déclaration
TypeScript
Déclarer une variable
var nomVariable: typeVariable;
Exemple
var x: number;
H & H: Research and Training 13 / 142
Variable Déclaration
TypeScript
Déclarer une variable
var nomVariable: typeVariable;
Exemple
var x: number;
Initialiser une variable
x = 2;
H & H: Research and Training 13 / 142
Variable Déclaration
TypeScript
Déclarer une variable
var nomVariable: typeVariable;
Exemple
var x: number;
Initialiser une variable
x = 2;
Déclarer et initialiser une variable
var x: number = 2;
H & H: Research and Training 13 / 142
Variable Déclaration
TypeScript
Cependant, ceci génère une erreur car une varaible ne change
pas de type
x = "bonjour";
H & H: Research and Training 14 / 142
Variable Déclaration
TypeScript
Quels types pour les variables en TypeScript?
number pour les nombres (entiers, réels, binaires, décimaux, hexadécimaux...)
string pour les chaı̂nes de caractère
boolean pour les booléens
array pour les tableaux non-statiques (taille variable)
tuple pour les tableaux statiques (taille et type fixes)
object pour les objets
any pour les variables pouvant changer de type dans le programme
enum pour les énumérations (tableau de constantes)
H & H: Research and Training 15 / 142
Variable Déclaration
TypeScript
Quels types pour les variables en TypeScript?
number pour les nombres (entiers, réels, binaires, décimaux, hexadécimaux...)
string pour les chaı̂nes de caractère
boolean pour les booléens
array pour les tableaux non-statiques (taille variable)
tuple pour les tableaux statiques (taille et type fixes)
object pour les objets
any pour les variables pouvant changer de type dans le programme
enum pour les énumérations (tableau de constantes)
Les types undefined et null du JavaScript sont aussi disponibles.
H & H: Research and Training 15 / 142
Variable Déclaration
TypeScript
Pour les chaı̂nes de caractères, on peut faire
var str1: string = "wick";
var str2: string = ’john’;
H & H: Research and Training 16 / 142
Variable Déclaration
TypeScript
Pour les chaı̂nes de caractères, on peut faire
var str1: string = "wick";
var str2: string = ’john’;
On peut aussi utiliser template strings
var str3: string = ‘Bonjour ${ str2 } ${ str1 }
Que pensez-vous de TypeScript ?
‘;
console.log(str3);
// affiche Bonjour john wick
Que pensez-vous de TypeScript ?
H & H: Research and Training 16 / 142
Variable Déclaration
TypeScript
Pour les chaı̂nes de caractères, on peut faire
var str1: string = "wick";
var str2: string = ’john’;
On peut aussi utiliser template strings
var str3: string = ‘Bonjour ${ str2 } ${ str1 }
Que pensez-vous de TypeScript ?
‘;
console.log(str3);
// affiche Bonjour john wick
Que pensez-vous de TypeScript ?
L’équivalent de faire
var str3: string = "Bonjour " + str2 + " " + str1 + "nQue
pensez-vous de TypeScript ?";
H & H: Research and Training 16 / 142
Variable Déclaration
TypeScript
Une première déclaration pour les tableaux
var list: number[] = [1, 2, 3];
console.log(list);
// affiche [ 1, 2, 3 ]
H & H: Research and Training 17 / 142
Variable Déclaration
TypeScript
Une première déclaration pour les tableaux
var list: number[] = [1, 2, 3];
console.log(list);
// affiche [ 1, 2, 3 ]
Une deuxième déclaration
var list: Array<number> = new Array(1, 2, 3);
console.log(list);
// affiche [ 1, 2, 3 ]
H & H: Research and Training 17 / 142
Variable Déclaration
TypeScript
Une première déclaration pour les tableaux
var list: number[] = [1, 2, 3];
console.log(list);
// affiche [ 1, 2, 3 ]
Une deuxième déclaration
var list: Array<number> = new Array(1, 2, 3);
console.log(list);
// affiche [ 1, 2, 3 ]
Ou encore plus simple
var list: Array<number> = [1, 2, 3];
console.log(list);
// affiche [ 1, 2, 3 ]
H & H: Research and Training 17 / 142
Variable Déclaration
TypeScript
Remarques
En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un
intervalle de valeurs entières consécutives.
Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un
intervalle de valeurs entières consécutives.
H & H: Research and Training 18 / 142
Variable Déclaration
TypeScript
Remarques
En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un
intervalle de valeurs entières consécutives.
Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un
intervalle de valeurs entières consécutives.
Exemple
var list: number[] = Array.from(Array(3).keys())
console.log(list);
// affiche [ 0, 1, 2 ]
H & H: Research and Training 18 / 142
Variable Déclaration
TypeScript
Remarques
En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un
intervalle de valeurs entières consécutives.
Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un
intervalle de valeurs entières consécutives.
Exemple
var list: number[] = Array.from(Array(3).keys())
console.log(list);
// affiche [ 0, 1, 2 ]
On peut utiliser une fonction fléchée (à voir dans une prochaine section) pour modifier les
valeurs générées
var list: number[] = Array.from({ length: 3 }, (v, k) => k + 1)
console.log(list);
// affiche [ 1, 2, 3 ]
H & H: Research and Training 18 / 142
Variable Déclaration
TypeScript
Pour les tuples, on initialise toutes les valeurs à la déclaration
var t: [number, string, string] = [ 100, "wick", ’john’ ];
H & H: Research and Training 19 / 142
Variable Déclaration
TypeScript
Pour les tuples, on initialise toutes les valeurs à la déclaration
var t: [number, string, string] = [ 100, "wick", ’john’ ];
Pour accéder à un élément d’un tuple en lecture ou en écriture
console.log(t[0]);
// affiche 100
t[2] = "travolta";
console.log(t);
// affiche [ 100, ’wick’, ’travolta’ ]
H & H: Research and Training 19 / 142
Variable Déclaration
TypeScript
Pour les tuples, on initialise toutes les valeurs à la déclaration
var t: [number, string, string] = [ 100, "wick", ’john’ ];
Pour accéder à un élément d’un tuple en lecture ou en écriture
console.log(t[0]);
// affiche 100
t[2] = "travolta";
console.log(t);
// affiche [ 100, ’wick’, ’travolta’ ]
Cependant, ceci génère une erreur
t = [100, 200, ’john’];
H & H: Research and Training 19 / 142
Variable Déclaration
Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels
var t: [number, string?, string?] = [100];
console.log(t);
// affiche [ 100 ]
console.log(t[1]);
// affiche undefined
H & H: Research and Training 20 / 142
Variable Déclaration
Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels
var t: [number, string?, string?] = [100];
console.log(t);
// affiche [ 100 ]
console.log(t[1]);
// affiche undefined
Pour ajouter un élément
t[1] = ’wick’;
H & H: Research and Training 20 / 142
Variable Déclaration
Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels
var t: [number, string?, string?] = [100];
console.log(t);
// affiche [ 100 ]
console.log(t[1]);
// affiche undefined
Pour ajouter un élément
t[1] = ’wick’;
Ceci génère une erreur
t[2] = 100;
H & H: Research and Training 20 / 142
Variable Déclaration
Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels
var t: [number, string?, string?] = [100];
console.log(t);
// affiche [ 100 ]
console.log(t[1]);
// affiche undefined
Pour ajouter un élément
t[1] = ’wick’;
Ceci génère une erreur
t[2] = 100;
Et cette instruction aussi car on dépasse la taille du tuple
t[3] = 100;
H & H: Research and Training 20 / 142
Variable Déclaration
TypeScript
Exemple avec any
var x: any;
x = "bonjour";
x = 5;
console.log(x);
// affiche 5;
H & H: Research and Training 21 / 142
Variable Déclaration
TypeScript
Exemple avec any
var x: any;
x = "bonjour";
x = 5;
console.log(x);
// affiche 5;
Une variable de type any peut être affectée à n’importe quel autre
type de variable
var x: any;
x = "bonjour";
x = 5;
var y: number = x;
H & H: Research and Training 21 / 142
Variable Déclaration
TypeScript
Le type unknown (TypeScript 3.0) fonctionne comme any mais ne
peut être affecté qu’à une variable de type unknown ou any
var x: unknown;
x = "bonjour";
x = 5;
console.log(x);
// affiche 5;
H & H: Research and Training 22 / 142
Variable Déclaration
TypeScript
Le type unknown (TypeScript 3.0) fonctionne comme any mais ne
peut être affecté qu’à une variable de type unknown ou any
var x: unknown;
x = "bonjour";
x = 5;
console.log(x);
// affiche 5;
Ceci génère donc une erreur
var x: unknown;
x = "bonjour";
x = 5;
var y: number = x;
H & H: Research and Training 22 / 142
Variable Déclaration
Déclarons une énumération (dans file.ts)
enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET,
AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };
H & H: Research and Training 23 / 142
Variable Déclaration
Déclarons une énumération (dans file.ts)
enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET,
AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };
L’indice du premier élément est 0
console.log(mois.AVRIL)
// affiche 3
H & H: Research and Training 23 / 142
Variable Déclaration
Déclarons une énumération (dans file.ts)
enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET,
AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };
L’indice du premier élément est 0
console.log(mois.AVRIL)
// affiche 3
Pour modifier l’indice du premier élément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };
H & H: Research and Training 23 / 142
Variable Déclaration
Déclarons une énumération (dans file.ts)
enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET,
AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };
L’indice du premier élément est 0
console.log(mois.AVRIL)
// affiche 3
Pour modifier l’indice du premier élément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };
En affichant maintenant, le résultat est
console.log(mois.AVRIL)
// affiche 4
H & H: Research and Training 23 / 142
Variable Déclaration
TypeScript
On peut aussi modifier plusieurs indices simultanément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE };
H & H: Research and Training 24 / 142
Variable Déclaration
TypeScript
On peut aussi modifier plusieurs indices simultanément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE };
En affichant, le résultat est
console.log(mois.MARS);
// affiche 3
console.log(mois.JUIN);
// affiche 12
console.log(mois.DECEMBRE);
// affiche 3
H & H: Research and Training 24 / 142
Variable Déclaration
TypeScript
On peut aussi modifier plusieurs indices simultanément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE };
En affichant, le résultat est
console.log(mois.MARS);
// affiche 3
console.log(mois.JUIN);
// affiche 12
console.log(mois.DECEMBRE);
// affiche 3
Ceci est une erreur, on ne peut modifier une constante
mois.JANVIER = 3;
H & H: Research and Training 24 / 142
Variable Déclaration
TypeScript
Pour déclarer un objet
var obj: {
nom: string;
numero: number;
};
H & H: Research and Training 25 / 142
Variable Déclaration
TypeScript
Pour déclarer un objet
var obj: {
nom: string;
numero: number;
};
On peut initialiser les attributs de cet objet
obj = {
nom: ’wick’,
numero: 100
};
console.log(obj);
// affiche { nom: ’wick’, numero: 100 }
console.log(typeof obj);
// affiche object
H & H: Research and Training 25 / 142
Variable Déclaration
TypeScript
On peut modifier les valeurs d’un objet ainsi
obj.nom = ’abruzzi’;
obj[’numero’] = 200;
console.log(obj);
H & H: Research and Training 26 / 142
Variable Déclaration
TypeScript
On peut modifier les valeurs d’un objet ainsi
obj.nom = ’abruzzi’;
obj[’numero’] = 200;
console.log(obj);
Ceci est une erreur
obj.nom = 125;
H & H: Research and Training 26 / 142
Variable Union de type
TypeScript
Union de type
Il est possible d’autoriser plusieurs types de valeurs pour une variable
H & H: Research and Training 27 / 142
Variable Union de type
TypeScript
Union de type
Il est possible d’autoriser plusieurs types de valeurs pour une variable
Déclarer une variable acceptant plusieurs types de valeur
var y: number | boolean | string;
H & H: Research and Training 27 / 142
Variable Union de type
TypeScript
Union de type
Il est possible d’autoriser plusieurs types de valeurs pour une variable
Déclarer une variable acceptant plusieurs types de valeur
var y: number | boolean | string;
affecter des valeurs de type différent
y = 2;
y = "bonjour";
y = false;
H & H: Research and Training 27 / 142
Variable Union de type
TypeScript
Union de type
Il est possible d’autoriser plusieurs types de valeurs pour une variable
Déclarer une variable acceptant plusieurs types de valeur
var y: number | boolean | string;
affecter des valeurs de type différent
y = 2;
y = "bonjour";
y = false;
Ceci génère une erreur
y = [2, 5];
H & H: Research and Training 27 / 142
Variable Variable locale
TypeScript
Le mot-clé let
permet de donner une visibilité locale à une variable déclarée dans un
bloc.
H & H: Research and Training 28 / 142
Variable Variable locale
TypeScript
Le mot-clé let
permet de donner une visibilité locale à une variable déclarée dans un
bloc.
Ceci génère une erreur car la variable x a une visibilité locale
limitée au bloc if
if (5 > 2)
{
let x = 1;
}
console.log(x);
// affiche ReferenceError: x is not defined
H & H: Research and Training 28 / 142
Variable Cast
TypeScript
Premier exemple
let str: any = "bonjour";
let longueur: number = (<string>str).length;
console.log(longueur);
// affiche 7
H & H: Research and Training 29 / 142
Variable Cast
TypeScript
Premier exemple
let str: any = "bonjour";
let longueur: number = (<string>str).length;
console.log(longueur);
// affiche 7
Deuxième exemple
let str: any = "bonjour";
let longueur: number = (str as string).length;
console.log(longueur);
// affiche 7
H & H: Research and Training 29 / 142
Variable Conversion
TypeScript
Pour convertir une chaı̂ne de caractère en nombre
let x : string = "2";
let y: string = "3.5";
let a: number = Number(x);
let b: number = Number(y);
console.log(a);
// affiche 2
console.log(b);
// affiche 3.5
H & H: Research and Training 30 / 142
Variable Conversion
TypeScript
Pour convertir une chaı̂ne de caractère en nombre
let x : string = "2";
let y: string = "3.5";
let a: number = Number(x);
let b: number = Number(y);
console.log(a);
// affiche 2
console.log(b);
// affiche 3.5
Il existe une fonction de conversion pour chaque type
H & H: Research and Training 30 / 142
Variable Alias de type
TypeScript
Le mot-clé type permet de définir un alias de type
type maStructure = [number, string, string];
H & H: Research and Training 31 / 142
Variable Alias de type
TypeScript
Le mot-clé type permet de définir un alias de type
type maStructure = [number, string, string];
Ensuite, on peut utiliser maStructure comme un type
let first: maStructure = [100, "wick", ’john’ ];
console.log(first);
// affiche [ 100, ’wick’, ’john’ ]
H & H: Research and Training 31 / 142
Variable Nullish Coalescing (Coalescence nulle)
TypeScript
L’opérateur ?? permet d’éviter d’affecter la valeur null ou
undefined à une variable
var obj = {nom: null, prenom: ’john’};
let nom: string = obj.nom ?? ’doe’;
console.log(nom);
// affiche doe
C’est équivalent à
var obj = {nom: null, prenom: ’john’};
let nom: string = (obj.nom !== null && obj.nom !==
undefined) ? obj.nom : ’doe’;
console.log(nom);
// affiche doe
H & H: Research and Training 32 / 142
Constante
TypeScript
Les constantes
se déclare avec le mot-clé const
permet à une variable de ne pas changer de valeur
H & H: Research and Training 33 / 142
Constante
TypeScript
Les constantes
se déclare avec le mot-clé const
permet à une variable de ne pas changer de valeur
Ceci génère une erreur car une constante ne peut changer de
valeur
const X: any = 5;
X = "bonjour";
// affiche TypeError: Assignment to constant
variable.
H & H: Research and Training 33 / 142
Constante
TypeScript
Avec TypeScript 3.4, on peut définir une constante avec une assertion
sans préciser le type
let X = "bonjour" as const;
console.log(X);
// affiche bonjour
console.log(typeof X);
// affiche string
let Y: string = "bonjour";
console.log(X == y);
//affiche true
H & H: Research and Training 34 / 142
Constante
TypeScript
Avec TypeScript 3.4, on peut définir une constante avec une assertion
sans préciser le type
let X = "bonjour" as const;
console.log(X);
// affiche bonjour
console.log(typeof X);
// affiche string
let Y: string = "bonjour";
console.log(X == y);
//affiche true
Ceci génère une erreur car une constante ne peut changer de valeur
X = "hello";
H & H: Research and Training 34 / 142
Constante
TypeScript
Avec TypeScript 3.4, on peut aussi définir une constante ainsi
let X = <const>"bonjour";
console.log(X);
// affiche bonjour
console.log(typeof X);
// affiche string
let y: string = "bonjour";
console.log(X == y);
//affiche true
H & H: Research and Training 35 / 142
Constante
TypeScript
Avec TypeScript 3.4, on peut aussi définir une constante ainsi
let X = <const>"bonjour";
console.log(X);
// affiche bonjour
console.log(typeof X);
// affiche string
let y: string = "bonjour";
console.log(X == y);
//affiche true
Ceci génère une erreur car une constante ne peut changer de valeur
X = "hello";
H & H: Research and Training 35 / 142
Fonction Déclaration et appel
TypeScript
Déclarer une fonction
function nomFonction([les paramètres]){
les instructions de la fonction
}
H & H: Research and Training 36 / 142
Fonction Déclaration et appel
TypeScript
Déclarer une fonction
function nomFonction([les paramètres]){
les instructions de la fonction
}
Exemple
function somme(a: number, b: number): number {
return a + b;
}
H & H: Research and Training 36 / 142
Fonction Déclaration et appel
TypeScript
Déclarer une fonction
function nomFonction([les paramètres]){
les instructions de la fonction
}
Exemple
function somme(a: number, b: number): number {
return a + b;
}
Appeler une fonction
let resultat: number = somme (1, 3);
console.log(resultat);
// affiche 4
H & H: Research and Training 36 / 142
Fonction Déclaration et appel
TypeScript
Le code suivant génère une erreur
function somme(a: number, b: number): string {
return a + b;
}
H & H: Research and Training 37 / 142
Fonction Déclaration et appel
TypeScript
Le code suivant génère une erreur
function somme(a: number, b: number): string {
return a + b;
}
Celui-ci aussi
let resultat: number = somme ("1", 3);
H & H: Research and Training 37 / 142
Fonction Déclaration et appel
TypeScript
Le code suivant génère une erreur
function somme(a: number, b: number): string {
return a + b;
}
Celui-ci aussi
let resultat: number = somme ("1", 3);
Et même celui-ci
let resultat: string = somme(1, 3);
H & H: Research and Training 37 / 142
Fonction Déclaration et appel
TypeScript
Une fonction qui ne retourne rien a le type void
function direBonjour(): void {
console.log("bonjour");
}
H & H: Research and Training 38 / 142
Fonction Déclaration et appel
TypeScript
Une fonction qui ne retourne rien a le type void
function direBonjour(): void {
console.log("bonjour");
}
Une fonction qui n’atteint jamais sa fin a le type never
function boucleInfinie(): never {
while (true){
}
}
H & H: Research and Training 38 / 142
Fonction Paramètres par défaut
TypeScript
Il est possible d’attribuer une valeur par défaut aux paramètres
d’une fonction
H & H: Research and Training 39 / 142
Fonction Paramètres par défaut
TypeScript
Il est possible d’attribuer une valeur par défaut aux paramètres
d’une fonction
function division(x: number, y: number = 1) : number
{
return x / y;
}
console.log(division(10));
// affiche 10
console.log(division(10, 2));
// affiche 5
H & H: Research and Training 39 / 142
Fonction Paramètres optionnels
TypeScript
Il est possible de rendre certains paramètres d’une fonction
optionnels
H & H: Research and Training 40 / 142
Fonction Paramètres optionnels
TypeScript
Il est possible de rendre certains paramètres d’une fonction
optionnels
function division(x: number, y?: number): number {
if(y)
return x / y;
return x;
}
console.log(division(10));
// affiche 10
console.log(division(10, 2));
// affiche 5
H & H: Research and Training 40 / 142
Fonction Paramètres restants
TypeScript
Il est possible de définir une fonction prenant un nombre indéfini de
paramètres
H & H: Research and Training 41 / 142
Fonction Paramètres restants
TypeScript
Il est possible de définir une fonction prenant un nombre indéfini de
paramètres
function somme(x: number, ...tab: number[]): number {
for (let elt of tab)
x += elt;
return x;
}
console.log(somme(10));
// affiche 10
console.log(somme(10, 5));
// affiche 15
console.log(somme(10, 1, 6));
// affiche 17
H & H: Research and Training 41 / 142
Fonction Paramètres à plusieurs types autorisés
TypeScript
Il est possible d’autoriser plusieurs types pour un paramètre
H & H: Research and Training 42 / 142
Fonction Paramètres à plusieurs types autorisés
TypeScript
Il est possible d’autoriser plusieurs types pour un paramètre
function stringOrNumber(param1: string | number,
param2: number): number {
if (typeof param1 == "string")
return param1.length + param2;
return param1 + param2;
}
console.log(stringOrNumber("bonjour", 3));
// affiche 10
console.log(stringOrNumber(5, 3));
// affiche 8
H & H: Research and Training 42 / 142
Fonction Paramètres en lecture seule
TypeScript
Le mot-clé ReadonlyArray (TypeScript 3.4) indique qu’un paramètre de type
tableau est en lecture seule (non-modifiable)
function incrementAll(tab: ReadonlyArray<number>): void {
for (let i = 0; i < tab.length; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}
H & H: Research and Training 43 / 142
Fonction Paramètres en lecture seule
TypeScript
Le mot-clé ReadonlyArray (TypeScript 3.4) indique qu’un paramètre de type
tableau est en lecture seule (non-modifiable)
function incrementAll(tab: ReadonlyArray<number>): void {
for (let i = 0; i < tab.length; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}
On peut aussi utiliser le mot-clé readonly qui s’applique sur les tableaux et les
tuples
function incrementAll(tab: readonly number[]): void {
for (let i = 0; i < tab.length; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}
H & H: Research and Training 43 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}
H & H: Research and Training 44 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}
Exemple
let somme = (a: number, b: number): number => { return a + b; }
H & H: Research and Training 44 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}
Exemple
let somme = (a: number, b: number): number => { return a + b; }
Ou en plus simple
let somme = (a: number, b: number): number => a + b;
H & H: Research and Training 44 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}
Exemple
let somme = (a: number, b: number): number => { return a + b; }
Ou en plus simple
let somme = (a: number, b: number): number => a + b;
Appeler une fonction fléchée
let resultat: number = somme (1, 3);
H & H: Research and Training 44 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Cas d’une fonction fléchée à un seul paramètre
let carre = (a: number): number => a * a;
console.log(carre(2)); // affiche 4
H & H: Research and Training 45 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Cas d’une fonction fléchée à un seul paramètre
let carre = (a: number): number => a * a;
console.log(carre(2)); // affiche 4
Sans typage, la fonction peut être écrite ainsi
let carre = a => a * a;
console.log(carre(2)); // affiche 4
H & H: Research and Training 45 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Cas d’une fonction fléchée à un seul paramètre
let carre = (a: number): number => a * a;
console.log(carre(2)); // affiche 4
Sans typage, la fonction peut être écrite ainsi
let carre = a => a * a;
console.log(carre(2)); // affiche 4
Déclaration d’une fonction fléchée sans paramètre
let sayHello = (): void => console.log(’Hello’);
sayHello(); // affiche Hello
H & H: Research and Training 45 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Remarque
Il est déconseillé d’utiliser les fonctions fléchées dans un objet
Le mot-clé this est inutilisable dans les fonctions fléchées
H & H: Research and Training 46 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Remarque
Il est déconseillé d’utiliser les fonctions fléchées dans un objet
Le mot-clé this est inutilisable dans les fonctions fléchées
Sans les fonctions fléchées
let obj = {
nom: ’wick’,
afficherNom: function() {
console.log(this.nom)
}
}
obj.afficherNom();
// affiche wick
Avec les fonctions fléchées
let obj = {
nom: ’wick’,
afficherNom: () => {
console.log(this.nom)
}
}
obj.afficherNom();
// affiche undefined
H & H: Research and Training 46 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Les fonctions fléchées sont utilisées pour réaliser les opérations
suivant sur les tableaux
forEach() : pour parcourir un tableau
map() : pour appliquer une fonction sur les éléments d’un tableau
filter() : pour filtrer les éléments d’un tableau selon un critère
défini sous forme d’une fonction anonyme ou fléchée
reduce() : pour réduire tous les éléments d’un tableau en un
seul selon une règle définie dans une fonction anonyme ou
fléchée
...
H & H: Research and Training 47 / 142
Fonction Fonctions fléchées (arrow function)
Utiliser forEach pour afficher le contenu d’un tableau
var tab = [2, 3, 5];
tab.forEach(elt => console.log(elt));
// affiche 2 3 5
H & H: Research and Training 48 / 142
Fonction Fonctions fléchées (arrow function)
Utiliser forEach pour afficher le contenu d’un tableau
var tab = [2, 3, 5];
tab.forEach(elt => console.log(elt));
// affiche 2 3 5
Dans forEach, on peut aussi appeler une fonction afficher
tab.forEach(elt => afficher(elt));
function afficher(value) {
console.log(value);
}
// affiche 2 3 5
H & H: Research and Training 48 / 142
Fonction Fonctions fléchées (arrow function)
Utiliser forEach pour afficher le contenu d’un tableau
var tab = [2, 3, 5];
tab.forEach(elt => console.log(elt));
// affiche 2 3 5
Dans forEach, on peut aussi appeler une fonction afficher
tab.forEach(elt => afficher(elt));
function afficher(value) {
console.log(value);
}
// affiche 2 3 5
On peut simplifier l’écriture précédente en utilisant les callback
tab.forEach(afficher);
function afficher(value) {
console.log(value);
}
// affiche 2 3 5
H & H: Research and Training 48 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
La fonction afficher peut accepter deux paramètres : le premier
est la valeur de l’itération courante et le deuxième est son indice
dans le tableau
tab.forEach(afficher);
function afficher(value, key) {
console.log(key, value);
}
/* affiche
0 2
1 3
2 5
*/
H & H: Research and Training 49 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
La fonction afficher peut accepter un troisième paramètre qui
correspond au tableau
tab.forEach(afficher);
function afficher(value, key, t) {
console.log(key, value, t);
}
/* affiche
0 2 [ 2, 3, 5 ]
1 3 [ 2, 3, 5 ]
2 5 [ 2, 3, 5 ]
*/
H & H: Research and Training 50 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
On peut utiliser map pour effecteur un traitement sur chaque
élément du tableau puis forEach pour afficher le nouveau
tableau
tab.map(elt => elt + 3)
.forEach(elt => console.log(elt));
// affiche 5 6 8
H & H: Research and Training 51 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
On peut utiliser map pour effecteur un traitement sur chaque
élément du tableau puis forEach pour afficher le nouveau
tableau
tab.map(elt => elt + 3)
.forEach(elt => console.log(elt));
// affiche 5 6 8
On peut aussi utiliser filter pour filtrer des éléments
tab.map(elt => elt + 3)
.filter(elt => elt > 5)
.forEach(elt => console.log(elt));
// affiche 6 8
H & H: Research and Training 51 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Remarque
Attention, selon l’ordre d’appel de ces méthodes, le résultat peut changer.
H & H: Research and Training 52 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Remarque
Attention, selon l’ordre d’appel de ces méthodes, le résultat peut changer.
Exemple avec reduce : permet de réduire les éléments d’un tableau en
une seule valeur
var tab = [2, 3, 5];
var somme = tab.map(elt => elt + 3)
.filter(elt => elt > 5)
.reduce((sum, elt) => sum + elt);
console.log(somme);
// affiche 14
H & H: Research and Training 52 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Si on a plusieurs instructions, on doit ajouter les accolades
var tab = [2, 3, 5];
var somme = tab.map(elt => elt + 3)
.filter(elt => elt > 5)
.reduce((sum, elt) => {
return sum + elt;
}
);
console.log(somme);
// affiche 14
H & H: Research and Training 53 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Remarques
Le premier paramètre de reduce correspond au résultat de
l’itération précédente
Le deuxième correspond à l’élément du tableau de l’itération
courante
Le premier paramètre est initialisé par la valeur du premier
élément du tableau
On peut changer la valeur initiale du premier paramètre en
l’ajoutant à la fin de la méthode
H & H: Research and Training 54 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Dans cet exemple, on initialise le premier paramètre de reduce
par la valeur 0
var somme = tab.map(elt => elt + 3)
.filter(elt => elt > 5)
.reduce((sum, elt) => sum + elt, 0);
console.log(somme);
// affiche 14
H & H: Research and Training 55 / 142
Fonction Fonctions fléchées (arrow function)
TypeScript
Fonctions fléchées : pourquoi?
Simplicité d’écriture du code ⇒ meilleure lisibilité
Pas de binding avec les objets prédéfinis : arguments, this...
...
H & H: Research and Training 56 / 142
Concept de décomposition (spread)
Considérons la fonction somme suivante
function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}
H & H: Research and Training 57 / 142
Concept de décomposition (spread)
Considérons la fonction somme suivante
function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}
Pour appeler la fonction somme, il faut lui passer trois paramètres number
console.log(somme (1, 3, 5));
// affiche 9
H & H: Research and Training 57 / 142
Concept de décomposition (spread)
Considérons la fonction somme suivante
function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}
Pour appeler la fonction somme, il faut lui passer trois paramètres number
console.log(somme (1, 3, 5));
// affiche 9
Et si les valeurs se trouvent dans un tableau, on peut utiliser la décomposition
let t: Array<number> = [1, 3, 5];
console.log(somme(...t));
H & H: Research and Training 57 / 142
Concept de décomposition (spread)
Considérons la fonction somme suivante
function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}
Pour appeler la fonction somme, il faut lui passer trois paramètres number
console.log(somme (1, 3, 5));
// affiche 9
Et si les valeurs se trouvent dans un tableau, on peut utiliser la décomposition
let t: Array<number> = [1, 3, 5];
console.log(somme(...t));
On peut utiliser partiellement la décomposition
let t: Array<number> = [1, 3];
console.log(somme(...t, 5));
H & H: Research and Training 57 / 142
Concept de décomposition (spread)
TypeScript
Considérons les deux objets suivants
let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = obj;
H & H: Research and Training 58 / 142
Concept de décomposition (spread)
TypeScript
Considérons les deux objets suivants
let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = obj;
Modifier l’un ⇒ modifier l’autre
obj2.nom = ’abruzzi’;
console.log(obj);
// affiche { nom: ’abruzzi’, prenom: ’john’ }
console.log(obj2);
// affiche { nom: ’abruzzi’, prenom: ’john’ }
H & H: Research and Training 58 / 142
Concept de décomposition (spread)
TypeScript
Pour que les deux objets soient indépendants, on peut utiliser la
décomposition pour faire le clonage
let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = { ...obj };
obj2.nom = ’abruzzi’;
console.log(obj);
// affiche { nom: ’wick’, prenom: ’john’ }
console.log(obj2);
// affiche { nom: ’abruzzi’, prenom: ’john’ }
H & H: Research and Training 59 / 142
import / export
TypeScript
Particularité
Avec TypeScript, on peut utiliser des éléments définis dans un
autre fichier : une variable, une fonction, une classe, une
interface...
Pour cela, il faut l’importer là où on a besoin de l’utiliser
Pour importer un élément, il faut l’exporter dans le fichier source
En transpilant le fichier contenant les import, les fichiers
contenant les éléments importés seront aussi transpilés.
H & H: Research and Training 60 / 142
import / export
TypeScript
Étant donné le fichier fonctions.ts dont le contenu est
function somme(a: number = 0, b: number = 0) {
return a + b;
}
function produit(a: number = 0, b: number = 1) {
return a * b;
}
H & H: Research and Training 61 / 142
import / export
TypeScript
Pour exporter les deux fonctions somme et produit de fonction.ts
export function somme(a: number = 0, b: number = 0) {
return a + b;
}
export function produit(a: number = 0, b: number = 1) {
return a * b;
}
H & H: Research and Training 62 / 142
import / export
TypeScript
Pour exporter les deux fonctions somme et produit de fonction.ts
export function somme(a: number = 0, b: number = 0) {
return a + b;
}
export function produit(a: number = 0, b: number = 1) {
return a * b;
}
Ou aussi
function somme(a:number = 0, b:number = 0) {
return a + b;
}
function produit(a: number = 0, b: number = 1) {
return a * b;
}
export { somme, produit };
H & H: Research and Training 62 / 142
import / export
TypeScript
Pour importer et utiliser une fonction
import { somme } from ’./fonctions’;
console.log(somme(2, 5));
// affiche 7
H & H: Research and Training 63 / 142
import / export
TypeScript
Pour importer et utiliser une fonction
import { somme } from ’./fonctions’;
console.log(somme(2, 5));
// affiche 7
On peut aussi utiliser des alias
import { somme as s } from ’./fonctions’;
console.log(s(2, 5));
// affiche 7
H & H: Research and Training 63 / 142
import / export
TypeScript
Pour importer plusieurs éléments
import { somme, produit } from ’./fonctions’;
console.log(somme(2, 5));
// affiche 7
console.log(produit(2, 5));
// affiche 10
H & H: Research and Training 64 / 142
import / export
TypeScript
Pour importer plusieurs éléments
import { somme, produit } from ’./fonctions’;
console.log(somme(2, 5));
// affiche 7
console.log(produit(2, 5));
// affiche 10
Pour importer plusieurs éléments
import * as f from ’./fonctions’;
console.log(f.somme(2, 5));
// affiche 7
console.log(f.produit(2, 5));
// affiche 10
H & H: Research and Training 64 / 142
import / export
TypeScript
On peut aussi donner des alias pendant l’export
function somme(a:number = 0, b:number = 0) {
return a + b;
}
function produit(a: number = 0, b: number = 1) {
return a * b;
}
export { produit as p, somme as s } ;
H & H: Research and Training 65 / 142
import / export
TypeScript
On peut aussi donner des alias pendant l’export
function somme(a:number = 0, b:number = 0) {
return a + b;
}
function produit(a: number = 0, b: number = 1) {
return a * b;
}
export { produit as p, somme as s } ;
Pour importer
import * as f from ’./fonctions’;
console.log(f.s(2, 5));
// affiche 7
console.log(f.p(2, 5));
// affiche 10
H & H: Research and Training 65 / 142
import / export
TypeScript
On peut aussi utiliser le export default (un seul par fichier)
export default function somme(a: number = 0, b: number = 0) {
return a + b;
}
export function produit(a: number = 0, b: number = 1) {
return a * b;
}
H & H: Research and Training 66 / 142
import / export
TypeScript
On peut aussi utiliser le export default (un seul par fichier)
export default function somme(a: number = 0, b: number = 0) {
return a + b;
}
export function produit(a: number = 0, b: number = 1) {
return a * b;
}
Pour importer, pas besoin de { } pour les éléments exporter par défaut
import somme from ’./fonctions’;
import { produit } from ’./fonctions’;
console.log(somme(2, 5));
// affiche 7
console.log(produit(2, 5));
// affiche 10
H & H: Research and Training 66 / 142
import / export
TypeScript
Attention, ici on a importé somme avec deux alias différents
import s from ’./fonctions’;
import produit from ’./fonctions’;
console.log(s(2, 5));
// affiche 7
console.log(produit(2, 5));
// affiche 7
H & H: Research and Training 67 / 142
Classe Rappel
TypeScript
Qu’est ce qu’une classe en POO?
Ça correspond à un plan, un moule, une usine...
C’est une description abstraite d’un type d’objets
Elle représente un ensemble d’objets ayant les mêmes propriétés
statiques (attributs) et dynamiques (méthodes)
H & H: Research and Training 68 / 142
Classe Rappel
TypeScript
Qu’est ce qu’une classe en POO?
Ça correspond à un plan, un moule, une usine...
C’est une description abstraite d’un type d’objets
Elle représente un ensemble d’objets ayant les mêmes propriétés
statiques (attributs) et dynamiques (méthodes)
Instance?
Une instance correspond à un objet créé à partir d’une classe (via
le constructeur)
L’instanciation : création d’un objet d’une classe
instance ≡ objet
H & H: Research and Training 68 / 142
Classe Rappel
TypeScript
De quoi est composé une classe?
NomClasse
les attributs
les méthodes
Attribut : [visibilité] + nom + type
Méthode : [visibilité] + nom + arguments + valeur de retour ≡
signature : exactement comme les fonctions en procédurale
H & H: Research and Training 69 / 142
Classe Syntaxe
TypeScript
Considérons la classe Personne définie dans personne.ts
export class Personne {
num: number;
nom: string;
prenom: string;
}
H & H: Research and Training 70 / 142
Classe Syntaxe
TypeScript
Considérons la classe Personne définie dans personne.ts
export class Personne {
num: number;
nom: string;
prenom: string;
}
En TypeScript
Toute classe a un constructeur par défaut sans paramètre.
Par défaut, la visibilité des attributs est public.
H & H: Research and Training 70 / 142
Classe Syntaxe
TypeScript
Hypothèse
Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john
H & H: Research and Training 71 / 142
Classe Syntaxe
TypeScript
Hypothèse
Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john
Étape 1 : Commençons par importer la classe Personne dans file.ts
import { Personne } from ’./personne’;
H & H: Research and Training 71 / 142
Classe Syntaxe
TypeScript
Hypothèse
Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john
Étape 1 : Commençons par importer la classe Personne dans file.ts
import { Personne } from ’./personne’;
Étape 2 : déclarons un objet (objet non créé)
let personne: Personne;
H & H: Research and Training 71 / 142
Classe Syntaxe
TypeScript
Hypothèse
Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john
Étape 1 : Commençons par importer la classe Personne dans file.ts
import { Personne } from ’./personne’;
Étape 2 : déclarons un objet (objet non créé)
let personne: Personne;
Étape 3 : créons l’objet (instanciation) de type Personne (objet créé)
personne = new Personne();
H & H: Research and Training 71 / 142
Classe Syntaxe
TypeScript
Hypothèse
Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john
Étape 1 : Commençons par importer la classe Personne dans file.ts
import { Personne } from ’./personne’;
Étape 2 : déclarons un objet (objet non créé)
let personne: Personne;
Étape 3 : créons l’objet (instanciation) de type Personne (objet créé)
personne = new Personne();
On peut faire déclaration + instanciation
let personne: Personne = new Personne();
H & H: Research and Training 71 / 142
Classe Syntaxe
TypeScript
Affectons les valeurs aux différents attributs
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
H & H: Research and Training 72 / 142
Classe Syntaxe
TypeScript
Affectons les valeurs aux différents attributs
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
Pour être sûr que les valeurs ont bien été affectées aux attributs,
on affiche
Console.log(personne)
// affiche Personne { num: 1, nom: ’wick’, prenom: ’
john’ }
H & H: Research and Training 72 / 142
Classe Setter
TypeScript
Hypothèse
Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la
classe Personne
H & H: Research and Training 73 / 142
Classe Setter
TypeScript
Hypothèse
Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la
classe Personne
Démarche
1 Bloquer l’accès directe aux attributs (mettre la visibilité à private)
2 Définir des méthodes publiques qui contrôlent l’affectation de valeurs
aux attributs (les setter)
H & H: Research and Training 73 / 142
Classe Setter
TypeScript
Hypothèse
Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la
classe Personne
Démarche
1 Bloquer l’accès directe aux attributs (mettre la visibilité à private)
2 Définir des méthodes publiques qui contrôlent l’affectation de valeurs
aux attributs (les setter)
Convention
Mettre la visibilité private ou protected pour tous les attributs
Mettre la visibilité public pour toutes les méthodes
H & H: Research and Training 73 / 142
Classe Setter
Mettons la visibilité private pour tous les attributs de la classe Personne
export class Personne {
private num: number;
private nom: string;
private prenom: string;
}
H & H: Research and Training 74 / 142
Classe Setter
Mettons la visibilité private pour tous les attributs de la classe Personne
export class Personne {
private num: number;
private nom: string;
private prenom: string;
}
Dans le fichier file.ts, les trois lignes suivantes sont soulignées en rouge
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
H & H: Research and Training 74 / 142
Classe Setter
Mettons la visibilité private pour tous les attributs de la classe Personne
export class Personne {
private num: number;
private nom: string;
private prenom: string;
}
Dans le fichier file.ts, les trois lignes suivantes sont soulignées en rouge
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
Explication
Les attributs sont privés, donc aucun accès direct n’est autorisé
H & H: Research and Training 74 / 142
Classe Setter
Mettons la visibilité private pour tous les attributs de la classe Personne
export class Personne {
private num: number;
private nom: string;
private prenom: string;
}
Dans le fichier file.ts, les trois lignes suivantes sont soulignées en rouge
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
Explication
Les attributs sont privés, donc aucun accès direct n’est autorisé
Solution : les setters
Des méthodes qui contrôlent l’affectation de valeurs aux attributs
H & H: Research and Training 74 / 142
Classe Setter
TypeScript
Conventions TypeScript
Le setter est une méthode déclarée avec le mot-clé set
Il porte le nom de l’attribut
On l’utilise comme un attribut
Pour éviter l’ambiguı̈té, on ajoute un underscore pour l’attribut
H & H: Research and Training 75 / 142
Classe Setter
TypeScript
Nouveau contenu de la classe Personne après ajout des setters
export class Personne {
private _num: number;
private _nom: string;
private _prenom: string;
public set num(_num : number) {
this._num = (_num >= 0 ? _num : 0);
}
public set nom(_nom: string) {
this._nom = _nom;
}
public set prenom(_prenom: string) {
this._prenom = _prenom;
}
}
H & H: Research and Training 76 / 142
Classe Setter
TypeScript
Pour tester, rien à changer dans file.ts
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne);
H & H: Research and Training 77 / 142
Classe Setter
TypeScript
Pour tester, rien à changer dans file.ts
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne);
Pour transpiler, ajouter l’option -t es5, le résultat est :
Personne { num: 1, nom: ’wick’, prenom: ’john’ }
H & H: Research and Training 77 / 142
Classe Setter
TypeScript
Testons avec une valeur négative pour l’attribut numero
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = -1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne);
H & H: Research and Training 78 / 142
Classe Setter
TypeScript
Testons avec une valeur négative pour l’attribut numero
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = -1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne);
Le résultat est :
Personne { num: 0, nom: ’wick’, prenom: ’john’ }
H & H: Research and Training 78 / 142
Classe Getter
TypeScript
Question
Comment récupérer les attributs (privés) de la classe Personne?
H & H: Research and Training 79 / 142
Classe Getter
TypeScript
Question
Comment récupérer les attributs (privés) de la classe Personne?
Démarche
Définir des méthodes qui retournent les valeurs des attributs (les getter)
H & H: Research and Training 79 / 142
Classe Getter
TypeScript
Question
Comment récupérer les attributs (privés) de la classe Personne?
Démarche
Définir des méthodes qui retournent les valeurs des attributs (les getter)
Conventions TypeScript
Le getter est une méthode déclarée avec le mot-clé get
Il porte le nom de l’attribut
On l’utilise comme un attribut
H & H: Research and Training 79 / 142
Classe Getter
TypeScript
Ajoutons les getters dans la classe Personne
public get num() : number {
return this._num;
}
public get nom(): string {
return this._nom;
}
public get prenom(): string {
return this._prenom;
}
H & H: Research and Training 80 / 142
Classe Getter
TypeScript
Pour tester
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne.num);
// affiche 1
console.log(personne.nom);
// affiche wick
console.log(personne.prenom);
// affiche john
H & H: Research and Training 81 / 142
Classe Constructeur
TypeScript
Remarques
Par défaut, toute classe en TypeScript a un constructeur par
défaut sans paramètre
Pour simplifier la création d’objets, on peut définir un nouveau
constructeur qui prend en paramètre plusieurs attributs de la
classe
H & H: Research and Training 82 / 142
Classe Constructeur
TypeScript
Remarques
Par défaut, toute classe en TypeScript a un constructeur par
défaut sans paramètre
Pour simplifier la création d’objets, on peut définir un nouveau
constructeur qui prend en paramètre plusieurs attributs de la
classe
Les constructeurs avec TypeScript
On le déclare avec le mot-clé constructor
Il peut contenir la visibilité des attributs si on veut simplifier la
déclaration
H & H: Research and Training 82 / 142
Classe Constructeur
TypeScript
Le constructeur de la classe Personne prenant trois paramètres
public constructor(_num: number, _nom: string, _prenom:
string) {
this._num = _num;
this._nom = _nom;
this._prenom = _prenom;
}
H & H: Research and Training 83 / 142
Classe Constructeur
TypeScript
Le constructeur de la classe Personne prenant trois paramètres
public constructor(_num: number, _nom: string, _prenom:
string) {
this._num = _num;
this._nom = _nom;
this._prenom = _prenom;
}
Pour préserver la cohérence, il faut que le constructeur contrôle la
valeur de l’attribut num
public constructor(_num: number, _nom: string, _prenom:
string) {
this._num = (_num >= 0 ? _num : 0);
this._nom = _nom;
this._prenom = _prenom;
}
H & H: Research and Training 83 / 142
Classe Constructeur
TypeScript
On peut aussi appelé le setter dans le constructeur
public constructor(_num: number, _nom: string,
_prenom: string) {
this.num = _num;
this._nom = _nom;
this._prenom = _prenom;
}
H & H: Research and Training 84 / 142
Classe Constructeur
TypeScript
Dans file.ts, la ligne suivante est soulignée en rouge
let personne: Personne = new Personne();
H & H: Research and Training 85 / 142
Classe Constructeur
TypeScript
Dans file.ts, la ligne suivante est soulignée en rouge
let personne: Personne = new Personne();
Explication
Le constructeur par défaut a été écrasé (il n’existe plus)
H & H: Research and Training 85 / 142
Classe Constructeur
TypeScript
Dans file.ts, la ligne suivante est soulignée en rouge
let personne: Personne = new Personne();
Explication
Le constructeur par défaut a été écrasé (il n’existe plus)
Comment faire?
TypeScript n’autorise pas la présence de plusieurs constructeurs
(la surcharge)
On peut utiliser soit les valeurs par défaut, soit les paramètres
optionnels
H & H: Research and Training 85 / 142
Classe Constructeur
TypeScript
Le nouveau constructeur avec les paramètres optionnels
public constructor(_num?: number, _nom?: string,
_prenom?: string) {
if(_num)
this.num = _num;
if (_nom)
this._nom = _nom;
if(_prenom)
this._prenom = _prenom;
}
H & H: Research and Training 86 / 142
Classe Constructeur
TypeScript
Pour tester
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = -1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne);
let personne2: Personne = new Personne(2, ’bob’, ’mike’);
console.log(personne2);
H & H: Research and Training 87 / 142
Classe Constructeur
TypeScript
Pour tester
import { Personne } from ’./personne’;
let personne: Personne = new Personne();
personne.num = -1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne);
let personne2: Personne = new Personne(2, ’bob’, ’mike’);
console.log(personne2);
En exécutant, le résultat est :
Personne { num: 0, nom: ’wick’, prenom: ’john’ }
Personne { num: 2, nom: ’bob’, prenom: ’mike’ }
H & H: Research and Training 87 / 142
Classe Constructeur
TypeScript
TypeScript nous offre la possibilité de fusionner la déclaration des attributs et le
constructeur
public constructor(private _num?: number,
private _nom?: string,
private _prenom?: string) {
}
H & H: Research and Training 88 / 142
Classe Constructeur
TypeScript
TypeScript nous offre la possibilité de fusionner la déclaration des attributs et le
constructeur
public constructor(private _num?: number,
private _nom?: string,
private _prenom?: string) {
}
En exécutant, le résultat est le même
Personne { num: 0, nom: ’wick’, prenom: ’john’ }
Personne { num: 2, nom: ’bob’, prenom: ’mike’ }
H & H: Research and Training 88 / 142
Classe Attributs et méthodes statiques
TypeScript
Récapitulatif
Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes
valeurs
H & H: Research and Training 89 / 142
Classe Attributs et méthodes statiques
TypeScript
Récapitulatif
Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes
valeurs
Hypothèse
Et si nous voulions qu’un attribut ait une valeur partagée par toutes les instances (par
exemple, le nombre d’objets instanciés de la classe Personne)
H & H: Research and Training 89 / 142
Classe Attributs et méthodes statiques
TypeScript
Récapitulatif
Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes
valeurs
Hypothèse
Et si nous voulions qu’un attribut ait une valeur partagée par toutes les instances (par
exemple, le nombre d’objets instanciés de la classe Personne)
Solution : attribut statique ou attribut de classe
Un attribut dont la valeur est partagée par toutes les instances de la classe.
H & H: Research and Training 89 / 142
Classe Attributs et méthodes statiques
TypeScript
Exemple
Si on voulait créer un attribut contenant le nombre d’objets créés à
partir de la classe Personne
Notre attribut doit être déclaré static, sinon chaque objet
pourrait avoir sa propre valeur pour cet attribut
H & H: Research and Training 90 / 142
Classe Attributs et méthodes statiques
TypeScript
Ajoutons un attribut statique nbrPersonnes à la liste d’attributs de la
classe Personne
private static _nbrPersonnes: number = 0;
H & H: Research and Training 91 / 142
Classe Attributs et méthodes statiques
TypeScript
Ajoutons un attribut statique nbrPersonnes à la liste d’attributs de la
classe Personne
private static _nbrPersonnes: number = 0;
Incrémentons notre compteur de personnes dans les constructeurs
public constructor(private _num?: number,
private _nom?: string,
private _prenom?: string) {
Personne._nbrPersonnes++;
}
H & H: Research and Training 91 / 142
Classe Attributs et méthodes statiques
TypeScript
Créons un getter pour l’attribut static nbrPersonnes
public static get nbrPersonnes() {
return Personne._nbrPersonnes;
}
H & H: Research and Training 92 / 142
Classe Attributs et méthodes statiques
TypeScript
Créons un getter pour l’attribut static nbrPersonnes
public static get nbrPersonnes() {
return Personne._nbrPersonnes;
}
Testons cela dans file.ts
import { Personne } from ’./personne’;
console.log(Personne.nbrPersonnes);
// affiche 0
let personne: Personne = new Personne();
personne.num = -1;
personne.nom = "wick";
personne.prenom = "john";
console.log(Personne.nbrPersonnes);
// affiche 1
let personne2: Personne = new Personne(2, ’bob’, ’mike’);
console.log(Personne.nbrPersonnes);
// affiche 2
H & H: Research and Training 92 / 142
Classe Attributs et méthodes statiques
TypeScript
Exercice
Définir une classe Adresse avec trois attributs privés rue,
codePostal et ville de type chaı̂ne de caractère
Définir un constructeur avec trois paramètres, les getters et
setters
Dans la classe Personne, ajouter un attribut adresse (de type
Adresse) et définir un nouveau constructeur à quatre paramètres
et le getter et le setter de ce nouvel attribut
Dans file.ts, créer deux objets : un objet adresse (de type
Adresse) et personne (de type Personne) prenant comme
adresse l’objet adresse
Afficher tous les attributs de l’objet personne
H & H: Research and Training 93 / 142
Héritage
TypeScript
L’héritage, quand?
Lorsque deux ou plusieurs classes partagent plusieurs attributs
(et méthodes)
Lorsqu’une Classe1 est (une sorte de ) Classe2
H & H: Research and Training 94 / 142
Héritage
TypeScript
L’héritage, quand?
Lorsque deux ou plusieurs classes partagent plusieurs attributs
(et méthodes)
Lorsqu’une Classe1 est (une sorte de ) Classe2
Forme générale
class ClasseFille extends ClasseMère
{
// code
};
H & H: Research and Training 94 / 142
Héritage
TypeScript
Exemple
Un enseignant a un numéro, un nom, un prénom et un salaire
H & H: Research and Training 95 / 142
Héritage
TypeScript
Exemple
Un enseignant a un numéro, un nom, un prénom et un salaire
Un étudiant a aussi un numéro, un nom, un prénom et un niveau
H & H: Research and Training 95 / 142
Héritage
TypeScript
Exemple
Un enseignant a un numéro, un nom, un prénom et un salaire
Un étudiant a aussi un numéro, un nom, un prénom et un niveau
Sémantiquement, enseignant et étudiant sont une sorte de personne
H & H: Research and Training 95 / 142
Héritage
TypeScript
Exemple
Un enseignant a un numéro, un nom, un prénom et un salaire
Un étudiant a aussi un numéro, un nom, un prénom et un niveau
Sémantiquement, enseignant et étudiant sont une sorte de personne
En plus, les deux partagent plusieurs attributs tels que numéro, nom et
prénom
H & H: Research and Training 95 / 142
Héritage
TypeScript
Exemple
Un enseignant a un numéro, un nom, un prénom et un salaire
Un étudiant a aussi un numéro, un nom, un prénom et un niveau
Sémantiquement, enseignant et étudiant sont une sorte de personne
En plus, les deux partagent plusieurs attributs tels que numéro, nom et
prénom
Donc, on peut peut utiliser la classe Personne puisqu’elle contient tous
les attributs numéro, nom et prénom
H & H: Research and Training 95 / 142
Héritage
TypeScript
Exemple
Un enseignant a un numéro, un nom, un prénom et un salaire
Un étudiant a aussi un numéro, un nom, un prénom et un niveau
Sémantiquement, enseignant et étudiant sont une sorte de personne
En plus, les deux partagent plusieurs attributs tels que numéro, nom et
prénom
Donc, on peut peut utiliser la classe Personne puisqu’elle contient tous
les attributs numéro, nom et prénom
Les classes Étudiant et Enseignant hériteront donc (extends) de
la classe Personne
H & H: Research and Training 95 / 142
Héritage
TypeScript
Particularité du langage TypeScript
Une classe ne peut hériter que d’une seule classe
L’héritage multiple est donc non-autorisé.
H & H: Research and Training 96 / 142
Héritage
TypeScript
Préparons la classe Enseignant
import { Personne } from "./personne";
export class Enseignant extends Personne {
}
H & H: Research and Training 97 / 142
Héritage
TypeScript
Préparons la classe Enseignant
import { Personne } from "./personne";
export class Enseignant extends Personne {
}
Préparons la classe Etudiant
import { Personne } from "./personne";
export class Etudiant extends Personne {
}
extends est le mot-clé à utiliser pour définir une relation d’héritage
entre deux classes
H & H: Research and Training 97 / 142
Héritage
TypeScript
Ensuite
Créer un attribut niveau dans la classe Etudiant ainsi que ses
getter et setter
Créer un attribut salaire dans la classe Enseignant ainsi que
ses getter et setter
H & H: Research and Training 98 / 142
Héritage
TypeScript
Pour créer un objet de type Enseignant
import { Enseignant } from ’./enseignant’;
let enseignant: Enseignant = new Enseignant();
enseignant.num = 3;
enseignant.nom = "green";
enseignant.prenom = "jonas";
enseignant.salaire = 1700;
console.log(enseignant);
H & H: Research and Training 99 / 142
Héritage
TypeScript
Pour créer un objet de type Enseignant
import { Enseignant } from ’./enseignant’;
let enseignant: Enseignant = new Enseignant();
enseignant.num = 3;
enseignant.nom = "green";
enseignant.prenom = "jonas";
enseignant.salaire = 1700;
console.log(enseignant);
En exécutant, le résultat est :
Enseignant { _num: 3, _nom: ’green’, _prenom: ’jonas
’, _salaire: 1700 }
H & H: Research and Training 99 / 142
Héritage
TypeScript
TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il
existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le
constructeur de la classe mère
constructor(_num?: number,
_nom?: string,
_prenom?: string,
private _salaire?: number) {
super(_num, _nom, _prenom);
}
H & H: Research and Training 100 / 142
Héritage
TypeScript
TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il
existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le
constructeur de la classe mère
constructor(_num?: number,
_nom?: string,
_prenom?: string,
private _salaire?: number) {
super(_num, _nom, _prenom);
}
super() fait appel au constructeur de la classe mère
H & H: Research and Training 100 / 142
Héritage
TypeScript
TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il
existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le
constructeur de la classe mère
constructor(_num?: number,
_nom?: string,
_prenom?: string,
private _salaire?: number) {
super(_num, _nom, _prenom);
}
super() fait appel au constructeur de la classe mère
Maintenant, on peut créer un enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "green", "jonas"
, 1700);
H & H: Research and Training 100 / 142
Héritage
TypeScript
TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il
existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le
constructeur de la classe mère
constructor(_num?: number,
_nom?: string,
_prenom?: string,
private _salaire?: number) {
super(_num, _nom, _prenom);
}
super() fait appel au constructeur de la classe mère
Maintenant, on peut créer un enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "green", "jonas"
, 1700);
Refaire la même chose pour Etudiant
H & H: Research and Training 100 / 142
Héritage
TypeScript
À partir de la classe Enseignant
On ne peut avoir accès direct à un attribut de la classe mère
C’est-à-dire, on ne peut faire this. num car les attributs ont une
visibilité private
Pour modifier la valeur d’un attribut privé de la classe mère, il faut
soit utiliser les getters/setters
soit mettre la visibilité des attributs de la classe mère à protected
H & H: Research and Training 101 / 142
Héritage
TypeScript
On peut créer un objet de la classe Enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
H & H: Research and Training 102 / 142
Héritage
TypeScript
On peut créer un objet de la classe Enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
Ou ainsi
let enseignant: Personne = new Enseignant(3, "green"
, "jonas", 1700);
H & H: Research and Training 102 / 142
Héritage
TypeScript
On peut créer un objet de la classe Enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
Ou ainsi
let enseignant: Personne = new Enseignant(3, "green"
, "jonas", 1700);
Ceci est faux
let enseignant: Enseignant = new Personne(3, "green"
, "jonas");
H & H: Research and Training 102 / 142
Héritage
TypeScript
Remarque
Pour connaı̂tre la classe d’un objet, on peut utiliser le mot-clé instanceof
H & H: Research and Training 103 / 142
Héritage
TypeScript
Remarque
Pour connaı̂tre la classe d’un objet, on peut utiliser le mot-clé instanceof
Exemple
let enseignant: Personne = new Enseignant(3, "green", "jonas",
1700);
console.log(enseignant instanceof Enseignant);
// affiche true
console.log(enseignant instanceof Personne);
// affiche true
console.log(personne instanceof Enseignant);
// affiche false
H & H: Research and Training 103 / 142
Héritage
TypeScript
Exercice
1 Créer un objet de type Etudiant, un deuxième de type Enseignant et un
dernier de type Personne stocker les tous dans un seul tableau.
2 Parcourir le tableau et afficher pour chacun soit le numero s’il est personne, soit
le salaire s’il est enseignant ou soit le niveau s’il est étudiant.
H & H: Research and Training 104 / 142
Héritage
TypeScript
Exercice
1 Créer un objet de type Etudiant, un deuxième de type Enseignant et un
dernier de type Personne stocker les tous dans un seul tableau.
2 Parcourir le tableau et afficher pour chacun soit le numero s’il est personne, soit
le salaire s’il est enseignant ou soit le niveau s’il est étudiant.
Pour parcourir un tableau, on peut faire
let personnes: Array<Personne> = [personne, enseignant,
etudiant];
for(let p of personnes) {
}
H & H: Research and Training 104 / 142
Héritage
TypeScript
Solution
let personnes: Array<Personne> = [personne,
enseignant, etudiant];
for(let p of personnes) {
if(p instanceof Enseignant)
console.log(p.salaire);
else if (p instanceof Etudiant)
console.log(p.niveau)
else
console.log(p.num);
}
H & H: Research and Training 105 / 142
Classe et méthode abstraites
TypeScript
Classe abstraite
C’est une classe qu’on ne peut instancier
On la déclare avec le mot-clé abstract
H & H: Research and Training 106 / 142
Classe et méthode abstraites
TypeScript
Classe abstraite
C’est une classe qu’on ne peut instancier
On la déclare avec le mot-clé abstract
Si on déclare la classe Personne abstraite
export abstract class Personne {
...
}
H & H: Research and Training 106 / 142
Classe et méthode abstraites
TypeScript
Classe abstraite
C’est une classe qu’on ne peut instancier
On la déclare avec le mot-clé abstract
Si on déclare la classe Personne abstraite
export abstract class Personne {
...
}
Tout ce code sera souligné en rouge
let personne: Personne = new Personne();
...
let personne2: Personne = new Personne(2, ’bob’, ’mike’);
H & H: Research and Training 106 / 142
Classe et méthode abstraites
TypeScript
Méthode abstraite
C’est une méthode non implémentée (sans code)
Une méthode abstraite doit être déclarée dans une classe abstraite
Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite
H & H: Research and Training 107 / 142
Classe et méthode abstraites
TypeScript
Méthode abstraite
C’est une méthode non implémentée (sans code)
Une méthode abstraite doit être déclarée dans une classe abstraite
Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite
Déclarons une méthode abstraite afficherDetails() dans Personne
abstract afficherDetails(): void ;
H & H: Research and Training 107 / 142
Classe et méthode abstraites
TypeScript
Méthode abstraite
C’est une méthode non implémentée (sans code)
Une méthode abstraite doit être déclarée dans une classe abstraite
Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite
Déclarons une méthode abstraite afficherDetails() dans Personne
abstract afficherDetails(): void ;
Remarque
La méthode afficherDetails() dans Personne est soulignée en rouge car la classe
doit être déclarée abstraite
En déclarant la classe Personne abstraite, les deux classes Etudiant et Enseignant
sont soulignées en rouge car elles doivent implémenter les méthodes abstraites de
Personne
H & H: Research and Training 107 / 142
Classe et méthode abstraites
Pour implémenter la méthode abstraite
Placer le curseur sur le nom de la classe
Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class
H & H: Research and Training 108 / 142
Classe et méthode abstraites
Pour implémenter la méthode abstraite
Placer le curseur sur le nom de la classe
Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class
Le code généré
afficherDetails(): void {
throw new Error("Method not implemented.");
}
H & H: Research and Training 108 / 142
Classe et méthode abstraites
Pour implémenter la méthode abstraite
Placer le curseur sur le nom de la classe
Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class
Le code généré
afficherDetails(): void {
throw new Error("Method not implemented.");
}
Remplaçons le code généré dans Etudiant par
afficherDetails(): void {
console.log(this.nom + " " + this.prenom + " " + this.niveau);
}
H & H: Research and Training 108 / 142
Classe et méthode abstraites
Pour implémenter la méthode abstraite
Placer le curseur sur le nom de la classe
Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class
Le code généré
afficherDetails(): void {
throw new Error("Method not implemented.");
}
Remplaçons le code généré dans Etudiant par
afficherDetails(): void {
console.log(this.nom + " " + this.prenom + " " + this.niveau);
}
Et dans Enseignant par
afficherDetails(): void {
console.log(this.nom + " " + this.prenom + " " + this.salaire);
}
H & H: Research and Training 108 / 142
Classe et méthode abstraites
TypeScript
Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
enseignant.afficherDetails();
H & H: Research and Training 109 / 142
Classe et méthode abstraites
TypeScript
Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
enseignant.afficherDetails();
En exécutant, le résultat est :
green jonas 1700
H & H: Research and Training 109 / 142
Interface
TypeScript
En TypeScript
Une classe ne peut hériter que d’une seule classe
Mais elle peut hériter de plusieurs interfaces
H & H: Research and Training 110 / 142
Interface
TypeScript
En TypeScript
Une classe ne peut hériter que d’une seule classe
Mais elle peut hériter de plusieurs interfaces
Une interface
déclarée avec le mot-clé interface
comme une classe complètement abstraite (impossible de
l’instancier) dont : toutes les méthodes sont abstraites
un protocole, un contrat : toute classe qui hérite d’une interface
doit implémenter toutes ses méthodes
H & H: Research and Training 110 / 142
Interface
TypeScript
Définissons l’interface IMiseEnForme dans i-mise-en-forme.ts
export interface IMiseEnForme {
afficherNomMajuscule(): void;
afficherPrenomMajuscule() : void;
}
H & H: Research and Training 111 / 142
Interface
TypeScript
Définissons l’interface IMiseEnForme dans i-mise-en-forme.ts
export interface IMiseEnForme {
afficherNomMajuscule(): void;
afficherPrenomMajuscule() : void;
}
Pour hériter d’une interface, on utilise le mot-clé implements
export abstract class Personne implements IMiseEnForme {
...
}
H & H: Research and Training 111 / 142
Interface
TypeScript
La classe Personne est soulignée en rouge
Placer le curseur sur la classe Personne
Dans le menu afficher, cliquer sur Quick Fix puis Add
inherited abstract class
H & H: Research and Training 112 / 142
Interface
TypeScript
La classe Personne est soulignée en rouge
Placer le curseur sur la classe Personne
Dans le menu afficher, cliquer sur Quick Fix puis Add
inherited abstract class
Le code généré
afficherNomMajuscule(): void {
throw new Error("Method not implemented.");
}
afficherPrenomMajuscule(): void {
throw new Error("Method not implemented.");
}
H & H: Research and Training 112 / 142
Interface
TypeScript
Modifions le code de deux méthodes générées
afficherNomMajuscule(): void {
console.log(this.nom.toUpperCase());
}
afficherPrenomMajuscule(): void {
console.log(this.prenom.toUpperCase());
}
H & H: Research and Training 113 / 142
Interface
TypeScript
Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
enseignant.afficherNomMajuscule();
enseignant.afficherPrenomMajuscule();
H & H: Research and Training 114 / 142
Interface
TypeScript
Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
enseignant.afficherNomMajuscule();
enseignant.afficherPrenomMajuscule();
En exécutant, le résultat est :
GREEN
JONAS
H & H: Research and Training 114 / 142
Interface
TypeScript
Remarque
Une interface peut hériter de plusieurs autres interfaces (mais pas
d’une classe)
Pour cela, il faut utiliser le mot-clé extends et pas implements
car une interface n’implémente jamais de méthodes.
H & H: Research and Training 115 / 142
Interface
TypeScript
Une deuxième utilisation
En TypeScript, une interface peut être utilisée comme une classe
Model de plusieurs autres interfaces (mais pas d’une classe)
Elle contient des attributs (qui sont par définition publiques) et des
méthodes (abstraites)
H & H: Research and Training 116 / 142
Interface
TypeScript
Une deuxième utilisation
En TypeScript, une interface peut être utilisée comme une classe
Model de plusieurs autres interfaces (mais pas d’une classe)
Elle contient des attributs (qui sont par définition publiques) et des
méthodes (abstraites)
Exemple
export interface Person {
num: number;
nom: string;
prenom: string;
}
H & H: Research and Training 116 / 142
Interface
TypeScript
Impossible d’instancier cette interface avec l’opérateur new, mais on
peut utiliser les objets JavaScript
let person: Person = {
num: 1000,
nom: ’turing’,
prenom: ’alan’
};
console.log(person);
// affiche { num: 1000, nom: ’turing’, prenom: ’alan’ }
H & H: Research and Training 117 / 142
Interface
TypeScript
Impossible d’instancier cette interface avec l’opérateur new, mais on
peut utiliser les objets JavaScript
let person: Person = {
num: 1000,
nom: ’turing’,
prenom: ’alan’
};
console.log(person);
// affiche { num: 1000, nom: ’turing’, prenom: ’alan’ }
On peut rendre les attributs optionnels
export interface Person {
num?: number;
nom?: string;
prenom?: string;
}
H & H: Research and Training 117 / 142
Interface
TypeScript
Ainsi on peut faire
let person: Person = {
nom: ’turing’,
};
console.log(person)
// affiche { nom: ’turing’ }
H & H: Research and Training 118 / 142
Interface
TypeScript
Ainsi on peut faire
let person: Person = {
nom: ’turing’,
};
console.log(person)
// affiche { nom: ’turing’ }
Pour la suite, gardons l’attribut nom obligatoire
export interface Person {
num?: number;
nom: string;
prenom?: string;
}
H & H: Research and Training 118 / 142
Interface
TypeScript
Duck typing
Un concept un peu proche du polymorphisme
Il se base sur une série d’attributs et de méthodes attendus.
L’objet est considéré valide quel que soit sa classe s’il respecte les
attributs et les méthodes attendus.
H & H: Research and Training 119 / 142
Interface
TypeScript
Duck typing
Un concept un peu proche du polymorphisme
Il se base sur une série d’attributs et de méthodes attendus.
L’objet est considéré valide quel que soit sa classe s’il respecte les
attributs et les méthodes attendus.
Exemple : considérons la fonction afficherNom() définie dans
file.ts
function afficherNom(p: Person){
console.log(p.nom)
}
H & H: Research and Training 119 / 142
Interface
TypeScript
Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché
afficherNom(person);
// affiche turing
afficherNom(personne);
// affiche wick
H & H: Research and Training 120 / 142
Interface
TypeScript
Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché
afficherNom(person);
// affiche turing
afficherNom(personne);
// affiche wick
Ceci est aussi correcte car alien a un attribut nom
let alien = { couleur: ’blanc’, nom: ’white’ };
afficherNom(alien);
// affiche white
H & H: Research and Training 120 / 142
Interface
TypeScript
Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché
afficherNom(person);
// affiche turing
afficherNom(personne);
// affiche wick
Ceci est aussi correcte car alien a un attribut nom
let alien = { couleur: ’blanc’, nom: ’white’ };
afficherNom(alien);
// affiche white
Ceci génère une erreur car voiture n’a pas d’attribut nom
let voiture = { marque: ’ford’, modele: ’fiesta’, num: 100000};
afficherNom(voiture);
H & H: Research and Training 120 / 142
Décorateur
TypeScript
Décorateur
L’équivalent d’annotations en Java et php
Méta-programmation (modification des informations/comportement sur
un objet/classe)
Utilisé avec le préfixe @
H & H: Research and Training 121 / 142
Décorateur
TypeScript
Décorateur
L’équivalent d’annotations en Java et php
Méta-programmation (modification des informations/comportement sur
un objet/classe)
Utilisé avec le préfixe @
Ajoutons le décorateur @f() à afficherDetails() dans Enseignant
@f()
afficherDetails(): void {
console.log(this.nom + " " + this.prenom + " " + this.
salaire);
}
H & H: Research and Training 121 / 142
Décorateur
TypeScript
Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une
fonction)
export function f() {
return function(a,b,c){
console.log(’before afficherDetails()’);
}
}
H & H: Research and Training 122 / 142
Décorateur
TypeScript
Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une
fonction)
export function f() {
return function(a,b,c){
console.log(’before afficherDetails()’);
}
}
Testons maintenant le code suivant et vérifions que la fonction associée au décorateur a
bien été exécutée (ajouter l’option --experimentalDecorators à la commande de
transpilation)
let enseignant: Enseignant = new Enseignant(3, "green", "jonas", 1700);
enseignant.afficherDetails();
H & H: Research and Training 122 / 142
Décorateur
TypeScript
Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une
fonction)
export function f() {
return function(a,b,c){
console.log(’before afficherDetails()’);
}
}
Testons maintenant le code suivant et vérifions que la fonction associée au décorateur a
bien été exécutée (ajouter l’option --experimentalDecorators à la commande de
transpilation)
let enseignant: Enseignant = new Enseignant(3, "green", "jonas", 1700);
enseignant.afficherDetails();
Le résultat est :
before afficherDetails()
green jonas 1700
H & H: Research and Training 122 / 142
Généricité
TypeScript
Généricité
Un concept défini dans tous les LOO avec < ... >
Elle permet de définir des fonctions, classes, interfaces qui
s’adaptent avec plusieurs types
H & H: Research and Training 123 / 142
Généricité
TypeScript
Exemple
si on a besoin d’une classe dont les méthodes effectuent les
mêmes opérations quel que soit le type d’attributs
somme pour entiers ou réels,
concaténation pour chaı̂nes de caractères,
ou logique pour booléens...
...
Impossible sans définir plusieurs classes (une pour chaque
type)
H & H: Research and Training 124 / 142
Généricité
TypeScript
Solution avec la généricité
export class Operation<T>{
constructor(private var1: T, private var2: T) { }
public plus() {
if (typeof this.var1 == ’string’) {
return this.var1 + this.var2;
}
else if (typeof this.var1 == ’number’ && typeof this.var2 == ’
number’) {
return this.var1 + this.var2;
}
else if (typeof this.var1 == ’boolean’ && typeof this.var2 == ’
boolean’) {
return this.var1 || this.var2;
}
else {
throw "error"
}
}
}
H & H: Research and Training 125 / 142
Généricité
TypeScript
Nous pouvons donc utiliser la même méthode qui fait la même chose pour des types
différents
let operation1: Operation<number> = new Operation(5, 3);
console.log(operation1.plus());
// affiche 8
let operation2: Operation<string> = new Operation("bon", "jour");
console.log(operation2.plus());
// affiche bonjour
let operation3: Operation<number> = new Operation(5.2, 3.8);
console.log(operation3.plus());
// affiche 9
let operation4: Operation<boolean> = new Operation(true, false);
console.log(operation4.plus());
// affiche true
H & H: Research and Training 126 / 142
Map
TypeScript
Map (dictionnaire)
Type fonctionnant avec un couple (clé,valeur)
La clé doit être unique
Chaque élément est appelé entrée (entry)
Les éléments sont stockés et récupérés dans l’ordre d’insertion
Disponible depuis ES5 puis modifié dans ES6
H & H: Research and Training 127 / 142
Map
TypeScript
Map (dictionnaire)
Type fonctionnant avec un couple (clé,valeur)
La clé doit être unique
Chaque élément est appelé entrée (entry)
Les éléments sont stockés et récupérés dans l’ordre d’insertion
Disponible depuis ES5 puis modifié dans ES6
Pour tester, utiliser l’option -t ES6
H & H: Research and Training 127 / 142
Map
TypeScript
Pour créer un Map
let map: Map<string, number> = new Map([
[’php’, 17],
[’java’, 10],
[’c’, 12]
]);
console.log(map);
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12 }
H & H: Research and Training 128 / 142
Map
TypeScript
Pour créer un Map
let map: Map<string, number> = new Map([
[’php’, 17],
[’java’, 10],
[’c’, 12]
]);
console.log(map);
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12 }
Ajouter un élément à un Map
map.set(’html’, 18);
H & H: Research and Training 128 / 142
Map
TypeScript
Pour créer un Map
let map: Map<string, number> = new Map([
[’php’, 17],
[’java’, 10],
[’c’, 12]
]);
console.log(map);
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12 }
Ajouter un élément à un Map
map.set(’html’, 18);
Pour ajouter plusieurs éléments à la fois
map.set(’html’, 18)
.set(’css’, 12);
H & H: Research and Training 128 / 142
Map
TypeScript
Si la clé existe déjà, la valeur sera remplacée
console.log(map.set(’html’, 20));
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 }
H & H: Research and Training 129 / 142
Map
TypeScript
Si la clé existe déjà, la valeur sera remplacée
console.log(map.set(’html’, 20));
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 }
Pour récupérer la valeur associée à une clé
console.log(map.get(’php’));
// affiche 17
H & H: Research and Training 129 / 142
Map
TypeScript
Si la clé existe déjà, la valeur sera remplacée
console.log(map.set(’html’, 20));
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 }
Pour récupérer la valeur associée à une clé
console.log(map.get(’php’));
// affiche 17
Pour vérifier l’existence d’une clé
console.log(map.has(’php’));
// affiche true
H & H: Research and Training 129 / 142
Map
TypeScript
Si la clé existe déjà, la valeur sera remplacée
console.log(map.set(’html’, 20));
// affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 }
Pour récupérer la valeur associée à une clé
console.log(map.get(’php’));
// affiche 17
Pour vérifier l’existence d’une clé
console.log(map.has(’php’));
// affiche true
Pour supprimer un élément selon la clé
map.delete(’php’);
H & H: Research and Training 129 / 142
Map
TypeScript
Pour récupérer la liste des clés d’un Map
console.log(map.keys());
// affiche [Map Iterator] { ’java’, ’c’, ’html’, ’css’ }
H & H: Research and Training 130 / 142
Map
TypeScript
Pour récupérer la liste des clés d’un Map
console.log(map.keys());
// affiche [Map Iterator] { ’java’, ’c’, ’html’, ’css’ }
Pour récupérer la liste des valeurs d’un Map
console.log(map.values());
// affiche [Map Iterator] { 10, 12, 20, 12 }
H & H: Research and Training 130 / 142
Map
TypeScript
Pour récupérer la liste des clés d’un Map
console.log(map.keys());
// affiche [Map Iterator] { ’java’, ’c’, ’html’, ’css’ }
Pour récupérer la liste des valeurs d’un Map
console.log(map.values());
// affiche [Map Iterator] { 10, 12, 20, 12 }
Pour récupérer la liste des entrées d’un Map
console.log(map.entries());
/* affiche
[Map Entries] {
[ ’java’, 10 ],
[ ’c’, 12 ],
[ ’html’, 20 ],
[ ’css’, 12 ]
}
*/
H & H: Research and Training 130 / 142
Map
TypeScript
Pour parcourir un Map, on peut utiliser entries() (solution ES5)
for (let elt of map.entries())
console.log(elt[0] + " " + elt[1]);
/* affiche
java 10
c 12
html 20
css 12
*/
H & H: Research and Training 131 / 142
Map
TypeScript
Pour parcourir un Map, on peut utiliser entries() (solution ES5)
for (let elt of map.entries())
console.log(elt[0] + " " + elt[1]);
/* affiche
java 10
c 12
html 20
css 12
*/
Depuis ES6, on peut faire
for (let [key, value] of map) {
console.log(key, value);
}
/* affiche
java 10
c 12
html 20
css 12
*/
H & H: Research and Training 131 / 142
Map
TypeScript
On peut le faire aussi avec keys()
for (let key of map.keys()) {
console.log(key + " " + map.get(key));
}
/* affiche
java 10
c 12
html 20
css 12
*/
H & H: Research and Training 132 / 142
Map
TypeScript
Une deuxième solution consiste à utiliser forEach (affiche
seulement les valeurs)
map.forEach(elt => console.log(elt));
/* affiche
10
12
20
12
*/
H & H: Research and Training 133 / 142
Map
TypeScript
On peut aussi définir une méthode et l’appeler dans forEach (affiche
seulement les valeurs)
map.forEach(elt => afficher(elt));
function afficher(elt) {
console.log(elt)
}
H & H: Research and Training 134 / 142
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf
INF355_Lecon2.pdf

Contenu connexe

Similaire à INF355_Lecon2.pdf

DartttttttttttttttttttttttversionFinal.pdf
DartttttttttttttttttttttttversionFinal.pdfDartttttttttttttttttttttttversionFinal.pdf
DartttttttttttttttttttttttversionFinal.pdfzoulaikhibenaachourn
 
Cours langage c
Cours langage cCours langage c
Cours langage ccoursuniv
 
Partie1 TypeScript
Partie1 TypeScriptPartie1 TypeScript
Partie1 TypeScriptHabib Ayad
 
Cours c#
Cours c#Cours c#
Cours c#zan
 
Découvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCLDécouvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCLDotNetHub
 
Introduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El HassaniIntroduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El HassaniShellmates
 
eExercices corrigesdivers
eExercices corrigesdiverseExercices corrigesdivers
eExercices corrigesdiversHajar Yazine
 
Exercicescorrigesdivers
ExercicescorrigesdiversExercicescorrigesdivers
ExercicescorrigesdiversKarim Amane
 
Développement Web- PHP (partie I).pdf
Développement Web- PHP (partie I).pdfDéveloppement Web- PHP (partie I).pdf
Développement Web- PHP (partie I).pdfYasushiTsubakik
 
Langage de Programmation.pdf
Langage de Programmation.pdfLangage de Programmation.pdf
Langage de Programmation.pdfAboubacarDiarra10
 
Les fondamentaux de langage C#
Les fondamentaux de langage C#Les fondamentaux de langage C#
Les fondamentaux de langage C#Youness Boukouchi
 
seance4-1 php.ppt
seance4-1 php.pptseance4-1 php.ppt
seance4-1 php.pptAmineReal
 
Les bases du langage java
Les bases du langage javaLes bases du langage java
Les bases du langage javakrymo
 
Ch5-les tableaux et les pointeurs.pdf
Ch5-les tableaux et les pointeurs.pdfCh5-les tableaux et les pointeurs.pdf
Ch5-les tableaux et les pointeurs.pdfFadouaBouafifSamoud
 
Formation Langage c.pptx
Formation Langage c.pptxFormation Langage c.pptx
Formation Langage c.pptxValdy Ngouabira
 

Similaire à INF355_Lecon2.pdf (20)

Langage Perl
Langage PerlLangage Perl
Langage Perl
 
C++ 11/14
C++ 11/14C++ 11/14
C++ 11/14
 
DartttttttttttttttttttttttversionFinal.pdf
DartttttttttttttttttttttttversionFinal.pdfDartttttttttttttttttttttttversionFinal.pdf
DartttttttttttttttttttttttversionFinal.pdf
 
Cours langage c
Cours langage cCours langage c
Cours langage c
 
Partie1 TypeScript
Partie1 TypeScriptPartie1 TypeScript
Partie1 TypeScript
 
Cours c#
Cours c#Cours c#
Cours c#
 
Découvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCLDécouvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCL
 
Introduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El HassaniIntroduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El Hassani
 
eExercices corrigesdivers
eExercices corrigesdiverseExercices corrigesdivers
eExercices corrigesdivers
 
Exercicescorrigesdivers
ExercicescorrigesdiversExercicescorrigesdivers
Exercicescorrigesdivers
 
Theme 6
Theme 6Theme 6
Theme 6
 
Développement Web- PHP (partie I).pdf
Développement Web- PHP (partie I).pdfDéveloppement Web- PHP (partie I).pdf
Développement Web- PHP (partie I).pdf
 
Langage de Programmation.pdf
Langage de Programmation.pdfLangage de Programmation.pdf
Langage de Programmation.pdf
 
Les fondamentaux de langage C#
Les fondamentaux de langage C#Les fondamentaux de langage C#
Les fondamentaux de langage C#
 
seance4-1 php.ppt
seance4-1 php.pptseance4-1 php.ppt
seance4-1 php.ppt
 
Les bases du langage java
Les bases du langage javaLes bases du langage java
Les bases du langage java
 
Ch5-les tableaux et les pointeurs.pdf
Ch5-les tableaux et les pointeurs.pdfCh5-les tableaux et les pointeurs.pdf
Ch5-les tableaux et les pointeurs.pdf
 
Formation Langage c.pptx
Formation Langage c.pptxFormation Langage c.pptx
Formation Langage c.pptx
 
POO-chapitre6.pptx
POO-chapitre6.pptxPOO-chapitre6.pptx
POO-chapitre6.pptx
 
Language-C.ppt
Language-C.pptLanguage-C.ppt
Language-C.ppt
 

INF355_Lecon2.pdf

  • 1. TypeScript pour Angular Achref El Mouelhi Docteur de l’université d’Aix-Marseille Chercheur en programmation par contrainte (IA) Ingénieur en génie logiciel elmouelhi.achref@gmail.com H & H: Research and Training 1 / 142
  • 2. Plan 1 Introduction 2 Variable Déclaration Union de type Variable locale Cast Conversion Alias de type Nullish Coalescing (Coalescence nulle) 3 Constante H & H: Research and Training 2 / 142
  • 3. Plan 4 Fonction Déclaration et appel Paramètres par défaut Paramètres optionnels Paramètres restants Paramètres à plusieurs types autorisés Paramètres en lecture seule Fonctions fléchées (arrow function) 5 Concept de décomposition (spread) 6 import / export H & H: Research and Training 3 / 142
  • 4. Plan 7 Classe Rappel Syntaxe Setter Getter Constructeur Attributs et méthodes statiques 8 Héritage 9 Classe et méthode abstraites 10 Interface 11 Décorateur 12 Généricité 13 Map 14 Set H & H: Research and Training 4 / 142
  • 5. Introduction TypeScript ECMAScript ensemble de normes sur les langages de programmation de type script (JavaScript, ActionScript...) standardisée par Ecma International (European Computer Manufacturers Association) depuis 1994 H & H: Research and Training 5 / 142
  • 6. Introduction TypeScript ECMAScript ensemble de normes sur les langages de programmation de type script (JavaScript, ActionScript...) standardisée par Ecma International (European Computer Manufacturers Association) depuis 1994 Quelques versions ECMAScript version 5 (ES5) ou ES 2009 ECMAScript version 6 (ES6) ou ES 2015 (compatible avec les navigateurs modernes) H & H: Research and Training 5 / 142
  • 7. Introduction TypeScript TypeScript langage de programmation procédural et orienté objet supportant le typage statique, dynamique et générique open-source créé par Anders Hejlsberg (inventeur de C#) de MicroSoft utilisé par Angular (Google) H & H: Research and Training 6 / 142
  • 8. Introduction TypeScript TypeScript : sur-couche de ES6 ajoutant typage meilleure gestion de module (à ne pas confondre avec les modules Angular) JavaScript (ES5) ES6 TypeScript H & H: Research and Training 7 / 142
  • 9. Introduction TypeScript Le navigateur ne comprend pas le TypeScript Il faut le transcompiler (ou transpiler) en JavaScript file.ts transpiler file.js H & H: Research and Training 8 / 142
  • 10. Introduction TypeScript Comment va t-on procéder dans ce cours? file.ts transpiler file.js exécuter résultat tsc file.ts node file.js tsc file.ts | node file.js Pour consulter la liste d’ptions pour la commande tsc https://www.typescriptlang.org/docs/handbook/compiler-options.html H & H: Research and Training 9 / 142
  • 11. Introduction TypeScript De quoi on a besoin? Node.js pour exécuter la commande node TypeScript pour exécuter la commande tsc H & H: Research and Training 10 / 142
  • 12. Introduction TypeScript Pour Node.js, il faut aller sur https://nodejs.org/en/ choisir la dernière version, télécharger et installer H & H: Research and Training 11 / 142
  • 13. Introduction TypeScript Pour Node.js, il faut aller sur https://nodejs.org/en/ choisir la dernière version, télécharger et installer Pour TypeScript, il faut ouvrir une console (invite de commandes) lancer la commande npm install -g typescript vérifier la version avec la commande tsc -v H & H: Research and Training 11 / 142
  • 14. Introduction TypeScript Quel IDE pour TypeScript (et éventuellement Angular) Microsoft recommande Visual Studio Code code.visualstudio.com/download H & H: Research and Training 12 / 142
  • 15. Variable Déclaration TypeScript Déclarer une variable var nomVariable: typeVariable; H & H: Research and Training 13 / 142
  • 16. Variable Déclaration TypeScript Déclarer une variable var nomVariable: typeVariable; Exemple var x: number; H & H: Research and Training 13 / 142
  • 17. Variable Déclaration TypeScript Déclarer une variable var nomVariable: typeVariable; Exemple var x: number; Initialiser une variable x = 2; H & H: Research and Training 13 / 142
  • 18. Variable Déclaration TypeScript Déclarer une variable var nomVariable: typeVariable; Exemple var x: number; Initialiser une variable x = 2; Déclarer et initialiser une variable var x: number = 2; H & H: Research and Training 13 / 142
  • 19. Variable Déclaration TypeScript Cependant, ceci génère une erreur car une varaible ne change pas de type x = "bonjour"; H & H: Research and Training 14 / 142
  • 20. Variable Déclaration TypeScript Quels types pour les variables en TypeScript? number pour les nombres (entiers, réels, binaires, décimaux, hexadécimaux...) string pour les chaı̂nes de caractère boolean pour les booléens array pour les tableaux non-statiques (taille variable) tuple pour les tableaux statiques (taille et type fixes) object pour les objets any pour les variables pouvant changer de type dans le programme enum pour les énumérations (tableau de constantes) H & H: Research and Training 15 / 142
  • 21. Variable Déclaration TypeScript Quels types pour les variables en TypeScript? number pour les nombres (entiers, réels, binaires, décimaux, hexadécimaux...) string pour les chaı̂nes de caractère boolean pour les booléens array pour les tableaux non-statiques (taille variable) tuple pour les tableaux statiques (taille et type fixes) object pour les objets any pour les variables pouvant changer de type dans le programme enum pour les énumérations (tableau de constantes) Les types undefined et null du JavaScript sont aussi disponibles. H & H: Research and Training 15 / 142
  • 22. Variable Déclaration TypeScript Pour les chaı̂nes de caractères, on peut faire var str1: string = "wick"; var str2: string = ’john’; H & H: Research and Training 16 / 142
  • 23. Variable Déclaration TypeScript Pour les chaı̂nes de caractères, on peut faire var str1: string = "wick"; var str2: string = ’john’; On peut aussi utiliser template strings var str3: string = ‘Bonjour ${ str2 } ${ str1 } Que pensez-vous de TypeScript ? ‘; console.log(str3); // affiche Bonjour john wick Que pensez-vous de TypeScript ? H & H: Research and Training 16 / 142
  • 24. Variable Déclaration TypeScript Pour les chaı̂nes de caractères, on peut faire var str1: string = "wick"; var str2: string = ’john’; On peut aussi utiliser template strings var str3: string = ‘Bonjour ${ str2 } ${ str1 } Que pensez-vous de TypeScript ? ‘; console.log(str3); // affiche Bonjour john wick Que pensez-vous de TypeScript ? L’équivalent de faire var str3: string = "Bonjour " + str2 + " " + str1 + "nQue pensez-vous de TypeScript ?"; H & H: Research and Training 16 / 142
  • 25. Variable Déclaration TypeScript Une première déclaration pour les tableaux var list: number[] = [1, 2, 3]; console.log(list); // affiche [ 1, 2, 3 ] H & H: Research and Training 17 / 142
  • 26. Variable Déclaration TypeScript Une première déclaration pour les tableaux var list: number[] = [1, 2, 3]; console.log(list); // affiche [ 1, 2, 3 ] Une deuxième déclaration var list: Array<number> = new Array(1, 2, 3); console.log(list); // affiche [ 1, 2, 3 ] H & H: Research and Training 17 / 142
  • 27. Variable Déclaration TypeScript Une première déclaration pour les tableaux var list: number[] = [1, 2, 3]; console.log(list); // affiche [ 1, 2, 3 ] Une deuxième déclaration var list: Array<number> = new Array(1, 2, 3); console.log(list); // affiche [ 1, 2, 3 ] Ou encore plus simple var list: Array<number> = [1, 2, 3]; console.log(list); // affiche [ 1, 2, 3 ] H & H: Research and Training 17 / 142
  • 28. Variable Déclaration TypeScript Remarques En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un intervalle de valeurs entières consécutives. Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un intervalle de valeurs entières consécutives. H & H: Research and Training 18 / 142
  • 29. Variable Déclaration TypeScript Remarques En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un intervalle de valeurs entières consécutives. Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un intervalle de valeurs entières consécutives. Exemple var list: number[] = Array.from(Array(3).keys()) console.log(list); // affiche [ 0, 1, 2 ] H & H: Research and Training 18 / 142
  • 30. Variable Déclaration TypeScript Remarques En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un intervalle de valeurs entières consécutives. Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un intervalle de valeurs entières consécutives. Exemple var list: number[] = Array.from(Array(3).keys()) console.log(list); // affiche [ 0, 1, 2 ] On peut utiliser une fonction fléchée (à voir dans une prochaine section) pour modifier les valeurs générées var list: number[] = Array.from({ length: 3 }, (v, k) => k + 1) console.log(list); // affiche [ 1, 2, 3 ] H & H: Research and Training 18 / 142
  • 31. Variable Déclaration TypeScript Pour les tuples, on initialise toutes les valeurs à la déclaration var t: [number, string, string] = [ 100, "wick", ’john’ ]; H & H: Research and Training 19 / 142
  • 32. Variable Déclaration TypeScript Pour les tuples, on initialise toutes les valeurs à la déclaration var t: [number, string, string] = [ 100, "wick", ’john’ ]; Pour accéder à un élément d’un tuple en lecture ou en écriture console.log(t[0]); // affiche 100 t[2] = "travolta"; console.log(t); // affiche [ 100, ’wick’, ’travolta’ ] H & H: Research and Training 19 / 142
  • 33. Variable Déclaration TypeScript Pour les tuples, on initialise toutes les valeurs à la déclaration var t: [number, string, string] = [ 100, "wick", ’john’ ]; Pour accéder à un élément d’un tuple en lecture ou en écriture console.log(t[0]); // affiche 100 t[2] = "travolta"; console.log(t); // affiche [ 100, ’wick’, ’travolta’ ] Cependant, ceci génère une erreur t = [100, 200, ’john’]; H & H: Research and Training 19 / 142
  • 34. Variable Déclaration Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels var t: [number, string?, string?] = [100]; console.log(t); // affiche [ 100 ] console.log(t[1]); // affiche undefined H & H: Research and Training 20 / 142
  • 35. Variable Déclaration Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels var t: [number, string?, string?] = [100]; console.log(t); // affiche [ 100 ] console.log(t[1]); // affiche undefined Pour ajouter un élément t[1] = ’wick’; H & H: Research and Training 20 / 142
  • 36. Variable Déclaration Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels var t: [number, string?, string?] = [100]; console.log(t); // affiche [ 100 ] console.log(t[1]); // affiche undefined Pour ajouter un élément t[1] = ’wick’; Ceci génère une erreur t[2] = 100; H & H: Research and Training 20 / 142
  • 37. Variable Déclaration Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels var t: [number, string?, string?] = [100]; console.log(t); // affiche [ 100 ] console.log(t[1]); // affiche undefined Pour ajouter un élément t[1] = ’wick’; Ceci génère une erreur t[2] = 100; Et cette instruction aussi car on dépasse la taille du tuple t[3] = 100; H & H: Research and Training 20 / 142
  • 38. Variable Déclaration TypeScript Exemple avec any var x: any; x = "bonjour"; x = 5; console.log(x); // affiche 5; H & H: Research and Training 21 / 142
  • 39. Variable Déclaration TypeScript Exemple avec any var x: any; x = "bonjour"; x = 5; console.log(x); // affiche 5; Une variable de type any peut être affectée à n’importe quel autre type de variable var x: any; x = "bonjour"; x = 5; var y: number = x; H & H: Research and Training 21 / 142
  • 40. Variable Déclaration TypeScript Le type unknown (TypeScript 3.0) fonctionne comme any mais ne peut être affecté qu’à une variable de type unknown ou any var x: unknown; x = "bonjour"; x = 5; console.log(x); // affiche 5; H & H: Research and Training 22 / 142
  • 41. Variable Déclaration TypeScript Le type unknown (TypeScript 3.0) fonctionne comme any mais ne peut être affecté qu’à une variable de type unknown ou any var x: unknown; x = "bonjour"; x = 5; console.log(x); // affiche 5; Ceci génère donc une erreur var x: unknown; x = "bonjour"; x = 5; var y: number = x; H & H: Research and Training 22 / 142
  • 42. Variable Déclaration Déclarons une énumération (dans file.ts) enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE }; H & H: Research and Training 23 / 142
  • 43. Variable Déclaration Déclarons une énumération (dans file.ts) enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE }; L’indice du premier élément est 0 console.log(mois.AVRIL) // affiche 3 H & H: Research and Training 23 / 142
  • 44. Variable Déclaration Déclarons une énumération (dans file.ts) enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE }; L’indice du premier élément est 0 console.log(mois.AVRIL) // affiche 3 Pour modifier l’indice du premier élément enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE }; H & H: Research and Training 23 / 142
  • 45. Variable Déclaration Déclarons une énumération (dans file.ts) enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE }; L’indice du premier élément est 0 console.log(mois.AVRIL) // affiche 3 Pour modifier l’indice du premier élément enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE }; En affichant maintenant, le résultat est console.log(mois.AVRIL) // affiche 4 H & H: Research and Training 23 / 142
  • 46. Variable Déclaration TypeScript On peut aussi modifier plusieurs indices simultanément enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE }; H & H: Research and Training 24 / 142
  • 47. Variable Déclaration TypeScript On peut aussi modifier plusieurs indices simultanément enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE }; En affichant, le résultat est console.log(mois.MARS); // affiche 3 console.log(mois.JUIN); // affiche 12 console.log(mois.DECEMBRE); // affiche 3 H & H: Research and Training 24 / 142
  • 48. Variable Déclaration TypeScript On peut aussi modifier plusieurs indices simultanément enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN, JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE }; En affichant, le résultat est console.log(mois.MARS); // affiche 3 console.log(mois.JUIN); // affiche 12 console.log(mois.DECEMBRE); // affiche 3 Ceci est une erreur, on ne peut modifier une constante mois.JANVIER = 3; H & H: Research and Training 24 / 142
  • 49. Variable Déclaration TypeScript Pour déclarer un objet var obj: { nom: string; numero: number; }; H & H: Research and Training 25 / 142
  • 50. Variable Déclaration TypeScript Pour déclarer un objet var obj: { nom: string; numero: number; }; On peut initialiser les attributs de cet objet obj = { nom: ’wick’, numero: 100 }; console.log(obj); // affiche { nom: ’wick’, numero: 100 } console.log(typeof obj); // affiche object H & H: Research and Training 25 / 142
  • 51. Variable Déclaration TypeScript On peut modifier les valeurs d’un objet ainsi obj.nom = ’abruzzi’; obj[’numero’] = 200; console.log(obj); H & H: Research and Training 26 / 142
  • 52. Variable Déclaration TypeScript On peut modifier les valeurs d’un objet ainsi obj.nom = ’abruzzi’; obj[’numero’] = 200; console.log(obj); Ceci est une erreur obj.nom = 125; H & H: Research and Training 26 / 142
  • 53. Variable Union de type TypeScript Union de type Il est possible d’autoriser plusieurs types de valeurs pour une variable H & H: Research and Training 27 / 142
  • 54. Variable Union de type TypeScript Union de type Il est possible d’autoriser plusieurs types de valeurs pour une variable Déclarer une variable acceptant plusieurs types de valeur var y: number | boolean | string; H & H: Research and Training 27 / 142
  • 55. Variable Union de type TypeScript Union de type Il est possible d’autoriser plusieurs types de valeurs pour une variable Déclarer une variable acceptant plusieurs types de valeur var y: number | boolean | string; affecter des valeurs de type différent y = 2; y = "bonjour"; y = false; H & H: Research and Training 27 / 142
  • 56. Variable Union de type TypeScript Union de type Il est possible d’autoriser plusieurs types de valeurs pour une variable Déclarer une variable acceptant plusieurs types de valeur var y: number | boolean | string; affecter des valeurs de type différent y = 2; y = "bonjour"; y = false; Ceci génère une erreur y = [2, 5]; H & H: Research and Training 27 / 142
  • 57. Variable Variable locale TypeScript Le mot-clé let permet de donner une visibilité locale à une variable déclarée dans un bloc. H & H: Research and Training 28 / 142
  • 58. Variable Variable locale TypeScript Le mot-clé let permet de donner une visibilité locale à une variable déclarée dans un bloc. Ceci génère une erreur car la variable x a une visibilité locale limitée au bloc if if (5 > 2) { let x = 1; } console.log(x); // affiche ReferenceError: x is not defined H & H: Research and Training 28 / 142
  • 59. Variable Cast TypeScript Premier exemple let str: any = "bonjour"; let longueur: number = (<string>str).length; console.log(longueur); // affiche 7 H & H: Research and Training 29 / 142
  • 60. Variable Cast TypeScript Premier exemple let str: any = "bonjour"; let longueur: number = (<string>str).length; console.log(longueur); // affiche 7 Deuxième exemple let str: any = "bonjour"; let longueur: number = (str as string).length; console.log(longueur); // affiche 7 H & H: Research and Training 29 / 142
  • 61. Variable Conversion TypeScript Pour convertir une chaı̂ne de caractère en nombre let x : string = "2"; let y: string = "3.5"; let a: number = Number(x); let b: number = Number(y); console.log(a); // affiche 2 console.log(b); // affiche 3.5 H & H: Research and Training 30 / 142
  • 62. Variable Conversion TypeScript Pour convertir une chaı̂ne de caractère en nombre let x : string = "2"; let y: string = "3.5"; let a: number = Number(x); let b: number = Number(y); console.log(a); // affiche 2 console.log(b); // affiche 3.5 Il existe une fonction de conversion pour chaque type H & H: Research and Training 30 / 142
  • 63. Variable Alias de type TypeScript Le mot-clé type permet de définir un alias de type type maStructure = [number, string, string]; H & H: Research and Training 31 / 142
  • 64. Variable Alias de type TypeScript Le mot-clé type permet de définir un alias de type type maStructure = [number, string, string]; Ensuite, on peut utiliser maStructure comme un type let first: maStructure = [100, "wick", ’john’ ]; console.log(first); // affiche [ 100, ’wick’, ’john’ ] H & H: Research and Training 31 / 142
  • 65. Variable Nullish Coalescing (Coalescence nulle) TypeScript L’opérateur ?? permet d’éviter d’affecter la valeur null ou undefined à une variable var obj = {nom: null, prenom: ’john’}; let nom: string = obj.nom ?? ’doe’; console.log(nom); // affiche doe C’est équivalent à var obj = {nom: null, prenom: ’john’}; let nom: string = (obj.nom !== null && obj.nom !== undefined) ? obj.nom : ’doe’; console.log(nom); // affiche doe H & H: Research and Training 32 / 142
  • 66. Constante TypeScript Les constantes se déclare avec le mot-clé const permet à une variable de ne pas changer de valeur H & H: Research and Training 33 / 142
  • 67. Constante TypeScript Les constantes se déclare avec le mot-clé const permet à une variable de ne pas changer de valeur Ceci génère une erreur car une constante ne peut changer de valeur const X: any = 5; X = "bonjour"; // affiche TypeError: Assignment to constant variable. H & H: Research and Training 33 / 142
  • 68. Constante TypeScript Avec TypeScript 3.4, on peut définir une constante avec une assertion sans préciser le type let X = "bonjour" as const; console.log(X); // affiche bonjour console.log(typeof X); // affiche string let Y: string = "bonjour"; console.log(X == y); //affiche true H & H: Research and Training 34 / 142
  • 69. Constante TypeScript Avec TypeScript 3.4, on peut définir une constante avec une assertion sans préciser le type let X = "bonjour" as const; console.log(X); // affiche bonjour console.log(typeof X); // affiche string let Y: string = "bonjour"; console.log(X == y); //affiche true Ceci génère une erreur car une constante ne peut changer de valeur X = "hello"; H & H: Research and Training 34 / 142
  • 70. Constante TypeScript Avec TypeScript 3.4, on peut aussi définir une constante ainsi let X = <const>"bonjour"; console.log(X); // affiche bonjour console.log(typeof X); // affiche string let y: string = "bonjour"; console.log(X == y); //affiche true H & H: Research and Training 35 / 142
  • 71. Constante TypeScript Avec TypeScript 3.4, on peut aussi définir une constante ainsi let X = <const>"bonjour"; console.log(X); // affiche bonjour console.log(typeof X); // affiche string let y: string = "bonjour"; console.log(X == y); //affiche true Ceci génère une erreur car une constante ne peut changer de valeur X = "hello"; H & H: Research and Training 35 / 142
  • 72. Fonction Déclaration et appel TypeScript Déclarer une fonction function nomFonction([les paramètres]){ les instructions de la fonction } H & H: Research and Training 36 / 142
  • 73. Fonction Déclaration et appel TypeScript Déclarer une fonction function nomFonction([les paramètres]){ les instructions de la fonction } Exemple function somme(a: number, b: number): number { return a + b; } H & H: Research and Training 36 / 142
  • 74. Fonction Déclaration et appel TypeScript Déclarer une fonction function nomFonction([les paramètres]){ les instructions de la fonction } Exemple function somme(a: number, b: number): number { return a + b; } Appeler une fonction let resultat: number = somme (1, 3); console.log(resultat); // affiche 4 H & H: Research and Training 36 / 142
  • 75. Fonction Déclaration et appel TypeScript Le code suivant génère une erreur function somme(a: number, b: number): string { return a + b; } H & H: Research and Training 37 / 142
  • 76. Fonction Déclaration et appel TypeScript Le code suivant génère une erreur function somme(a: number, b: number): string { return a + b; } Celui-ci aussi let resultat: number = somme ("1", 3); H & H: Research and Training 37 / 142
  • 77. Fonction Déclaration et appel TypeScript Le code suivant génère une erreur function somme(a: number, b: number): string { return a + b; } Celui-ci aussi let resultat: number = somme ("1", 3); Et même celui-ci let resultat: string = somme(1, 3); H & H: Research and Training 37 / 142
  • 78. Fonction Déclaration et appel TypeScript Une fonction qui ne retourne rien a le type void function direBonjour(): void { console.log("bonjour"); } H & H: Research and Training 38 / 142
  • 79. Fonction Déclaration et appel TypeScript Une fonction qui ne retourne rien a le type void function direBonjour(): void { console.log("bonjour"); } Une fonction qui n’atteint jamais sa fin a le type never function boucleInfinie(): never { while (true){ } } H & H: Research and Training 38 / 142
  • 80. Fonction Paramètres par défaut TypeScript Il est possible d’attribuer une valeur par défaut aux paramètres d’une fonction H & H: Research and Training 39 / 142
  • 81. Fonction Paramètres par défaut TypeScript Il est possible d’attribuer une valeur par défaut aux paramètres d’une fonction function division(x: number, y: number = 1) : number { return x / y; } console.log(division(10)); // affiche 10 console.log(division(10, 2)); // affiche 5 H & H: Research and Training 39 / 142
  • 82. Fonction Paramètres optionnels TypeScript Il est possible de rendre certains paramètres d’une fonction optionnels H & H: Research and Training 40 / 142
  • 83. Fonction Paramètres optionnels TypeScript Il est possible de rendre certains paramètres d’une fonction optionnels function division(x: number, y?: number): number { if(y) return x / y; return x; } console.log(division(10)); // affiche 10 console.log(division(10, 2)); // affiche 5 H & H: Research and Training 40 / 142
  • 84. Fonction Paramètres restants TypeScript Il est possible de définir une fonction prenant un nombre indéfini de paramètres H & H: Research and Training 41 / 142
  • 85. Fonction Paramètres restants TypeScript Il est possible de définir une fonction prenant un nombre indéfini de paramètres function somme(x: number, ...tab: number[]): number { for (let elt of tab) x += elt; return x; } console.log(somme(10)); // affiche 10 console.log(somme(10, 5)); // affiche 15 console.log(somme(10, 1, 6)); // affiche 17 H & H: Research and Training 41 / 142
  • 86. Fonction Paramètres à plusieurs types autorisés TypeScript Il est possible d’autoriser plusieurs types pour un paramètre H & H: Research and Training 42 / 142
  • 87. Fonction Paramètres à plusieurs types autorisés TypeScript Il est possible d’autoriser plusieurs types pour un paramètre function stringOrNumber(param1: string | number, param2: number): number { if (typeof param1 == "string") return param1.length + param2; return param1 + param2; } console.log(stringOrNumber("bonjour", 3)); // affiche 10 console.log(stringOrNumber(5, 3)); // affiche 8 H & H: Research and Training 42 / 142
  • 88. Fonction Paramètres en lecture seule TypeScript Le mot-clé ReadonlyArray (TypeScript 3.4) indique qu’un paramètre de type tableau est en lecture seule (non-modifiable) function incrementAll(tab: ReadonlyArray<number>): void { for (let i = 0; i < tab.length; i++){ // la ligne suivante génère une erreur tab[i]++; } } H & H: Research and Training 43 / 142
  • 89. Fonction Paramètres en lecture seule TypeScript Le mot-clé ReadonlyArray (TypeScript 3.4) indique qu’un paramètre de type tableau est en lecture seule (non-modifiable) function incrementAll(tab: ReadonlyArray<number>): void { for (let i = 0; i < tab.length; i++){ // la ligne suivante génère une erreur tab[i]++; } } On peut aussi utiliser le mot-clé readonly qui s’applique sur les tableaux et les tuples function incrementAll(tab: readonly number[]): void { for (let i = 0; i < tab.length; i++){ // la ligne suivante génère une erreur tab[i]++; } } H & H: Research and Training 43 / 142
  • 90. Fonction Fonctions fléchées (arrow function) TypeScript Il est possible de déclarer une fonction en utilisant les expressions fléchées let nomFonction = ([les paramètres]): typeValeurRetour => { les instructions de la fonction } H & H: Research and Training 44 / 142
  • 91. Fonction Fonctions fléchées (arrow function) TypeScript Il est possible de déclarer une fonction en utilisant les expressions fléchées let nomFonction = ([les paramètres]): typeValeurRetour => { les instructions de la fonction } Exemple let somme = (a: number, b: number): number => { return a + b; } H & H: Research and Training 44 / 142
  • 92. Fonction Fonctions fléchées (arrow function) TypeScript Il est possible de déclarer une fonction en utilisant les expressions fléchées let nomFonction = ([les paramètres]): typeValeurRetour => { les instructions de la fonction } Exemple let somme = (a: number, b: number): number => { return a + b; } Ou en plus simple let somme = (a: number, b: number): number => a + b; H & H: Research and Training 44 / 142
  • 93. Fonction Fonctions fléchées (arrow function) TypeScript Il est possible de déclarer une fonction en utilisant les expressions fléchées let nomFonction = ([les paramètres]): typeValeurRetour => { les instructions de la fonction } Exemple let somme = (a: number, b: number): number => { return a + b; } Ou en plus simple let somme = (a: number, b: number): number => a + b; Appeler une fonction fléchée let resultat: number = somme (1, 3); H & H: Research and Training 44 / 142
  • 94. Fonction Fonctions fléchées (arrow function) TypeScript Cas d’une fonction fléchée à un seul paramètre let carre = (a: number): number => a * a; console.log(carre(2)); // affiche 4 H & H: Research and Training 45 / 142
  • 95. Fonction Fonctions fléchées (arrow function) TypeScript Cas d’une fonction fléchée à un seul paramètre let carre = (a: number): number => a * a; console.log(carre(2)); // affiche 4 Sans typage, la fonction peut être écrite ainsi let carre = a => a * a; console.log(carre(2)); // affiche 4 H & H: Research and Training 45 / 142
  • 96. Fonction Fonctions fléchées (arrow function) TypeScript Cas d’une fonction fléchée à un seul paramètre let carre = (a: number): number => a * a; console.log(carre(2)); // affiche 4 Sans typage, la fonction peut être écrite ainsi let carre = a => a * a; console.log(carre(2)); // affiche 4 Déclaration d’une fonction fléchée sans paramètre let sayHello = (): void => console.log(’Hello’); sayHello(); // affiche Hello H & H: Research and Training 45 / 142
  • 97. Fonction Fonctions fléchées (arrow function) TypeScript Remarque Il est déconseillé d’utiliser les fonctions fléchées dans un objet Le mot-clé this est inutilisable dans les fonctions fléchées H & H: Research and Training 46 / 142
  • 98. Fonction Fonctions fléchées (arrow function) TypeScript Remarque Il est déconseillé d’utiliser les fonctions fléchées dans un objet Le mot-clé this est inutilisable dans les fonctions fléchées Sans les fonctions fléchées let obj = { nom: ’wick’, afficherNom: function() { console.log(this.nom) } } obj.afficherNom(); // affiche wick Avec les fonctions fléchées let obj = { nom: ’wick’, afficherNom: () => { console.log(this.nom) } } obj.afficherNom(); // affiche undefined H & H: Research and Training 46 / 142
  • 99. Fonction Fonctions fléchées (arrow function) TypeScript Les fonctions fléchées sont utilisées pour réaliser les opérations suivant sur les tableaux forEach() : pour parcourir un tableau map() : pour appliquer une fonction sur les éléments d’un tableau filter() : pour filtrer les éléments d’un tableau selon un critère défini sous forme d’une fonction anonyme ou fléchée reduce() : pour réduire tous les éléments d’un tableau en un seul selon une règle définie dans une fonction anonyme ou fléchée ... H & H: Research and Training 47 / 142
  • 100. Fonction Fonctions fléchées (arrow function) Utiliser forEach pour afficher le contenu d’un tableau var tab = [2, 3, 5]; tab.forEach(elt => console.log(elt)); // affiche 2 3 5 H & H: Research and Training 48 / 142
  • 101. Fonction Fonctions fléchées (arrow function) Utiliser forEach pour afficher le contenu d’un tableau var tab = [2, 3, 5]; tab.forEach(elt => console.log(elt)); // affiche 2 3 5 Dans forEach, on peut aussi appeler une fonction afficher tab.forEach(elt => afficher(elt)); function afficher(value) { console.log(value); } // affiche 2 3 5 H & H: Research and Training 48 / 142
  • 102. Fonction Fonctions fléchées (arrow function) Utiliser forEach pour afficher le contenu d’un tableau var tab = [2, 3, 5]; tab.forEach(elt => console.log(elt)); // affiche 2 3 5 Dans forEach, on peut aussi appeler une fonction afficher tab.forEach(elt => afficher(elt)); function afficher(value) { console.log(value); } // affiche 2 3 5 On peut simplifier l’écriture précédente en utilisant les callback tab.forEach(afficher); function afficher(value) { console.log(value); } // affiche 2 3 5 H & H: Research and Training 48 / 142
  • 103. Fonction Fonctions fléchées (arrow function) TypeScript La fonction afficher peut accepter deux paramètres : le premier est la valeur de l’itération courante et le deuxième est son indice dans le tableau tab.forEach(afficher); function afficher(value, key) { console.log(key, value); } /* affiche 0 2 1 3 2 5 */ H & H: Research and Training 49 / 142
  • 104. Fonction Fonctions fléchées (arrow function) TypeScript La fonction afficher peut accepter un troisième paramètre qui correspond au tableau tab.forEach(afficher); function afficher(value, key, t) { console.log(key, value, t); } /* affiche 0 2 [ 2, 3, 5 ] 1 3 [ 2, 3, 5 ] 2 5 [ 2, 3, 5 ] */ H & H: Research and Training 50 / 142
  • 105. Fonction Fonctions fléchées (arrow function) TypeScript On peut utiliser map pour effecteur un traitement sur chaque élément du tableau puis forEach pour afficher le nouveau tableau tab.map(elt => elt + 3) .forEach(elt => console.log(elt)); // affiche 5 6 8 H & H: Research and Training 51 / 142
  • 106. Fonction Fonctions fléchées (arrow function) TypeScript On peut utiliser map pour effecteur un traitement sur chaque élément du tableau puis forEach pour afficher le nouveau tableau tab.map(elt => elt + 3) .forEach(elt => console.log(elt)); // affiche 5 6 8 On peut aussi utiliser filter pour filtrer des éléments tab.map(elt => elt + 3) .filter(elt => elt > 5) .forEach(elt => console.log(elt)); // affiche 6 8 H & H: Research and Training 51 / 142
  • 107. Fonction Fonctions fléchées (arrow function) TypeScript Remarque Attention, selon l’ordre d’appel de ces méthodes, le résultat peut changer. H & H: Research and Training 52 / 142
  • 108. Fonction Fonctions fléchées (arrow function) TypeScript Remarque Attention, selon l’ordre d’appel de ces méthodes, le résultat peut changer. Exemple avec reduce : permet de réduire les éléments d’un tableau en une seule valeur var tab = [2, 3, 5]; var somme = tab.map(elt => elt + 3) .filter(elt => elt > 5) .reduce((sum, elt) => sum + elt); console.log(somme); // affiche 14 H & H: Research and Training 52 / 142
  • 109. Fonction Fonctions fléchées (arrow function) TypeScript Si on a plusieurs instructions, on doit ajouter les accolades var tab = [2, 3, 5]; var somme = tab.map(elt => elt + 3) .filter(elt => elt > 5) .reduce((sum, elt) => { return sum + elt; } ); console.log(somme); // affiche 14 H & H: Research and Training 53 / 142
  • 110. Fonction Fonctions fléchées (arrow function) TypeScript Remarques Le premier paramètre de reduce correspond au résultat de l’itération précédente Le deuxième correspond à l’élément du tableau de l’itération courante Le premier paramètre est initialisé par la valeur du premier élément du tableau On peut changer la valeur initiale du premier paramètre en l’ajoutant à la fin de la méthode H & H: Research and Training 54 / 142
  • 111. Fonction Fonctions fléchées (arrow function) TypeScript Dans cet exemple, on initialise le premier paramètre de reduce par la valeur 0 var somme = tab.map(elt => elt + 3) .filter(elt => elt > 5) .reduce((sum, elt) => sum + elt, 0); console.log(somme); // affiche 14 H & H: Research and Training 55 / 142
  • 112. Fonction Fonctions fléchées (arrow function) TypeScript Fonctions fléchées : pourquoi? Simplicité d’écriture du code ⇒ meilleure lisibilité Pas de binding avec les objets prédéfinis : arguments, this... ... H & H: Research and Training 56 / 142
  • 113. Concept de décomposition (spread) Considérons la fonction somme suivante function somme(a?: number, b?: number, c?: number): number { return a + b + c; } H & H: Research and Training 57 / 142
  • 114. Concept de décomposition (spread) Considérons la fonction somme suivante function somme(a?: number, b?: number, c?: number): number { return a + b + c; } Pour appeler la fonction somme, il faut lui passer trois paramètres number console.log(somme (1, 3, 5)); // affiche 9 H & H: Research and Training 57 / 142
  • 115. Concept de décomposition (spread) Considérons la fonction somme suivante function somme(a?: number, b?: number, c?: number): number { return a + b + c; } Pour appeler la fonction somme, il faut lui passer trois paramètres number console.log(somme (1, 3, 5)); // affiche 9 Et si les valeurs se trouvent dans un tableau, on peut utiliser la décomposition let t: Array<number> = [1, 3, 5]; console.log(somme(...t)); H & H: Research and Training 57 / 142
  • 116. Concept de décomposition (spread) Considérons la fonction somme suivante function somme(a?: number, b?: number, c?: number): number { return a + b + c; } Pour appeler la fonction somme, il faut lui passer trois paramètres number console.log(somme (1, 3, 5)); // affiche 9 Et si les valeurs se trouvent dans un tableau, on peut utiliser la décomposition let t: Array<number> = [1, 3, 5]; console.log(somme(...t)); On peut utiliser partiellement la décomposition let t: Array<number> = [1, 3]; console.log(somme(...t, 5)); H & H: Research and Training 57 / 142
  • 117. Concept de décomposition (spread) TypeScript Considérons les deux objets suivants let obj = { nom: ’wick’, prenom: ’john’}; let obj2 = obj; H & H: Research and Training 58 / 142
  • 118. Concept de décomposition (spread) TypeScript Considérons les deux objets suivants let obj = { nom: ’wick’, prenom: ’john’}; let obj2 = obj; Modifier l’un ⇒ modifier l’autre obj2.nom = ’abruzzi’; console.log(obj); // affiche { nom: ’abruzzi’, prenom: ’john’ } console.log(obj2); // affiche { nom: ’abruzzi’, prenom: ’john’ } H & H: Research and Training 58 / 142
  • 119. Concept de décomposition (spread) TypeScript Pour que les deux objets soient indépendants, on peut utiliser la décomposition pour faire le clonage let obj = { nom: ’wick’, prenom: ’john’}; let obj2 = { ...obj }; obj2.nom = ’abruzzi’; console.log(obj); // affiche { nom: ’wick’, prenom: ’john’ } console.log(obj2); // affiche { nom: ’abruzzi’, prenom: ’john’ } H & H: Research and Training 59 / 142
  • 120. import / export TypeScript Particularité Avec TypeScript, on peut utiliser des éléments définis dans un autre fichier : une variable, une fonction, une classe, une interface... Pour cela, il faut l’importer là où on a besoin de l’utiliser Pour importer un élément, il faut l’exporter dans le fichier source En transpilant le fichier contenant les import, les fichiers contenant les éléments importés seront aussi transpilés. H & H: Research and Training 60 / 142
  • 121. import / export TypeScript Étant donné le fichier fonctions.ts dont le contenu est function somme(a: number = 0, b: number = 0) { return a + b; } function produit(a: number = 0, b: number = 1) { return a * b; } H & H: Research and Training 61 / 142
  • 122. import / export TypeScript Pour exporter les deux fonctions somme et produit de fonction.ts export function somme(a: number = 0, b: number = 0) { return a + b; } export function produit(a: number = 0, b: number = 1) { return a * b; } H & H: Research and Training 62 / 142
  • 123. import / export TypeScript Pour exporter les deux fonctions somme et produit de fonction.ts export function somme(a: number = 0, b: number = 0) { return a + b; } export function produit(a: number = 0, b: number = 1) { return a * b; } Ou aussi function somme(a:number = 0, b:number = 0) { return a + b; } function produit(a: number = 0, b: number = 1) { return a * b; } export { somme, produit }; H & H: Research and Training 62 / 142
  • 124. import / export TypeScript Pour importer et utiliser une fonction import { somme } from ’./fonctions’; console.log(somme(2, 5)); // affiche 7 H & H: Research and Training 63 / 142
  • 125. import / export TypeScript Pour importer et utiliser une fonction import { somme } from ’./fonctions’; console.log(somme(2, 5)); // affiche 7 On peut aussi utiliser des alias import { somme as s } from ’./fonctions’; console.log(s(2, 5)); // affiche 7 H & H: Research and Training 63 / 142
  • 126. import / export TypeScript Pour importer plusieurs éléments import { somme, produit } from ’./fonctions’; console.log(somme(2, 5)); // affiche 7 console.log(produit(2, 5)); // affiche 10 H & H: Research and Training 64 / 142
  • 127. import / export TypeScript Pour importer plusieurs éléments import { somme, produit } from ’./fonctions’; console.log(somme(2, 5)); // affiche 7 console.log(produit(2, 5)); // affiche 10 Pour importer plusieurs éléments import * as f from ’./fonctions’; console.log(f.somme(2, 5)); // affiche 7 console.log(f.produit(2, 5)); // affiche 10 H & H: Research and Training 64 / 142
  • 128. import / export TypeScript On peut aussi donner des alias pendant l’export function somme(a:number = 0, b:number = 0) { return a + b; } function produit(a: number = 0, b: number = 1) { return a * b; } export { produit as p, somme as s } ; H & H: Research and Training 65 / 142
  • 129. import / export TypeScript On peut aussi donner des alias pendant l’export function somme(a:number = 0, b:number = 0) { return a + b; } function produit(a: number = 0, b: number = 1) { return a * b; } export { produit as p, somme as s } ; Pour importer import * as f from ’./fonctions’; console.log(f.s(2, 5)); // affiche 7 console.log(f.p(2, 5)); // affiche 10 H & H: Research and Training 65 / 142
  • 130. import / export TypeScript On peut aussi utiliser le export default (un seul par fichier) export default function somme(a: number = 0, b: number = 0) { return a + b; } export function produit(a: number = 0, b: number = 1) { return a * b; } H & H: Research and Training 66 / 142
  • 131. import / export TypeScript On peut aussi utiliser le export default (un seul par fichier) export default function somme(a: number = 0, b: number = 0) { return a + b; } export function produit(a: number = 0, b: number = 1) { return a * b; } Pour importer, pas besoin de { } pour les éléments exporter par défaut import somme from ’./fonctions’; import { produit } from ’./fonctions’; console.log(somme(2, 5)); // affiche 7 console.log(produit(2, 5)); // affiche 10 H & H: Research and Training 66 / 142
  • 132. import / export TypeScript Attention, ici on a importé somme avec deux alias différents import s from ’./fonctions’; import produit from ’./fonctions’; console.log(s(2, 5)); // affiche 7 console.log(produit(2, 5)); // affiche 7 H & H: Research and Training 67 / 142
  • 133. Classe Rappel TypeScript Qu’est ce qu’une classe en POO? Ça correspond à un plan, un moule, une usine... C’est une description abstraite d’un type d’objets Elle représente un ensemble d’objets ayant les mêmes propriétés statiques (attributs) et dynamiques (méthodes) H & H: Research and Training 68 / 142
  • 134. Classe Rappel TypeScript Qu’est ce qu’une classe en POO? Ça correspond à un plan, un moule, une usine... C’est une description abstraite d’un type d’objets Elle représente un ensemble d’objets ayant les mêmes propriétés statiques (attributs) et dynamiques (méthodes) Instance? Une instance correspond à un objet créé à partir d’une classe (via le constructeur) L’instanciation : création d’un objet d’une classe instance ≡ objet H & H: Research and Training 68 / 142
  • 135. Classe Rappel TypeScript De quoi est composé une classe? NomClasse les attributs les méthodes Attribut : [visibilité] + nom + type Méthode : [visibilité] + nom + arguments + valeur de retour ≡ signature : exactement comme les fonctions en procédurale H & H: Research and Training 69 / 142
  • 136. Classe Syntaxe TypeScript Considérons la classe Personne définie dans personne.ts export class Personne { num: number; nom: string; prenom: string; } H & H: Research and Training 70 / 142
  • 137. Classe Syntaxe TypeScript Considérons la classe Personne définie dans personne.ts export class Personne { num: number; nom: string; prenom: string; } En TypeScript Toute classe a un constructeur par défaut sans paramètre. Par défaut, la visibilité des attributs est public. H & H: Research and Training 70 / 142
  • 138. Classe Syntaxe TypeScript Hypothèse Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john H & H: Research and Training 71 / 142
  • 139. Classe Syntaxe TypeScript Hypothèse Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john Étape 1 : Commençons par importer la classe Personne dans file.ts import { Personne } from ’./personne’; H & H: Research and Training 71 / 142
  • 140. Classe Syntaxe TypeScript Hypothèse Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john Étape 1 : Commençons par importer la classe Personne dans file.ts import { Personne } from ’./personne’; Étape 2 : déclarons un objet (objet non créé) let personne: Personne; H & H: Research and Training 71 / 142
  • 141. Classe Syntaxe TypeScript Hypothèse Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john Étape 1 : Commençons par importer la classe Personne dans file.ts import { Personne } from ’./personne’; Étape 2 : déclarons un objet (objet non créé) let personne: Personne; Étape 3 : créons l’objet (instanciation) de type Personne (objet créé) personne = new Personne(); H & H: Research and Training 71 / 142
  • 142. Classe Syntaxe TypeScript Hypothèse Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john Étape 1 : Commençons par importer la classe Personne dans file.ts import { Personne } from ’./personne’; Étape 2 : déclarons un objet (objet non créé) let personne: Personne; Étape 3 : créons l’objet (instanciation) de type Personne (objet créé) personne = new Personne(); On peut faire déclaration + instanciation let personne: Personne = new Personne(); H & H: Research and Training 71 / 142
  • 143. Classe Syntaxe TypeScript Affectons les valeurs aux différents attributs personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; H & H: Research and Training 72 / 142
  • 144. Classe Syntaxe TypeScript Affectons les valeurs aux différents attributs personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; Pour être sûr que les valeurs ont bien été affectées aux attributs, on affiche Console.log(personne) // affiche Personne { num: 1, nom: ’wick’, prenom: ’ john’ } H & H: Research and Training 72 / 142
  • 145. Classe Setter TypeScript Hypothèse Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la classe Personne H & H: Research and Training 73 / 142
  • 146. Classe Setter TypeScript Hypothèse Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la classe Personne Démarche 1 Bloquer l’accès directe aux attributs (mettre la visibilité à private) 2 Définir des méthodes publiques qui contrôlent l’affectation de valeurs aux attributs (les setter) H & H: Research and Training 73 / 142
  • 147. Classe Setter TypeScript Hypothèse Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la classe Personne Démarche 1 Bloquer l’accès directe aux attributs (mettre la visibilité à private) 2 Définir des méthodes publiques qui contrôlent l’affectation de valeurs aux attributs (les setter) Convention Mettre la visibilité private ou protected pour tous les attributs Mettre la visibilité public pour toutes les méthodes H & H: Research and Training 73 / 142
  • 148. Classe Setter Mettons la visibilité private pour tous les attributs de la classe Personne export class Personne { private num: number; private nom: string; private prenom: string; } H & H: Research and Training 74 / 142
  • 149. Classe Setter Mettons la visibilité private pour tous les attributs de la classe Personne export class Personne { private num: number; private nom: string; private prenom: string; } Dans le fichier file.ts, les trois lignes suivantes sont soulignées en rouge personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; H & H: Research and Training 74 / 142
  • 150. Classe Setter Mettons la visibilité private pour tous les attributs de la classe Personne export class Personne { private num: number; private nom: string; private prenom: string; } Dans le fichier file.ts, les trois lignes suivantes sont soulignées en rouge personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; Explication Les attributs sont privés, donc aucun accès direct n’est autorisé H & H: Research and Training 74 / 142
  • 151. Classe Setter Mettons la visibilité private pour tous les attributs de la classe Personne export class Personne { private num: number; private nom: string; private prenom: string; } Dans le fichier file.ts, les trois lignes suivantes sont soulignées en rouge personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; Explication Les attributs sont privés, donc aucun accès direct n’est autorisé Solution : les setters Des méthodes qui contrôlent l’affectation de valeurs aux attributs H & H: Research and Training 74 / 142
  • 152. Classe Setter TypeScript Conventions TypeScript Le setter est une méthode déclarée avec le mot-clé set Il porte le nom de l’attribut On l’utilise comme un attribut Pour éviter l’ambiguı̈té, on ajoute un underscore pour l’attribut H & H: Research and Training 75 / 142
  • 153. Classe Setter TypeScript Nouveau contenu de la classe Personne après ajout des setters export class Personne { private _num: number; private _nom: string; private _prenom: string; public set num(_num : number) { this._num = (_num >= 0 ? _num : 0); } public set nom(_nom: string) { this._nom = _nom; } public set prenom(_prenom: string) { this._prenom = _prenom; } } H & H: Research and Training 76 / 142
  • 154. Classe Setter TypeScript Pour tester, rien à changer dans file.ts import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne); H & H: Research and Training 77 / 142
  • 155. Classe Setter TypeScript Pour tester, rien à changer dans file.ts import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne); Pour transpiler, ajouter l’option -t es5, le résultat est : Personne { num: 1, nom: ’wick’, prenom: ’john’ } H & H: Research and Training 77 / 142
  • 156. Classe Setter TypeScript Testons avec une valeur négative pour l’attribut numero import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = -1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne); H & H: Research and Training 78 / 142
  • 157. Classe Setter TypeScript Testons avec une valeur négative pour l’attribut numero import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = -1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne); Le résultat est : Personne { num: 0, nom: ’wick’, prenom: ’john’ } H & H: Research and Training 78 / 142
  • 158. Classe Getter TypeScript Question Comment récupérer les attributs (privés) de la classe Personne? H & H: Research and Training 79 / 142
  • 159. Classe Getter TypeScript Question Comment récupérer les attributs (privés) de la classe Personne? Démarche Définir des méthodes qui retournent les valeurs des attributs (les getter) H & H: Research and Training 79 / 142
  • 160. Classe Getter TypeScript Question Comment récupérer les attributs (privés) de la classe Personne? Démarche Définir des méthodes qui retournent les valeurs des attributs (les getter) Conventions TypeScript Le getter est une méthode déclarée avec le mot-clé get Il porte le nom de l’attribut On l’utilise comme un attribut H & H: Research and Training 79 / 142
  • 161. Classe Getter TypeScript Ajoutons les getters dans la classe Personne public get num() : number { return this._num; } public get nom(): string { return this._nom; } public get prenom(): string { return this._prenom; } H & H: Research and Training 80 / 142
  • 162. Classe Getter TypeScript Pour tester import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = 1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne.num); // affiche 1 console.log(personne.nom); // affiche wick console.log(personne.prenom); // affiche john H & H: Research and Training 81 / 142
  • 163. Classe Constructeur TypeScript Remarques Par défaut, toute classe en TypeScript a un constructeur par défaut sans paramètre Pour simplifier la création d’objets, on peut définir un nouveau constructeur qui prend en paramètre plusieurs attributs de la classe H & H: Research and Training 82 / 142
  • 164. Classe Constructeur TypeScript Remarques Par défaut, toute classe en TypeScript a un constructeur par défaut sans paramètre Pour simplifier la création d’objets, on peut définir un nouveau constructeur qui prend en paramètre plusieurs attributs de la classe Les constructeurs avec TypeScript On le déclare avec le mot-clé constructor Il peut contenir la visibilité des attributs si on veut simplifier la déclaration H & H: Research and Training 82 / 142
  • 165. Classe Constructeur TypeScript Le constructeur de la classe Personne prenant trois paramètres public constructor(_num: number, _nom: string, _prenom: string) { this._num = _num; this._nom = _nom; this._prenom = _prenom; } H & H: Research and Training 83 / 142
  • 166. Classe Constructeur TypeScript Le constructeur de la classe Personne prenant trois paramètres public constructor(_num: number, _nom: string, _prenom: string) { this._num = _num; this._nom = _nom; this._prenom = _prenom; } Pour préserver la cohérence, il faut que le constructeur contrôle la valeur de l’attribut num public constructor(_num: number, _nom: string, _prenom: string) { this._num = (_num >= 0 ? _num : 0); this._nom = _nom; this._prenom = _prenom; } H & H: Research and Training 83 / 142
  • 167. Classe Constructeur TypeScript On peut aussi appelé le setter dans le constructeur public constructor(_num: number, _nom: string, _prenom: string) { this.num = _num; this._nom = _nom; this._prenom = _prenom; } H & H: Research and Training 84 / 142
  • 168. Classe Constructeur TypeScript Dans file.ts, la ligne suivante est soulignée en rouge let personne: Personne = new Personne(); H & H: Research and Training 85 / 142
  • 169. Classe Constructeur TypeScript Dans file.ts, la ligne suivante est soulignée en rouge let personne: Personne = new Personne(); Explication Le constructeur par défaut a été écrasé (il n’existe plus) H & H: Research and Training 85 / 142
  • 170. Classe Constructeur TypeScript Dans file.ts, la ligne suivante est soulignée en rouge let personne: Personne = new Personne(); Explication Le constructeur par défaut a été écrasé (il n’existe plus) Comment faire? TypeScript n’autorise pas la présence de plusieurs constructeurs (la surcharge) On peut utiliser soit les valeurs par défaut, soit les paramètres optionnels H & H: Research and Training 85 / 142
  • 171. Classe Constructeur TypeScript Le nouveau constructeur avec les paramètres optionnels public constructor(_num?: number, _nom?: string, _prenom?: string) { if(_num) this.num = _num; if (_nom) this._nom = _nom; if(_prenom) this._prenom = _prenom; } H & H: Research and Training 86 / 142
  • 172. Classe Constructeur TypeScript Pour tester import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = -1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne); let personne2: Personne = new Personne(2, ’bob’, ’mike’); console.log(personne2); H & H: Research and Training 87 / 142
  • 173. Classe Constructeur TypeScript Pour tester import { Personne } from ’./personne’; let personne: Personne = new Personne(); personne.num = -1; personne.nom = "wick"; personne.prenom = "john"; console.log(personne); let personne2: Personne = new Personne(2, ’bob’, ’mike’); console.log(personne2); En exécutant, le résultat est : Personne { num: 0, nom: ’wick’, prenom: ’john’ } Personne { num: 2, nom: ’bob’, prenom: ’mike’ } H & H: Research and Training 87 / 142
  • 174. Classe Constructeur TypeScript TypeScript nous offre la possibilité de fusionner la déclaration des attributs et le constructeur public constructor(private _num?: number, private _nom?: string, private _prenom?: string) { } H & H: Research and Training 88 / 142
  • 175. Classe Constructeur TypeScript TypeScript nous offre la possibilité de fusionner la déclaration des attributs et le constructeur public constructor(private _num?: number, private _nom?: string, private _prenom?: string) { } En exécutant, le résultat est le même Personne { num: 0, nom: ’wick’, prenom: ’john’ } Personne { num: 2, nom: ’bob’, prenom: ’mike’ } H & H: Research and Training 88 / 142
  • 176. Classe Attributs et méthodes statiques TypeScript Récapitulatif Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes valeurs H & H: Research and Training 89 / 142
  • 177. Classe Attributs et méthodes statiques TypeScript Récapitulatif Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes valeurs Hypothèse Et si nous voulions qu’un attribut ait une valeur partagée par toutes les instances (par exemple, le nombre d’objets instanciés de la classe Personne) H & H: Research and Training 89 / 142
  • 178. Classe Attributs et méthodes statiques TypeScript Récapitulatif Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes valeurs Hypothèse Et si nous voulions qu’un attribut ait une valeur partagée par toutes les instances (par exemple, le nombre d’objets instanciés de la classe Personne) Solution : attribut statique ou attribut de classe Un attribut dont la valeur est partagée par toutes les instances de la classe. H & H: Research and Training 89 / 142
  • 179. Classe Attributs et méthodes statiques TypeScript Exemple Si on voulait créer un attribut contenant le nombre d’objets créés à partir de la classe Personne Notre attribut doit être déclaré static, sinon chaque objet pourrait avoir sa propre valeur pour cet attribut H & H: Research and Training 90 / 142
  • 180. Classe Attributs et méthodes statiques TypeScript Ajoutons un attribut statique nbrPersonnes à la liste d’attributs de la classe Personne private static _nbrPersonnes: number = 0; H & H: Research and Training 91 / 142
  • 181. Classe Attributs et méthodes statiques TypeScript Ajoutons un attribut statique nbrPersonnes à la liste d’attributs de la classe Personne private static _nbrPersonnes: number = 0; Incrémentons notre compteur de personnes dans les constructeurs public constructor(private _num?: number, private _nom?: string, private _prenom?: string) { Personne._nbrPersonnes++; } H & H: Research and Training 91 / 142
  • 182. Classe Attributs et méthodes statiques TypeScript Créons un getter pour l’attribut static nbrPersonnes public static get nbrPersonnes() { return Personne._nbrPersonnes; } H & H: Research and Training 92 / 142
  • 183. Classe Attributs et méthodes statiques TypeScript Créons un getter pour l’attribut static nbrPersonnes public static get nbrPersonnes() { return Personne._nbrPersonnes; } Testons cela dans file.ts import { Personne } from ’./personne’; console.log(Personne.nbrPersonnes); // affiche 0 let personne: Personne = new Personne(); personne.num = -1; personne.nom = "wick"; personne.prenom = "john"; console.log(Personne.nbrPersonnes); // affiche 1 let personne2: Personne = new Personne(2, ’bob’, ’mike’); console.log(Personne.nbrPersonnes); // affiche 2 H & H: Research and Training 92 / 142
  • 184. Classe Attributs et méthodes statiques TypeScript Exercice Définir une classe Adresse avec trois attributs privés rue, codePostal et ville de type chaı̂ne de caractère Définir un constructeur avec trois paramètres, les getters et setters Dans la classe Personne, ajouter un attribut adresse (de type Adresse) et définir un nouveau constructeur à quatre paramètres et le getter et le setter de ce nouvel attribut Dans file.ts, créer deux objets : un objet adresse (de type Adresse) et personne (de type Personne) prenant comme adresse l’objet adresse Afficher tous les attributs de l’objet personne H & H: Research and Training 93 / 142
  • 185. Héritage TypeScript L’héritage, quand? Lorsque deux ou plusieurs classes partagent plusieurs attributs (et méthodes) Lorsqu’une Classe1 est (une sorte de ) Classe2 H & H: Research and Training 94 / 142
  • 186. Héritage TypeScript L’héritage, quand? Lorsque deux ou plusieurs classes partagent plusieurs attributs (et méthodes) Lorsqu’une Classe1 est (une sorte de ) Classe2 Forme générale class ClasseFille extends ClasseMère { // code }; H & H: Research and Training 94 / 142
  • 187. Héritage TypeScript Exemple Un enseignant a un numéro, un nom, un prénom et un salaire H & H: Research and Training 95 / 142
  • 188. Héritage TypeScript Exemple Un enseignant a un numéro, un nom, un prénom et un salaire Un étudiant a aussi un numéro, un nom, un prénom et un niveau H & H: Research and Training 95 / 142
  • 189. Héritage TypeScript Exemple Un enseignant a un numéro, un nom, un prénom et un salaire Un étudiant a aussi un numéro, un nom, un prénom et un niveau Sémantiquement, enseignant et étudiant sont une sorte de personne H & H: Research and Training 95 / 142
  • 190. Héritage TypeScript Exemple Un enseignant a un numéro, un nom, un prénom et un salaire Un étudiant a aussi un numéro, un nom, un prénom et un niveau Sémantiquement, enseignant et étudiant sont une sorte de personne En plus, les deux partagent plusieurs attributs tels que numéro, nom et prénom H & H: Research and Training 95 / 142
  • 191. Héritage TypeScript Exemple Un enseignant a un numéro, un nom, un prénom et un salaire Un étudiant a aussi un numéro, un nom, un prénom et un niveau Sémantiquement, enseignant et étudiant sont une sorte de personne En plus, les deux partagent plusieurs attributs tels que numéro, nom et prénom Donc, on peut peut utiliser la classe Personne puisqu’elle contient tous les attributs numéro, nom et prénom H & H: Research and Training 95 / 142
  • 192. Héritage TypeScript Exemple Un enseignant a un numéro, un nom, un prénom et un salaire Un étudiant a aussi un numéro, un nom, un prénom et un niveau Sémantiquement, enseignant et étudiant sont une sorte de personne En plus, les deux partagent plusieurs attributs tels que numéro, nom et prénom Donc, on peut peut utiliser la classe Personne puisqu’elle contient tous les attributs numéro, nom et prénom Les classes Étudiant et Enseignant hériteront donc (extends) de la classe Personne H & H: Research and Training 95 / 142
  • 193. Héritage TypeScript Particularité du langage TypeScript Une classe ne peut hériter que d’une seule classe L’héritage multiple est donc non-autorisé. H & H: Research and Training 96 / 142
  • 194. Héritage TypeScript Préparons la classe Enseignant import { Personne } from "./personne"; export class Enseignant extends Personne { } H & H: Research and Training 97 / 142
  • 195. Héritage TypeScript Préparons la classe Enseignant import { Personne } from "./personne"; export class Enseignant extends Personne { } Préparons la classe Etudiant import { Personne } from "./personne"; export class Etudiant extends Personne { } extends est le mot-clé à utiliser pour définir une relation d’héritage entre deux classes H & H: Research and Training 97 / 142
  • 196. Héritage TypeScript Ensuite Créer un attribut niveau dans la classe Etudiant ainsi que ses getter et setter Créer un attribut salaire dans la classe Enseignant ainsi que ses getter et setter H & H: Research and Training 98 / 142
  • 197. Héritage TypeScript Pour créer un objet de type Enseignant import { Enseignant } from ’./enseignant’; let enseignant: Enseignant = new Enseignant(); enseignant.num = 3; enseignant.nom = "green"; enseignant.prenom = "jonas"; enseignant.salaire = 1700; console.log(enseignant); H & H: Research and Training 99 / 142
  • 198. Héritage TypeScript Pour créer un objet de type Enseignant import { Enseignant } from ’./enseignant’; let enseignant: Enseignant = new Enseignant(); enseignant.num = 3; enseignant.nom = "green"; enseignant.prenom = "jonas"; enseignant.salaire = 1700; console.log(enseignant); En exécutant, le résultat est : Enseignant { _num: 3, _nom: ’green’, _prenom: ’jonas ’, _salaire: 1700 } H & H: Research and Training 99 / 142
  • 199. Héritage TypeScript TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le constructeur de la classe mère constructor(_num?: number, _nom?: string, _prenom?: string, private _salaire?: number) { super(_num, _nom, _prenom); } H & H: Research and Training 100 / 142
  • 200. Héritage TypeScript TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le constructeur de la classe mère constructor(_num?: number, _nom?: string, _prenom?: string, private _salaire?: number) { super(_num, _nom, _prenom); } super() fait appel au constructeur de la classe mère H & H: Research and Training 100 / 142
  • 201. Héritage TypeScript TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le constructeur de la classe mère constructor(_num?: number, _nom?: string, _prenom?: string, private _salaire?: number) { super(_num, _nom, _prenom); } super() fait appel au constructeur de la classe mère Maintenant, on peut créer un enseignant ainsi let enseignant: Enseignant = new Enseignant(3, "green", "jonas" , 1700); H & H: Research and Training 100 / 142
  • 202. Héritage TypeScript TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le constructeur de la classe mère constructor(_num?: number, _nom?: string, _prenom?: string, private _salaire?: number) { super(_num, _nom, _prenom); } super() fait appel au constructeur de la classe mère Maintenant, on peut créer un enseignant ainsi let enseignant: Enseignant = new Enseignant(3, "green", "jonas" , 1700); Refaire la même chose pour Etudiant H & H: Research and Training 100 / 142
  • 203. Héritage TypeScript À partir de la classe Enseignant On ne peut avoir accès direct à un attribut de la classe mère C’est-à-dire, on ne peut faire this. num car les attributs ont une visibilité private Pour modifier la valeur d’un attribut privé de la classe mère, il faut soit utiliser les getters/setters soit mettre la visibilité des attributs de la classe mère à protected H & H: Research and Training 101 / 142
  • 204. Héritage TypeScript On peut créer un objet de la classe Enseignant ainsi let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); H & H: Research and Training 102 / 142
  • 205. Héritage TypeScript On peut créer un objet de la classe Enseignant ainsi let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); Ou ainsi let enseignant: Personne = new Enseignant(3, "green" , "jonas", 1700); H & H: Research and Training 102 / 142
  • 206. Héritage TypeScript On peut créer un objet de la classe Enseignant ainsi let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); Ou ainsi let enseignant: Personne = new Enseignant(3, "green" , "jonas", 1700); Ceci est faux let enseignant: Enseignant = new Personne(3, "green" , "jonas"); H & H: Research and Training 102 / 142
  • 207. Héritage TypeScript Remarque Pour connaı̂tre la classe d’un objet, on peut utiliser le mot-clé instanceof H & H: Research and Training 103 / 142
  • 208. Héritage TypeScript Remarque Pour connaı̂tre la classe d’un objet, on peut utiliser le mot-clé instanceof Exemple let enseignant: Personne = new Enseignant(3, "green", "jonas", 1700); console.log(enseignant instanceof Enseignant); // affiche true console.log(enseignant instanceof Personne); // affiche true console.log(personne instanceof Enseignant); // affiche false H & H: Research and Training 103 / 142
  • 209. Héritage TypeScript Exercice 1 Créer un objet de type Etudiant, un deuxième de type Enseignant et un dernier de type Personne stocker les tous dans un seul tableau. 2 Parcourir le tableau et afficher pour chacun soit le numero s’il est personne, soit le salaire s’il est enseignant ou soit le niveau s’il est étudiant. H & H: Research and Training 104 / 142
  • 210. Héritage TypeScript Exercice 1 Créer un objet de type Etudiant, un deuxième de type Enseignant et un dernier de type Personne stocker les tous dans un seul tableau. 2 Parcourir le tableau et afficher pour chacun soit le numero s’il est personne, soit le salaire s’il est enseignant ou soit le niveau s’il est étudiant. Pour parcourir un tableau, on peut faire let personnes: Array<Personne> = [personne, enseignant, etudiant]; for(let p of personnes) { } H & H: Research and Training 104 / 142
  • 211. Héritage TypeScript Solution let personnes: Array<Personne> = [personne, enseignant, etudiant]; for(let p of personnes) { if(p instanceof Enseignant) console.log(p.salaire); else if (p instanceof Etudiant) console.log(p.niveau) else console.log(p.num); } H & H: Research and Training 105 / 142
  • 212. Classe et méthode abstraites TypeScript Classe abstraite C’est une classe qu’on ne peut instancier On la déclare avec le mot-clé abstract H & H: Research and Training 106 / 142
  • 213. Classe et méthode abstraites TypeScript Classe abstraite C’est une classe qu’on ne peut instancier On la déclare avec le mot-clé abstract Si on déclare la classe Personne abstraite export abstract class Personne { ... } H & H: Research and Training 106 / 142
  • 214. Classe et méthode abstraites TypeScript Classe abstraite C’est une classe qu’on ne peut instancier On la déclare avec le mot-clé abstract Si on déclare la classe Personne abstraite export abstract class Personne { ... } Tout ce code sera souligné en rouge let personne: Personne = new Personne(); ... let personne2: Personne = new Personne(2, ’bob’, ’mike’); H & H: Research and Training 106 / 142
  • 215. Classe et méthode abstraites TypeScript Méthode abstraite C’est une méthode non implémentée (sans code) Une méthode abstraite doit être déclarée dans une classe abstraite Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite H & H: Research and Training 107 / 142
  • 216. Classe et méthode abstraites TypeScript Méthode abstraite C’est une méthode non implémentée (sans code) Une méthode abstraite doit être déclarée dans une classe abstraite Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite Déclarons une méthode abstraite afficherDetails() dans Personne abstract afficherDetails(): void ; H & H: Research and Training 107 / 142
  • 217. Classe et méthode abstraites TypeScript Méthode abstraite C’est une méthode non implémentée (sans code) Une méthode abstraite doit être déclarée dans une classe abstraite Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite Déclarons une méthode abstraite afficherDetails() dans Personne abstract afficherDetails(): void ; Remarque La méthode afficherDetails() dans Personne est soulignée en rouge car la classe doit être déclarée abstraite En déclarant la classe Personne abstraite, les deux classes Etudiant et Enseignant sont soulignées en rouge car elles doivent implémenter les méthodes abstraites de Personne H & H: Research and Training 107 / 142
  • 218. Classe et méthode abstraites Pour implémenter la méthode abstraite Placer le curseur sur le nom de la classe Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class H & H: Research and Training 108 / 142
  • 219. Classe et méthode abstraites Pour implémenter la méthode abstraite Placer le curseur sur le nom de la classe Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class Le code généré afficherDetails(): void { throw new Error("Method not implemented."); } H & H: Research and Training 108 / 142
  • 220. Classe et méthode abstraites Pour implémenter la méthode abstraite Placer le curseur sur le nom de la classe Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class Le code généré afficherDetails(): void { throw new Error("Method not implemented."); } Remplaçons le code généré dans Etudiant par afficherDetails(): void { console.log(this.nom + " " + this.prenom + " " + this.niveau); } H & H: Research and Training 108 / 142
  • 221. Classe et méthode abstraites Pour implémenter la méthode abstraite Placer le curseur sur le nom de la classe Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class Le code généré afficherDetails(): void { throw new Error("Method not implemented."); } Remplaçons le code généré dans Etudiant par afficherDetails(): void { console.log(this.nom + " " + this.prenom + " " + this.niveau); } Et dans Enseignant par afficherDetails(): void { console.log(this.nom + " " + this.prenom + " " + this.salaire); } H & H: Research and Training 108 / 142
  • 222. Classe et méthode abstraites TypeScript Pour tester let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); enseignant.afficherDetails(); H & H: Research and Training 109 / 142
  • 223. Classe et méthode abstraites TypeScript Pour tester let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); enseignant.afficherDetails(); En exécutant, le résultat est : green jonas 1700 H & H: Research and Training 109 / 142
  • 224. Interface TypeScript En TypeScript Une classe ne peut hériter que d’une seule classe Mais elle peut hériter de plusieurs interfaces H & H: Research and Training 110 / 142
  • 225. Interface TypeScript En TypeScript Une classe ne peut hériter que d’une seule classe Mais elle peut hériter de plusieurs interfaces Une interface déclarée avec le mot-clé interface comme une classe complètement abstraite (impossible de l’instancier) dont : toutes les méthodes sont abstraites un protocole, un contrat : toute classe qui hérite d’une interface doit implémenter toutes ses méthodes H & H: Research and Training 110 / 142
  • 226. Interface TypeScript Définissons l’interface IMiseEnForme dans i-mise-en-forme.ts export interface IMiseEnForme { afficherNomMajuscule(): void; afficherPrenomMajuscule() : void; } H & H: Research and Training 111 / 142
  • 227. Interface TypeScript Définissons l’interface IMiseEnForme dans i-mise-en-forme.ts export interface IMiseEnForme { afficherNomMajuscule(): void; afficherPrenomMajuscule() : void; } Pour hériter d’une interface, on utilise le mot-clé implements export abstract class Personne implements IMiseEnForme { ... } H & H: Research and Training 111 / 142
  • 228. Interface TypeScript La classe Personne est soulignée en rouge Placer le curseur sur la classe Personne Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class H & H: Research and Training 112 / 142
  • 229. Interface TypeScript La classe Personne est soulignée en rouge Placer le curseur sur la classe Personne Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class Le code généré afficherNomMajuscule(): void { throw new Error("Method not implemented."); } afficherPrenomMajuscule(): void { throw new Error("Method not implemented."); } H & H: Research and Training 112 / 142
  • 230. Interface TypeScript Modifions le code de deux méthodes générées afficherNomMajuscule(): void { console.log(this.nom.toUpperCase()); } afficherPrenomMajuscule(): void { console.log(this.prenom.toUpperCase()); } H & H: Research and Training 113 / 142
  • 231. Interface TypeScript Pour tester let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); enseignant.afficherNomMajuscule(); enseignant.afficherPrenomMajuscule(); H & H: Research and Training 114 / 142
  • 232. Interface TypeScript Pour tester let enseignant: Enseignant = new Enseignant(3, " green", "jonas", 1700); enseignant.afficherNomMajuscule(); enseignant.afficherPrenomMajuscule(); En exécutant, le résultat est : GREEN JONAS H & H: Research and Training 114 / 142
  • 233. Interface TypeScript Remarque Une interface peut hériter de plusieurs autres interfaces (mais pas d’une classe) Pour cela, il faut utiliser le mot-clé extends et pas implements car une interface n’implémente jamais de méthodes. H & H: Research and Training 115 / 142
  • 234. Interface TypeScript Une deuxième utilisation En TypeScript, une interface peut être utilisée comme une classe Model de plusieurs autres interfaces (mais pas d’une classe) Elle contient des attributs (qui sont par définition publiques) et des méthodes (abstraites) H & H: Research and Training 116 / 142
  • 235. Interface TypeScript Une deuxième utilisation En TypeScript, une interface peut être utilisée comme une classe Model de plusieurs autres interfaces (mais pas d’une classe) Elle contient des attributs (qui sont par définition publiques) et des méthodes (abstraites) Exemple export interface Person { num: number; nom: string; prenom: string; } H & H: Research and Training 116 / 142
  • 236. Interface TypeScript Impossible d’instancier cette interface avec l’opérateur new, mais on peut utiliser les objets JavaScript let person: Person = { num: 1000, nom: ’turing’, prenom: ’alan’ }; console.log(person); // affiche { num: 1000, nom: ’turing’, prenom: ’alan’ } H & H: Research and Training 117 / 142
  • 237. Interface TypeScript Impossible d’instancier cette interface avec l’opérateur new, mais on peut utiliser les objets JavaScript let person: Person = { num: 1000, nom: ’turing’, prenom: ’alan’ }; console.log(person); // affiche { num: 1000, nom: ’turing’, prenom: ’alan’ } On peut rendre les attributs optionnels export interface Person { num?: number; nom?: string; prenom?: string; } H & H: Research and Training 117 / 142
  • 238. Interface TypeScript Ainsi on peut faire let person: Person = { nom: ’turing’, }; console.log(person) // affiche { nom: ’turing’ } H & H: Research and Training 118 / 142
  • 239. Interface TypeScript Ainsi on peut faire let person: Person = { nom: ’turing’, }; console.log(person) // affiche { nom: ’turing’ } Pour la suite, gardons l’attribut nom obligatoire export interface Person { num?: number; nom: string; prenom?: string; } H & H: Research and Training 118 / 142
  • 240. Interface TypeScript Duck typing Un concept un peu proche du polymorphisme Il se base sur une série d’attributs et de méthodes attendus. L’objet est considéré valide quel que soit sa classe s’il respecte les attributs et les méthodes attendus. H & H: Research and Training 119 / 142
  • 241. Interface TypeScript Duck typing Un concept un peu proche du polymorphisme Il se base sur une série d’attributs et de méthodes attendus. L’objet est considéré valide quel que soit sa classe s’il respecte les attributs et les méthodes attendus. Exemple : considérons la fonction afficherNom() définie dans file.ts function afficherNom(p: Person){ console.log(p.nom) } H & H: Research and Training 119 / 142
  • 242. Interface TypeScript Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché afficherNom(person); // affiche turing afficherNom(personne); // affiche wick H & H: Research and Training 120 / 142
  • 243. Interface TypeScript Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché afficherNom(person); // affiche turing afficherNom(personne); // affiche wick Ceci est aussi correcte car alien a un attribut nom let alien = { couleur: ’blanc’, nom: ’white’ }; afficherNom(alien); // affiche white H & H: Research and Training 120 / 142
  • 244. Interface TypeScript Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché afficherNom(person); // affiche turing afficherNom(personne); // affiche wick Ceci est aussi correcte car alien a un attribut nom let alien = { couleur: ’blanc’, nom: ’white’ }; afficherNom(alien); // affiche white Ceci génère une erreur car voiture n’a pas d’attribut nom let voiture = { marque: ’ford’, modele: ’fiesta’, num: 100000}; afficherNom(voiture); H & H: Research and Training 120 / 142
  • 245. Décorateur TypeScript Décorateur L’équivalent d’annotations en Java et php Méta-programmation (modification des informations/comportement sur un objet/classe) Utilisé avec le préfixe @ H & H: Research and Training 121 / 142
  • 246. Décorateur TypeScript Décorateur L’équivalent d’annotations en Java et php Méta-programmation (modification des informations/comportement sur un objet/classe) Utilisé avec le préfixe @ Ajoutons le décorateur @f() à afficherDetails() dans Enseignant @f() afficherDetails(): void { console.log(this.nom + " " + this.prenom + " " + this. salaire); } H & H: Research and Training 121 / 142
  • 247. Décorateur TypeScript Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une fonction) export function f() { return function(a,b,c){ console.log(’before afficherDetails()’); } } H & H: Research and Training 122 / 142
  • 248. Décorateur TypeScript Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une fonction) export function f() { return function(a,b,c){ console.log(’before afficherDetails()’); } } Testons maintenant le code suivant et vérifions que la fonction associée au décorateur a bien été exécutée (ajouter l’option --experimentalDecorators à la commande de transpilation) let enseignant: Enseignant = new Enseignant(3, "green", "jonas", 1700); enseignant.afficherDetails(); H & H: Research and Training 122 / 142
  • 249. Décorateur TypeScript Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une fonction) export function f() { return function(a,b,c){ console.log(’before afficherDetails()’); } } Testons maintenant le code suivant et vérifions que la fonction associée au décorateur a bien été exécutée (ajouter l’option --experimentalDecorators à la commande de transpilation) let enseignant: Enseignant = new Enseignant(3, "green", "jonas", 1700); enseignant.afficherDetails(); Le résultat est : before afficherDetails() green jonas 1700 H & H: Research and Training 122 / 142
  • 250. Généricité TypeScript Généricité Un concept défini dans tous les LOO avec < ... > Elle permet de définir des fonctions, classes, interfaces qui s’adaptent avec plusieurs types H & H: Research and Training 123 / 142
  • 251. Généricité TypeScript Exemple si on a besoin d’une classe dont les méthodes effectuent les mêmes opérations quel que soit le type d’attributs somme pour entiers ou réels, concaténation pour chaı̂nes de caractères, ou logique pour booléens... ... Impossible sans définir plusieurs classes (une pour chaque type) H & H: Research and Training 124 / 142
  • 252. Généricité TypeScript Solution avec la généricité export class Operation<T>{ constructor(private var1: T, private var2: T) { } public plus() { if (typeof this.var1 == ’string’) { return this.var1 + this.var2; } else if (typeof this.var1 == ’number’ && typeof this.var2 == ’ number’) { return this.var1 + this.var2; } else if (typeof this.var1 == ’boolean’ && typeof this.var2 == ’ boolean’) { return this.var1 || this.var2; } else { throw "error" } } } H & H: Research and Training 125 / 142
  • 253. Généricité TypeScript Nous pouvons donc utiliser la même méthode qui fait la même chose pour des types différents let operation1: Operation<number> = new Operation(5, 3); console.log(operation1.plus()); // affiche 8 let operation2: Operation<string> = new Operation("bon", "jour"); console.log(operation2.plus()); // affiche bonjour let operation3: Operation<number> = new Operation(5.2, 3.8); console.log(operation3.plus()); // affiche 9 let operation4: Operation<boolean> = new Operation(true, false); console.log(operation4.plus()); // affiche true H & H: Research and Training 126 / 142
  • 254. Map TypeScript Map (dictionnaire) Type fonctionnant avec un couple (clé,valeur) La clé doit être unique Chaque élément est appelé entrée (entry) Les éléments sont stockés et récupérés dans l’ordre d’insertion Disponible depuis ES5 puis modifié dans ES6 H & H: Research and Training 127 / 142
  • 255. Map TypeScript Map (dictionnaire) Type fonctionnant avec un couple (clé,valeur) La clé doit être unique Chaque élément est appelé entrée (entry) Les éléments sont stockés et récupérés dans l’ordre d’insertion Disponible depuis ES5 puis modifié dans ES6 Pour tester, utiliser l’option -t ES6 H & H: Research and Training 127 / 142
  • 256. Map TypeScript Pour créer un Map let map: Map<string, number> = new Map([ [’php’, 17], [’java’, 10], [’c’, 12] ]); console.log(map); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12 } H & H: Research and Training 128 / 142
  • 257. Map TypeScript Pour créer un Map let map: Map<string, number> = new Map([ [’php’, 17], [’java’, 10], [’c’, 12] ]); console.log(map); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12 } Ajouter un élément à un Map map.set(’html’, 18); H & H: Research and Training 128 / 142
  • 258. Map TypeScript Pour créer un Map let map: Map<string, number> = new Map([ [’php’, 17], [’java’, 10], [’c’, 12] ]); console.log(map); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12 } Ajouter un élément à un Map map.set(’html’, 18); Pour ajouter plusieurs éléments à la fois map.set(’html’, 18) .set(’css’, 12); H & H: Research and Training 128 / 142
  • 259. Map TypeScript Si la clé existe déjà, la valeur sera remplacée console.log(map.set(’html’, 20)); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 } H & H: Research and Training 129 / 142
  • 260. Map TypeScript Si la clé existe déjà, la valeur sera remplacée console.log(map.set(’html’, 20)); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 } Pour récupérer la valeur associée à une clé console.log(map.get(’php’)); // affiche 17 H & H: Research and Training 129 / 142
  • 261. Map TypeScript Si la clé existe déjà, la valeur sera remplacée console.log(map.set(’html’, 20)); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 } Pour récupérer la valeur associée à une clé console.log(map.get(’php’)); // affiche 17 Pour vérifier l’existence d’une clé console.log(map.has(’php’)); // affiche true H & H: Research and Training 129 / 142
  • 262. Map TypeScript Si la clé existe déjà, la valeur sera remplacée console.log(map.set(’html’, 20)); // affiche Map { ’php’ => 17, ’java’ => 10, ’c’ => 12, ’html’ => 20 } Pour récupérer la valeur associée à une clé console.log(map.get(’php’)); // affiche 17 Pour vérifier l’existence d’une clé console.log(map.has(’php’)); // affiche true Pour supprimer un élément selon la clé map.delete(’php’); H & H: Research and Training 129 / 142
  • 263. Map TypeScript Pour récupérer la liste des clés d’un Map console.log(map.keys()); // affiche [Map Iterator] { ’java’, ’c’, ’html’, ’css’ } H & H: Research and Training 130 / 142
  • 264. Map TypeScript Pour récupérer la liste des clés d’un Map console.log(map.keys()); // affiche [Map Iterator] { ’java’, ’c’, ’html’, ’css’ } Pour récupérer la liste des valeurs d’un Map console.log(map.values()); // affiche [Map Iterator] { 10, 12, 20, 12 } H & H: Research and Training 130 / 142
  • 265. Map TypeScript Pour récupérer la liste des clés d’un Map console.log(map.keys()); // affiche [Map Iterator] { ’java’, ’c’, ’html’, ’css’ } Pour récupérer la liste des valeurs d’un Map console.log(map.values()); // affiche [Map Iterator] { 10, 12, 20, 12 } Pour récupérer la liste des entrées d’un Map console.log(map.entries()); /* affiche [Map Entries] { [ ’java’, 10 ], [ ’c’, 12 ], [ ’html’, 20 ], [ ’css’, 12 ] } */ H & H: Research and Training 130 / 142
  • 266. Map TypeScript Pour parcourir un Map, on peut utiliser entries() (solution ES5) for (let elt of map.entries()) console.log(elt[0] + " " + elt[1]); /* affiche java 10 c 12 html 20 css 12 */ H & H: Research and Training 131 / 142
  • 267. Map TypeScript Pour parcourir un Map, on peut utiliser entries() (solution ES5) for (let elt of map.entries()) console.log(elt[0] + " " + elt[1]); /* affiche java 10 c 12 html 20 css 12 */ Depuis ES6, on peut faire for (let [key, value] of map) { console.log(key, value); } /* affiche java 10 c 12 html 20 css 12 */ H & H: Research and Training 131 / 142
  • 268. Map TypeScript On peut le faire aussi avec keys() for (let key of map.keys()) { console.log(key + " " + map.get(key)); } /* affiche java 10 c 12 html 20 css 12 */ H & H: Research and Training 132 / 142
  • 269. Map TypeScript Une deuxième solution consiste à utiliser forEach (affiche seulement les valeurs) map.forEach(elt => console.log(elt)); /* affiche 10 12 20 12 */ H & H: Research and Training 133 / 142
  • 270. Map TypeScript On peut aussi définir une méthode et l’appeler dans forEach (affiche seulement les valeurs) map.forEach(elt => afficher(elt)); function afficher(elt) { console.log(elt) } H & H: Research and Training 134 / 142