TypeScript pour Angular

1
 Plan
1. Introduction
2. Variable
3. Constante
4. Fonction
5. Concept de décomposition (spread)
6. Import / Export

2
7. Classe
8. Héritage
9. Classe et méthode abstraites
 Introduction
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
3 ❖ ECMAScript version 5 (ES5) ou ES 2009
❖ ECMAScript version 6 (ES6) ou ES 2015)
❖ ECMAScript version 7 (ES7) ou ES2016
 Introduction
TypeScript

❖ langage de programmation
▪procédural et orienté objet
▪supportant le typage statique, dynamique et générique
❖ open-source

4
❖ créé par Anders Hejlsberg (inventeur de C#) de MicroSoft
❖ utilisé par Angular (Google)
 Introduction
TypeScript : sur-couche de ES6 ajoutant
❖ typage
❖ meilleure gestion de module (à ne pas confondre avec les modules
Angular)

5
Le navigateur ne comprend pas le TypeScript
Il faut le transcompiler (ou transpiler) en JavaScript

on a besoin ?
❖ Node.js pour exécuter la commande node
❖ TypeScript pour exécuter la commande tsc
Installation de 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)
7lancer la commande npm install -g typescript

vérifier la version avec la commande tsc -v

H
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
8
❖ enum pour les énumérations (tableau de constantes)

❖ Les types undefined et null du JavaScript sont aussi disponibles.

1. Variable

Déclarer une variable

var nomVariable: typeVariable;
var x: number;
Initialiser une variable
x = 2;
Déclarer et initialiser une variable
var x: number = 2;

9
x = "bonjour"; // génère une erreur car une variable ne change
pas de type
 Pour les chaînes de caractères, on peut faire
var str1: string = "TypeScript";
var str2: string = ’ pour Angular’;
On peut aussi utiliser template strings
var str3: string = ‘Cours ${ str2 } ${ str1 }
Que pensez-vous de Type Script ? ‘;
console.log(str3);
// affiche Cours TypeScript pour Angular
10Que pensez-vous de TypeScript ?
L’ équivalent de faire
var str3: string = "Bonjour " + str2 + " " + str1 + "\n Que
pensez-vous de 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 ]
11Ou encore plus simple
var list: Array<number> = [1, 2, 3];
console.log(list);
// affiche [ 1, 2, 3 ]
H
 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)
12
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
 Tuples
Les tuples permettent de stocker plusieurs champs de types différents.
var tup = []; // Tuple vide
var mytuple = [10,"Hello","World","typeScript"];
mytuple.length // retourne nb de champs du tuple
mytuple.push(12) // ajoute un élément au tuple
mytuple.pop() // supprime et retourne la dernière valeur du tuple

13
 any
Exemple
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
14var x: any;
x = "bonjour";
x = 5;
var y: number = x;
 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
15var x: unknown;
x = "bonjour";
x = 5;
var y: number = x; H
 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;
16
 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;
}
17
console.log(x); // affiche ReferenceError: x is not defined
 Conversion
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
18
 Alias de type
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’ ]

19
 Constante
se d´déclare avec le mot-clé const
const X: any = 5;
X = "bonjour";

20
 Fonctions
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;
21
}
Une fonction qui ne retourne rien a le type void
function direBonjour(): void {
console.log("bonjour");
 Fonctions
Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si
aucune valeur n'est passée ou si c'est la valeur undefined qui est passée.
function division(x: number, y: number = 1) : number
{
return x / y;
}
console.log(division(10)); // affiche 10
22console.log(division(10, 2)); // affiche 5
}
 Fonctions
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;
}
23
console.log(division(10)); // affiche 10
console.log(division(10, 2)); // affiche 5
 Fonctions
Paramètres du reste (Rest parameters)
Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme
d'un tableau.
function somme(x: number, ...tab: number[]): number {
for (let elt of tab)
x += elt;
return x;
24}

console.log(somme(10)); // affiche 10
console.log(somme(10, 5)); // affiche 15
console.log(somme(10, 1, 6)); // affiche 17
H
 Fonctions
Paramètres à plusieurs types autorisés
Il est possible d’autoriser plusieurs types pour un param`etre
function stringOrNumber(param1: string | number,
param2: number): number {
if (typeof param1 == "string")
return param1.length + param2;
return param1 + param2;
25
}
console.log(stringOrNumber("bonjour", 3)); // affiche 10
console.log(stringOrNumber(5, 3)); // affiche 8
 Fonctions
Paramètres Fonctions 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
26
let somme = (a: number, b: number): number => a + b;
Appeler une fonction fléchée
let resultat: number = somme (1, 3);
H
 Fonctions
Paramètres Fonctions fléchées
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
27
Déclaration d’une fonction fléchée sans paramètre
let sayHello = (): void => console.log(’Hello’);
sayHello(); // affiche Hello
 Fonctions
Paramètres Fonctions fléchées
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
28
Déclaration d’une fonction fléchée sans paramètre
let sayHello = (): void => console.log(’Hello’);
sayHello(); // affiche Hello
 Fonctions
Paramètres Fonctions fléchées
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
let obj = { nom: ’ ISET’, afficherNom: () => {
console.log(this.nom) } }
obj.afficherNom(); // affiche undefined

29
Sans les fonctions fléchées
let obj = { nom: ’ISET’, afficherNom: function() {
console.log(this.nom) } }
obj.afficherNom(); // affiche ISET
 Fonctions
Concept de décomposition (spread)
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));
30
 Fonctions
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
En utilisant les callback trois paramètre valeur, indice et tableau
31
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 ] */
Fonctions
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ément

tab.map(elt => elt + 3)
32
.filter(elt => elt > 5)
.forEach(elt => console.log(elt)); // affiche 6 8
Fonctions
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
33
NB: selon l’ordre d’appel de ces méthodes, le résultat peut changer.
 Fonctions
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
34
❖ 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
.reduce((sum, elt) => sum + elt, 0); premier paramètre de reduce initialisé à 0
Fonctions
Import / Export
❖ 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.
35
Fonctions
Etant 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; }

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; }
36
Ou
export { somme, produit };
Fonctions
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

37
Classes
Qu’est ce qu’une classe en POO?
❖ 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
38
❖ 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
Classes
De quoi est composé une classe?
Nom Classe
les attributs

les méthodes

❖Attribut : [visibilité] + nom + type

❖Méthode : [visibilité] + nom + arguments + valeur de retour signature:
39
exactement comme les fonctions en procédurale
Classes
Considérons la classe Personne définie dans personne.ts
export class Personne {
num: number;
nom: string;
prenom: string;
}
En TypeScript
40
❖Toute classe a un constructeur par défaut sans paramètre.
❖Par défaut, la visibilité des attributs est public.
Classes
Si on voulait créer un objet de la classe Personne avec les valeurs 1, tounsi et
mohamed
Etape 1 : importer la classe Personne dans file.ts
import { Personne } from './personne';
Etape 2 : déclarer un objet
let personne: Personne;
Etape 3 : créer l’objet (instanciation) de type Personne
41
personne = new Personne();
personne.num=1; personne.nom='tounsi'; personne.prenom= 'mohamed';
// let personne: Personne = new Personne(); Etape2+3
console.log(personne)
Classes
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)
42
Convention
Mettre la visibilité private ou protected pour tous les attributs
Mettre la visibilité public pour toutes les méthodes
Classes
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&

43
 Classes
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); }
44
public set nom(_nom: string) {
this._nom = _nom; }
public set prenom(_prenom: string) {
this._prenom = _prenom; } }
 Classes
Pour tester, rien à changer dans file.ts
Pour transpiler, ajouter l’option -t es5,
le résultat est :
Personne {_num: 1, _nom: ’ tounsi’, _prenom: ’ mohamed’ }

Testons avec une valeur négative pour l’attribut numero

personne.num = -1;
45

le résultat est :
Personne {_num: 0, _nom: ’ tounsi’, _prenom: ’ mohamed’ }
 Classes
Question
Comment récupérer les attributs (prives) 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
46
❖ On l’utilise comme un attribut
 Classes
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; }
47

Pour tester
console.log(personne.num); // affiche 1
 Constructeur
❖ 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
48
❖ Il peut contenir la visibilité des attributs si on veut simplifier la
déclaration
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
49
public constructor(_num: number, _nom: string, _prenom:string) {
this._num = (_num >= 0 ? _num : 0);
this._nom = _nom;
this._prenom = _prenom;
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) {
}

Hypothèse
Et si nous voulions qu’un attribut ait une valeur partag´ee par toutes les
instances (par
exemple, le nombre d’objets instanciés de la classe Personne)
Solution : attribut statique ou attribut de classe
50
Un attribut dont la valeur est partagée par toutes les instances de la classe.
Exemple
Si on voulait créer un attribut contenant le nombre d’objets crées à
partir de la classe Personne
Notre attribut doit être déclare static, sinon chaque objet pourrait avoir sa
propre valeur pour cet attribut
Incrémentons notre compteur de personnes dans les constructeurs
public constructor(private _num?: number, private _nom?: string, private _prenom?: string) {
Personne._nbrPersonnes++;
}
51
Héritage
❖ 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 };
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
52
❖ En plus, les deux partagent plusieurs attributs tels que numéro, nom et prénom
❖ Donc, on peut utiliser la classe Personne puisqu’elle contient tous les attributs numéro, nom
et prénom
Particularité du langage TypeScript
Une classe ne peut hériter que d’une seule classe
L’héritage multiple est donc non-autorisé.

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 { }
53
extends est le mot-clé à utiliser pour définir une relation d’héritage
entre deux classes
Remarque

Pour connaître la classe d’un objet, on peut utiliser le mot-clé instanceof

console.log(enseignant instanceof Personne);

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 numéro s’il est personne,
soit le salaire s’il est enseignant ou soit le niveau s’il est étudiant.

54
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 {
abstract afficherDetails(): void ;
….

}
Méthode
55 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