Introduction

TypeScript

TypeScript
◼ TypeScript est un langage proposé par Microsoft en 2012.
◼ Il est open source, développé comme sur-ensemble de JS ainsi
tout code valide en JS l’est également en TypeScript.
◼ Langage de programmation :
- procédural et orienté-objet
- supportant le typage statique, dynamique & générique
◼ TypeScript rend JS plus proche d'un langage orienté objet
à typage statique comme (Java, C#,...).
◼ TypeScript peut introduire de nouvelles fonctionnalités de
langage tout en conservant la compatibilité avec les moteurs
JavaScript existants supportant ES3, ES5 et ES6
 Introduction

TypeScript
Principe de fonctionnement de TypeScript
◼ TypeScript integre les differentes normes de JavaScript (ES5 et
ES6) chose qui veut dire qu'il est possible de developper des
applications TypeScript pour les vieux comme les nouveaux
navigateurs
 Introduction

TypeScript

Le navigateur ne comprend pas TypeScript

Il faut le transcompiler (ou transpiler) en JavaScript

transpiler
[Link] [Link]
 Introduction

TypeScript
Comment va t-on procéder dans ce c o u r s ?

transpiler ex´ecuter
[Link] [Link] r´esultat

tsc f ile . ts node f i l e . j s

2 solutions

t s c f i l e . t s | node f i l e . j s ts- n o d e f i l e . t s
 Introduction

TypeScript

De quoi on a besoin ?
[Link] pour exécuter la commande node
TypeScript pour exécuter la commande tsc
ts-node pour exécuter la commande ts-node
 Introduction

TypeScript

Pour [Link], il faut

aller sur [Link]
choisir la dernière version, télécharger et installer

Pour vérifier l’installation depuis une console (invite de

commandes), exéc utez
node -v
 Introduction

TypeScript

Pour installer TypeScript, ouvrez une console (invite de

commandes) et exécutez
npm install -g typescript

Pour vérifier l’installation depuis une console (invite de

commandes), exécutez
tsc -v
 Introduction

TypeScript

Pour installer ts-node, ouvrez une console (invite de commandes)

et exécutez
npm install -g ts-node

Pour vérifier l’installation depuis une console (invite de

commandes), exécutez
ts-node -v
 Fichier de configuration

TypeScript

Fichier de configuration : [Link]

Situe´ a` la racine du projet TypeScript

Consulte´ par le compilateur a` chaque exe´cution de la commande tsc

Si le fichier n’existe pas, des valeurs par de´faut seront utilise´es

([Link]

Pour le ge´ne´rer, exe´cutez

tsc --init
 Fichier de configuration

TypeScript

Contenu de [Link] g énéré (sans les commentaires)

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"forceConsistentCasingInFileNames": true,
"strict": true,
"compileOnSave": true
}
}
 Fichier de configuration

TypeScript

Ajoutons l’instruction suivante dans [Link]

class Personne{
_nom;
_prenom;
constructor(nom, prenom){
this._nom = nom;
this._prenom = prenom;
}
toString(){
return `${this._nom} ${this._prenom}`;
}
}
let p = new Personne("Dupont", "Jean");
[Link]([Link]());
 Fichier de configuration

TypeScript

Lanc ez la commande
tsc

Vérifions le contenu suivant dans [Link]

var Personne = /** @class */ (function () {
function Personne(nom, prenom) {
this._nom = nom;
this._prenom = prenom;
}
[Link] = function () {
return "".concat(this._nom, " ").concat(this._prenom);
};
return Personne;
}());
var p = new Personne("Dupont", "Jean");
[Link]([Link]());
 Fichier de configuration

TypeScript
Modifions la valeur de la propriété target dans [Link]
"target": "es2016"

Relancez la commande
tsc

Vérifions le contenu suivant dans [Link]

class Personne{
constructor(nom, prenom){
this._nom = nom;
this._prenom = prenom;
}
toString(){
return `${this._nom} ${this._prenom}`;
}
}
let p = new Personne("Dupont", "Jean");
[Link]([Link]());
 Fichier de configuration

TypeScript
Lanc ez la commande tsc en spéc ifiant le nom du fichier
tsc [Link]

Vérifions le contenu suivant dans [Link]

var Personne = /** @class */ (function () {
function Personne(nom, prenom) {
this._nom = nom;
this._prenom = prenom;
}
[Link] = function () {
return "".concat(this._nom, " ").concat(this._prenom);
};
return Personne;
}());
var p = new Personne("Dupont", "Jean");
[Link]([Link]());
 Fichier de configuration

TypeScript
Lanc ez la commande tsc en spéc ifiant le nom du fichier
tsc [Link]

Vérifions le contenu suivant dans [Link]

var Personne = /** @class */ (function () {
function Personne(nom, prenom) {
this._nom = nom;
this._prenom = prenom;
}
[Link] = function () {
return "".concat(this._nom, " ").concat(this._prenom);
};
return Personne;
}());
var p = new Personne("Dupont", "Jean");
[Link]([Link]());

Si on précise un nom de fichier après la commande tsc, le fichier

[Link] sera ignore.
 Fichier de configuration

TypeScript

Pour transpiler le code TypeScript en ES2016, exécutez

tsc [Link] --target es2016

Ou
tsc [Link] -t es2016
 Fichier de configuration

TypeScript
Créons un deuxième fichier [Link] avec le contenu suivant
[Link]("Hello World!");

Lanc ez la commande
tsc

Remarque
Vérifier que les deux fichiers [Link] et [Link] ont été transpile´
en [Link] et [Link].
 Fichier de configuration

Pour ne pas transpiler [Link], ajoutons la cle´ exclude dans [Link]

{
"exclude": ["[Link]"],
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"compileOnSave": true
}
}

Supprimez les fichiers .js avant de lancer

tsc

Remarque

Ve´rifier que seul le fichier [Link] a e´te´ transpile´ en [Link].

 Fichier de configuration

Pour transpiler seulement [Link], ajoutons la cle´ include dans [Link]

{
"include": ["[Link]"],
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"compileOnSave": true
}
}

Supprimez les fichiers .js avant de lancer

tsc

Remarque

Ve´rifier que seul le fichier [Link] a e´te´ transpile´ en [Link].

 Typage

TypeScript

Trois modes de typage en TypeScript

Statique : le développeur précise le type a` la déclaration de la
variable
Dynamique : le type d’une variable est déterminé a` l’exécution
(comme en J S )
G énérique : il permet au développeur de paramétrer un type
complexe
 Typage Typage dynamique

TypeScript
Déclarer une variable
var nomVariable = valeurInitiale;

Exemple
var x = 2

JavaScript détermine dynamiquement le type de la variable

[Link](typeof x);
// affiche number

x = "Bonjour";
// Ceci genere une erreur
 Typage Typage dynamique

TypeScript

Avec le typage dynamique, l’erreur suivante ne sera détectée qu’a`

l’exécution

[Link]([Link]());

Remarques
Avec le typage statique (en utilisant un IDE), cette erreur sera détectée
avant la transpilation
 Typage Typage statique

TypeScript
Déclarer une variable
var nomVariable: typeVariable;

Exemple
var x: number;

Initialiser une variable

x = 2;
 Typage Typage statique

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;
 Typage Typage statique

TypeScript
Quels types pour les variables en TypeScript ?

number pour les nombres (entiers, re´els, binaires, de´cimaux, hexade´cimaux...)

string pour les chaˆınes de caracte`re

boolean pour les boole´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 e´nume´rations (tableau de constantes)

 Typage Typage statique

TypeScript
Quels types pour les variables en TypeScript ?

number pour les nombres (entiers, re´els, binaires, de´cimaux, hexade´cimaux...)

string pour les chaˆınes de caracte`re

boolean pour les boole´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 e´nume´rations (tableau de constantes)

Les types undefined et null du JavaScript sont aussi disponibles.

 Typage Typage statique

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 ?
`;
[Link](str3);
// affiche Bonjour john wick
Que pensez-vous de TypeScript ?
 Typage Typage statique

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 ?
`;
[Link](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 ?";
 Typage Typage statique

TypeScript
Exemple avec any
var x: any;
x = "bonjour";
x = 5;
[Link](x);
// affiche 5;

Une variable de type any peut être affectée a` n’importe quel autre
type de variable
var x: any;
x = "bonjour";
x = 5;
var y: number = x;
 Typage Typage statique

Déclarons une énumération (dans [Link])

enum mois { JANVIER, FEVRIER, MARS, AVRIL, MAI, JUIN, JUILLET,
AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE, DECEMBRE };

L’indice du premier élément est 0

[Link]([Link])
// 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 };

E n affichant maintenant, le résultat est

[Link]([Link])
// affiche 4
 Typage Typage statique

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 };
 Typage Typage statique

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 };

E n affichant, le résultat est

[Link]([Link]);
// affiche 3
[Link]([Link]);
// affiche 12
[Link]([Link]);
// affiche 3

C e c i est une erreur, on ne peut modifier une constante

[Link] = 3;
 Typage Typage statique

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
};

[Link](obj);
// affiche { nom: 'wick', numero: 100 }

[Link](typeof obj);
// affiche object
 Typage Typage statique

TypeScript

On peut modifier les valeurs d’un objet ainsi

[Link] = 'abruzzi';
obj['numero'] = 200;

[Link](obj);
// affiche { nom: 'abruzzi', numero: 200 }

Cec i est une erreur

[Link] = 125;
 Quelques ope´rateurs sur les variables De´structuration ou Destructuring (...)

TypeScript

Destŕucturation (ES6)
permet d’extraire les données d’un objet ou un tableau dans des
variables.

Exemple
var personne = { nom: 'wick', prenom: 'john' };
var { nom, prenom } = personne;

[Link](nom, prenom);
// affiche wick john
 Typage 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;
 Typage 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;

Ce c i génère une erreur

y = [2, 5];
 Typage 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);

[Link](a);
// affiche 2

[Link](b);
// affiche 3.5
 Typage 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);

[Link](a);
// affiche 2

[Link](b);
// affiche 3.5

Il existe une fonction de conversion pour chaque type.

 Quelques ope´rateurs sur les variables Coalescence nulle et affectation ( ??=)

TypeScript
Coalescence nulle et affectation (??=)

Introduit dans ES2021.

Intégré dans TypeScript depuis la version 4.0.

L’opérateur ??= permet d’affecter une valeur à la variable si s a valeur actuelle est
null ou undefined
let nom:string;
nom??= "doe";
[Link](nom);
// affiche doe

C’est équivalent à
let nom: string;
if (nom === null || nom === undefined) {
nom = 'doe';
}
[Link](nom);
// affiche doe
 Constante

TypeScript

L es constantes
se déclare avec le mot-cle´ const
permet a` une variable de ne pas changer de valeur

Cec i 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.
 Constante

TypeScript
Avec TypeScript 3.4, on peut définir une constante avec une assertion
s a n s préciser le type
let X = "bonjour" as const;

[Link](X);
// affiche bonjour

[Link](typeof X);
// affiche string

let Y: string = "bonjour";

[Link](X == Y);
//affiche true
 Constante

TypeScript
Avec TypeScript 3.4, on peut définir une constante avec une assertion
s a n s préciser le type
let X = "bonjour" as const;

[Link](X);
// affiche bonjour

[Link](typeof X);
// affiche string

let Y: string = "bonjour";

[Link](X == y);
//affiche true

Ceci g énère une erreur car une constante ne peut changer de valeur
X = "hello";
 Constante

TypeScript
Avec TypeScript 3.4, on peut aussi définir une constante ainsi
let X = <const>"bonjour";

[Link](X);
// affiche bonjour

[Link](typeof X);
// affiche string

let y: string = "bonjour";

[Link](X == y);
//affiche true
 Constante

TypeScript
Avec TypeScript 3.4, on peut aussi définir une constante ainsi
let X = <const>"bonjour";

[Link](X);
// affiche bonjour

[Link](typeof X);
// affiche string

let y: string = "bonjour";

[Link](X == y);
//affiche true

Ceci g énère une erreur car une constante ne peut changer de valeur
X = "hello";
 Fonction De´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);
[Link](resultat);
// affiche 4
 Fonction De´claration et appel

TypeScript
L e 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);
 Fonction De´claration et appel

TypeScript
L e 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);
 Fonction Parame`tres par de´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;
}

[Link](division(10));
// affiche 10

[Link](division(10, 2));
// affiche 5
 Fonction Parame`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;
}

[Link](division(10));
// affiche 10

[Link](division(10, 2));
// affiche 5
 Fonction Parame`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;
}

[Link](somme(10));
// affiche 10

[Link](somme(10, 5));
// affiche 15

[Link](somme(10, 1, 6));
// affiche 17
 Fonction Parame`tres a` plusieurs types autorise´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 [Link] + param2;
return param1 + param2;
}

[Link](stringOrNumber("bonjour", 3));
// affiche 10

[Link](stringOrNumber(5, 3));
// affiche 8
 Fonction Parame`tres en lecture seule

TypeScript
L e mot-cle´ 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 < [Link]; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}

On peut aussi utiliser le mot-cle´ readonly qui s’applique sur les tableaux et les
tuples
function incrementAll(tab: readonly number[]): void {
for (let i = 0; i < [Link]; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}
 Fonction Fonctions ge´ne´ratrices

TypeScript

Fonction g eń eŕ atrice

déclarée avec function*

utilise le mot-cle´ yield pour générer plusieurs valeurs

Exemple
function* generateur() {
for (let i = 0; i < 3; i++) {
yield i;
}
}
 Fonction Fonctions ge´ne´ratrices

TypeScript
Lorsqu’on appelle une fonction g énératrice, so n corps n’est pas
exécuté immédiatement, c’est un itérateur qui est renvoyé.
var f = generateur();

La methodé next de l’iteŕ ateur

E n appelant la méthode next de l’itérateur, la fonction génératrice est

exécutée jusqu’a` ce que la première expression yield soit trouvée.

La méthode next renvoie un objet ayant deux propriétés :

value : contient la valeur générée ou undefined si le générateur

ne produit plus de valeurs.
done : contient true si le générateur a produit sa dernière valeur,
false sinon.
 Fonction Fonctions ge´ne´ratrices

Exemple

[Link]([Link]());
// affiche { value: 0, done: false }

[Link]([Link]().value);
// affiche 1

[Link]([Link]().value);
// affiche 2

[Link]([Link]());
// affiche { value: undefined, done: true }

Avant de compiler, ve´rifiez dans [Link] les proprie´te´s suivantes

"target": "es6"
 Fonction Fonctions ge´ne´ratrices

TypeScript

Pour simplifier le code précèdent en utilisant une boucle

//Premiere version
for(let e of f) {
[Link](e);}

//Deuxieme version
while (true) {
const value = [Link]();
if ([Link]) {
break;
}
[Link]([Link]);
}
 Fonction Fonctions fle´che´es (arrow function)

TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléc hé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;
 Fonction Fonctions fle´che´es (arrow function)

TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléc hé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éc hée

let resultat: number = somme (1, 3);
 Fonction Fonctions fle´che´es (arrow function)

TypeScript
Remarque

Il est déconseillé d’utiliser les fonctions fléchées dans un objet

Le mot-cle´ this est inutilisable dans les fonctions fléchées

S a n s les fonctions fléc hées Avec les fonctions fléc hées

let obj = {
let obj = { nom: 'wick',
nom: 'wick', afficherNom: () => {
afficherNom: function() { [Link]([Link])
[Link]([Link]) }
} }
} [Link]();
[Link](); //The containing arrow
// affiche wick function captures the global
value of 'this'.ts(7041)
 Typage Typage statique

TypeScript
Une première déclaration de tableau
var list: number[] = [1, 2, 3];
[Link](list);
// affiche [ 1, 2, 3 ]

Une deuxième déclaration

var list: Array<number> = new Array(1, 2, 3);
[Link](list);
// affiche [ 1, 2, 3 ]

Ou encore plus simple

var list: Array<number> = [1, 2, 3];
[Link](list);
// affiche [ 1, 2, 3 ]
 Typage Typage statique

TypeScript
Pour les tuples, on initialise toutes les valeurs a` la déclaration
var t: [number, string, string] = [100, "wick", 'john'];

Pour accéder a` un élément d’un tuple en lecture

[Link](t[0]);
// affiche 100

Ou en écriture
t[2] = "travolta";
[Link](t);
// affiche [ 100, 'wick', 'travolta' ]
 Typage Typage statique

TypeScript

Pour modifier toutes les valeurs d’un tuple en respectant les

types indiqués a` la déclaration
t = [ 200, "deepay", 'memphis' ];
[Link](t)
// affiche [ 200, 'deepay', 'memphis' ]
 Typage Typage statique

TypeScript

Pour modifier toutes les valeurs d’un tuple en respectant les

types indiqués a` la déclaration
t = [ 200, "deepay", 'memphis' ];
[Link](t)
// affiche [ 200, 'deepay', 'memphis' ]

Cependant, ceci g énère une erreur

t = [100, 200, 'john'];
 Typage Typage statique

TypeScript

On peut utiliser ? rendre certains e´le´ments de tuple optionnels

var t: [number, string, string?];

E n faisant une affectation a` un tuple, il faut indiquer une valeur pour chaque e´le´ment non
optionnel

t = [100, 'wick'];
[Link](t);
// affiche [ 100, 'wick' ]

L a valeur d’un e´le´ment optionnel non initialise´ est undefined

[Link](t[2]);
// affiche undefined
 Typage Typage statique

TypeScript

Pour ajouter un élément

t[2] = 'john';

Cec i g énère une erreur

t[2] = 100;

Et cette instruction aussi car on dépasse la taille du tuple

t[3] = 100;
 Typage Typage statique

TypeScript

On peut aussi utiliser les ... pour le restant d’éléments de même type
var student: [string, ...number[]] = ["wick"];
[Link](student);
// affiche ['wick']

Ainsi, nous pouvons ajouter un nombre variable d’éléments de même type

student = ["wick", 10, 20, 15]
[Link](student);
// affiche [ 'wick', 10, 20, 15 ]

student = ["wick", 11, 13]

[Link](student);
// affiche [ 'wick', 11, 13 ]
 Typage Typage statique

TypeScript
L e s éléments restants peuvent ne pas être a` la dernière position si l’élément
suivant est ni optionnel ni restant et est de type différent
var student: [string, ...number[], string] = ["wick", "paris"];
[Link](student);
// affiche [ 'wick', 'paris' ]

Exemple d’ajout
student = ["wick", 10, 20, 15, "marseille"]
[Link](student);
// affiche [ 'wick', 10, 20, 15, 'marseille' ]

student = ["wick", 11, 13, "lyon"]

[Link](student);
// affiche [ 'wick', 11, 13, 'lyon' ]
 Array from

TypeScript
Exemple
var list: number[] = [Link](Array(3).keys())
[Link](list);
// affiche [ 0, 1, 2 ]

On peut utiliser la méthode from pour cre´er un tableau à partir d’un itérable

[Link]([Link]('wick'));
// affiche [ 'w', 'i', 'c', 'k' ]

On peut aussi utiliser la méthode from pour créer un tableau à partir d’un
autre tableau

[Link]([Link]([1, 2, 3], elt => elt * 2));

// affiche [ 2, 4, 6 ]
 Array of

TypeScript

On peut utiliser la méthode of pour créer un tableau a` partir

d’une liste de paramètres
[Link]([Link](1, 2, 3));
// affiche [1, 2, 3]

L’écriture préc édente peut être simplifiée

[Link](Array(1, 2, 3));
// affiche [1, 2, 3]
 Array of

TypeScript

L e s deux écritures suivantes sont différentes

[Link]([Link](7));
// affiche [7]

[Link](Array(7));
// affiche [ <7 empty items> ]
 Array fill

TypeScript
L a méthode fill permet de remplir les éléments d’un tableau
entre deux index avec une valeur statique
let tab = Array(7);
[Link](2);
[Link](tab); ©
// affiche [ 2, 2, 2, 2, 2, 2, 2 ]
MOUELHI
[Link](0, 3);
[Link](tab);
EL
© Achref
// affiche [ 2, 2, 2, 0, 0, 0, 0 ]

[Link](5, 2, 4);
[Link](tab);
// affiche [ 2, 2, 5, 5, 0, 0, 0 ]
 Array fill

TypeScript

Les fonctions flech́e e ś sont utilise e śpour realiseŕ les opeŕ ations 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

EL MOUELHI
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

©Achref
règle définie dans une fonction anonyme ou flé ché e

some() : pour vérifier s’il existe au moins un élément qui respect une condition

every() : pour vérifier si tous les éléments respectent une condition

...
 Array forEach

Utiliser forEach pour afficher le contenu d’un tableau

var tab = [2, 3, 5];
[Link](elt => [Link](elt));
// affiche 2 3 5

Dans forEach, on peut aussi appeler une fonction afficher

[Link](elt => afficher(elt));

function afficher(value: number) {

[Link](value);
}
// affiche 2 3 5

On peut simplifier l’e´criture pre´ce´dente en utilisant les callback

[Link](afficher);

function afficher(value: number) {

[Link](value);
}
// affiche 2 3 5
 Array forEach

TypeScript
L a 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
[Link](afficher);

function afficher(value: number, key: number) {

[Link](key, value);
}

/* affiche
0 2
1 3
2 5
*/
 Array forEach

TypeScript
L a fonction afficher peut accepter un troisième paramètre qui
correspond au tableau
[Link](afficher);

function afficher(value: number, key: number, t:

©
Array<number>) {
[Link](key, value, t); MOUELHI
} EL
© Achref
/* affiche
0 2 [ 2, 3, 5 ]
1 3 [ 2, 3, 5 ]
2 5 [ 2, 3, 5 ]
*/
 Array map

TypeScript

On peut utiliser map pour effecteur un traitement sur chaque

élément du tableau puis forEach pour afficher le nouveau
tableau
[Link](elt => elt + 3)
.forEach(elt => [Link](elt));
// affiche 5 6 8
 Array filter

TypeScript

On peut aussi utiliser filter pour filtrer des éléments

[Link](elt => elt + 3)
.filter(elt => elt > 5)
.forEach(elt => [Link](elt));
// affiche 6 8
 Array reduce

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 = [Link](elt => elt + 3)
.filter(elt => elt > 5)
.reduce((sum, elt) => sum + elt);

[Link](somme);
// affiche 14
 Array reduce

TypeScript

Remarques
Le premier paramètre de reduce correspond au résultat de
l’itération précédente
Le deuxième correspond a` l’élément du tableau de l’itération
courante
Le premier paramètre est initialise´ par la valeur du premier
élément du tableau
On peut changer la valeur initiale du premier paramètre en
l’ajoutant a` la fin de la méthode
 Array reduce

TypeScript

S i on a plusieurs instructions, on doit ajouter les accolades

var tab = [2, 3, 5];
var somme = [Link](elt => elt + 3)
.filter(elt => elt > 5)
.reduce((sum, elt) => {
return sum + elt;
}
);

[Link](somme);
// affiche 14
 Array reduce

TypeScript

Dans cet exemple, on initialise le premier paramètre de reduce

par la valeur 0
var somme = [Link](elt => elt + 3)
.filter(elt => elt > 5)
.reduce((sum, elt) => sum + elt, 0);

[Link](somme);
// affiche 14
 Array some

TypeScript

Dans cet exemple, on vérifie s’il existe un élément pair dans le

tableau, après modification
var tab = [2, 3, 5];

let result = [Link](elt => elt + 3)

.some(elt => elt % 2 == 0);

[Link](result);
// affiche true
 Array every

TypeScript

Dans cet exemple, on vérifie si tous les éléments du tableau sont

pairs, après modification
var tab = [2, 3, 5];

let result = [Link](elt => elt + 3)

.every(elt => elt % 2 == 0);

[Link](result);
// affiche false
 Map

TypeScript

Map (dictionnaire)
Type fonctionnant avec un couple (clé,valeur)
L a cle´ doit être unique

Chaque élément est appele´ entrée (entry)

L es éléments sont stockés et récupérés dans l’ordre d’insertion
Disponible depuis E S 5 puis modifie´ dans E S 6
 Map

TypeScript
Pour cre´er un Map

let map: Map<string, number> = new Map([

['php', 17],
['java', 10],
['c', 12]
]);
[Link](map);
// affiche Map { 'php' => 17, 'java' => 10, 'c' => 12 }

Ajouter un e´le´ment a` un Map

[Link]('html', 18);

Pour ajouter plusieurs e´le´ments a` la fois

[Link]('html', 18)
.set('css', 12);
 Map

TypeScript
S i la cle´ existe de´ja`, la valeur sera remplace´e

[Link]([Link]('html', 20));
// affiche Map { 'php' => 17, 'java' => 10, 'c' => 12, 'html' => 20 }

Pour re´cupe´rer la valeur associe´e a` une cle´

[Link]([Link]('php'));
// affiche 17

Pour ve´rifier l’existence d’une cle´

[Link]([Link]('php'));
// affiche true
 Map

TypeScript
S i la cle´ existe de´ja`, la valeur sera remplace´e

[Link]([Link]('html', 20));
// affiche Map { 'php' => 17, 'java' => 10, 'c' => 12, 'html' => 20 }

Pour re´cupe´rer la valeur associe´e a` une cle´

[Link]([Link]('php'));
// affiche 17

Pour ve´rifier l’existence d’une cle´

[Link]([Link]('php'));
// affiche true

Pour supprimer un e´le´ment selon la cle´

[Link]('php');
 Map

TypeScript
Pour re´cupe´rer la liste des cle´s d’un Map
[Link]([Link]());
// affiche [Map Iterator] { 'java', 'c', 'html', 'css' }

Pour re´cupe´rer la liste des valeurs d’un Map

[Link]([Link]());
// affiche [Map Iterator] { 10, 12, 20, 12 }

Pour re´cupe´rer la liste des entre´es d’un Map

[Link]([Link]());
/* affiche
[Map Entries] {
[ 'java', 10 ],
[ 'c', 12 ],
[ 'html', 20 ],
[ 'css', 12 ]
}
*/
 Map

TypeScript
Pour parcourir un Map, on peut utiliser entries()
for (let elt of [Link]())
[Link](elt[0] + " " + elt[1]);
/* affiche
java 10
c 12
html 20
css 12
*/

Ou
for (let [key, value] of map) {
[Link](key, value);
}
/* affiche
java 10
c 12
html 20
css 12
*/
 Map

TypeScript

On peut le faire aussi avec keys()

for (let key of [Link]()) {
[Link](key + " " + [Link](key)); ©
}
/* affiche
MOUELHI
java 10
c 12
EL
© Achref
html 20
css 12
*/
 Map

TypeScript

Une deuxième solution consiste a` utiliser forEach (affiche

seulement les valeurs)
[Link](elt => [Link](elt));

/* affiche
10
12
20
12
*/
 Map

TypeScript
On peut aussi définir une méthode et l’appeler dans forEach (affiche
seulement les valeurs)
[Link](elt => afficher(elt));

function afficher(elt: number) {

[Link](elt)
}

On peut encore simplifier l’appel de la fonction avec les callback

(affiche seulement les valeurs)
[Link](afficher);

function afficher(elt: number){

[Link](elt)
}
 Map

TypeScript

Pour afficher les clés et les valeurs

[Link](afficher);

function afficher (value: number, key: string) {

[Link](value, key)
}

/* affiche
10 java
12 c
20 html
12 css
*/
 Map

TypeScript

Ou aussi
[Link]((v: number, k: string) => [Link](k,v));

/* affiche
10 java
12 c
20 html
12 css
*/
 Set

TypeScript

Set
Une collection ne contenant pas de doublons
Acceptant les types simples et objets

L es éléments sont stockées et récupérés dans l’ordre d’insertion

Disponible depuis E S 5 puis modifie´ dans E S 6
 Set

TypeScript
Pour créer un Set
let marques = new Set(["peugeot", "ford", "fiat", "mercedes"]);
[Link](marques);
// affiche Set { 'peugeot', 'ford', 'fiat', 'mercedes' }

Ajouter un élément a` un Set

[Link]('citroen');

Pour ajouter plusieurs éléments a` la fois

[Link]('citroen')
.add('renault');
 Set

TypeScript
On ne peut ajouter un élément deux fois
[Link]('peugeot');
[Link](marques);
// affiche Set { 'peugeot', 'ford', 'fiat', 'mercedes', '
citroen', 'renault' }

Pour vérifier l’existence d’un élément

[Link]([Link]('fiat'));
// affiche true
 Set

TypeScript
On ne peut ajouter un élément deux fois
[Link]('peugeot');
[Link](marques);
// affiche Set { 'peugeot', 'ford', 'fiat', 'mercedes', '
citroen', 'renault' }

Pour vérifier l’existence d’un élément

[Link]([Link]('fiat'));
// affiche true

Pour supprimer un élément

[Link]('ford');
[Link](marques);
// affiche Set { 'peugeot', 'fiat', 'mercedes', 'citroen', '
renault' }
 Set

TypeScript

Autres méthodes sur les Set

[Link](B) : retourne true si A est un sous-ensemble de B,
false sinon.
[Link](B) : retourne un Set regroupant les éléments de A et
de B.
[Link](B) : retourne un Set contenant les éléments
de A qui sont dans B.
[Link](B) : retourne un Set contenant les éléments de
A qui ne sont pas dans B.
 Set

TypeScript

Pour parcourir un Set

for(let marque of marques) {
[Link](marque)
}
/* affiche
peugeot
fiat
mercedes
citroen
renault
*/
 Set

TypeScript

Une deuxième solution consiste a` utiliser forEach

[Link](elt => [Link](elt));

/* affiche
peugeot
fiat
mercedes
citroen
renault
*/
 Set

TypeScript
On peut aussi définir une méthode et l’appeler dans forEach
[Link](elt => afficher(elt));

function afficher(elt: string){

[Link](elt)
}

On peut encore simplifier l’appel de la fonction avec les callback

[Link](afficher);

function afficher(elt: string){

[Link](elt)
}