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

 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 cours ?

transpiler exécuter
[Link] [Link] résultat
 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat
 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link]
 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link]
 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link] node [Link]

 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link] node [Link]

 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link] node [Link]

2 solutions
 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link] node [Link]

2 solutions

tsc [Link] | node [Link]

 Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link] node [Link]

2 solutions

tsc [Link] | node [Link] ts-node [Link]

 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
 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écutez
node -v
 Introduction

TypeScript

Pour installer TypeScript, ouvrez une console (invite de

commandes) et exécutez
npm install -g typescript
 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
 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]

Situé à la racine du projet TypeScript

Consulté par le compilateur à chaque exécution de la commande tsc

Si le fichier n’existe pas, des valeurs par défaut seront utilisées

([Link]
 Fichier de configuration

TypeScript

Fichier de configuration : [Link]

Situé à la racine du projet TypeScript

Consulté par le compilateur à chaque exécution de la commande tsc

Si le fichier n’existe pas, des valeurs par défaut seront utilisées

([Link]

Pour le générer, exé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

Lancez la commande
tsc

´
 Fichier de configuration

TypeScript

Lancez 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"
 Fichier de configuration

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

Relancez la commande
tsc
 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
Lancez la commande tsc en spécifiant le nom du fichier
tsc [Link]
 Fichier de configuration

TypeScript
Lancez la commande tsc en spécifiant 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
Lancez la commande tsc en spécifiant 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
 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!");
 Fichier de configuration

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

Lancez la commande
tsc
 Fichier de configuration

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

Lancez la commande
tsc

Remarque

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

Pour ne pas transpiler [Link], ajoutons la clé exclude dans [Link]

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

Pour ne pas transpiler [Link], ajoutons la clé 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
 Fichier de configuration

Pour ne pas transpiler [Link], ajoutons la clé 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

Vérifier que seul le fichier [Link] a été transpilé en [Link].

 Fichier de configuration

Pour transpiler seulement [Link], ajoutons la clé include dans [Link]

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

Pour transpiler seulement [Link], ajoutons la clé 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
 Fichier de configuration

Pour transpiler seulement [Link], ajoutons la clé 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

Vérifier que seul le fichier [Link] a été transpilé en [Link].

 Typage

TypeScript

Trois modes de typage en TypeScript

Statique : le développeur précise le type à la déclaration de la

variable
Dynamique : le type d’une variable est déterminé à l’exécution
(comme en JS)
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;

 Typage Typage dynamique

TypeScript
Déclarer une variable

var nomVariable = valeurInitiale;

Exemple

var x = 2
 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’à

l’exécution

[Link]([Link]());
 Typage Typage dynamique

TypeScript

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

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

TypeScript
Déclarer une variable
var nomVariable: typeVariable;

Exemple
var x: number;
 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;

H & H: Research and Training

 Typage Typage statique

TypeScript

Cependant, ceci génère une erreur car une varaible ne change

pas de type
x = "bonjour";
 Typage Typage statique

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)

 Typage Typage statique

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.

 Typage Typage statique

TypeScript
Pour les chaı̂nes de caractères, on peut faire
var str1: string = "wick";
var str2: string = 'john';
 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 ?";

H & H: Research and Training

 Typage Typage statique

TypeScript
Exemple avec any
var x: any;
x = "bonjour";
x = 5;
[Link](x);
// affiche 5;
 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 à 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 };
 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
 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 };
 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 };

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

En affichant, le résultat est

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

En affichant, le résultat est

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

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

H & H: Research and Training 23 / 69

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

Ceci est une erreur

[Link] = 125;
 Quelques opérateurs sur les variables Déstructuration ou Destructuring (...)

TypeScript

Déstructuration (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
 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;
 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;

Ceci génère une erreur

y = [2, 5];
 Typage Croisement de type

TypeScript

Croisement de type
Il est possible qu’une variable ait les propriétés de plusieurs types différents
 Typage Croisement de type

TypeScript

Croisement de type
Il est possible qu’une variable ait les propriétés de plusieurs types différents

Déclarer une variable ayant les propriétés de plusieurs types différents

var enseignant: {
nom: string;
salaire:number;
};
var etudiant: {
niveau:string;
};
var doctorant: typeof etudiant & typeof enseignant = {
nom: 'wick',
salaire:1700,
niveau:'master'
};
[Link](doctorant);
 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 opérateurs sur les variables Coalescence nulle ou Nullish Coalescing ( ? ?)

TypeScript
Coalescence nulle (??)
Introduit dans ES2020.
Intégré dans TypeScript depuis la version 3.7.
 Quelques opérateurs sur les variables Coalescence nulle ou Nullish Coalescing ( ? ?)

TypeScript
Coalescence nulle (??)
Introduit dans ES2020.
Intégré dans TypeScript depuis la version 3.7.

L’opérateur ?? permet d’éviter d’affecter la valeur null ou undefined à une

variable
let nom: string;
let value: string = nom ?? "doe";
[Link](value);
// affiche doe

C’est équivalent à
let nom: string;
let value: string = (nom !== null && nom !== undefined) ? nom :'doe';
[Link](value);
// affiche doe
 Quelques opé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.
 Quelques opé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 sa 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

Les constantes
se déclare avec le mot-clé const
permet à une variable de ne pas changer de valeur
 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.
 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;

[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
sans 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 Déclaration et appel

TypeScript
Déclarer une fonction
function nomFonction([les paramètres]){
les instructions de la fonction
}
 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;
}
 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);
[Link](resultat);
// affiche 4
 Fonction Déclaration et appel

TypeScript
Le code suivant génère une erreur
function somme(a: number, b: number): string {
return a + b;
}
 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);
 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);
 Fonction Déclaration et appel

TypeScript

Une fonction qui ne retourne rien a le type void

function direBonjour(): void {
[Link]("bonjour");
}
 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;
}

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

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

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

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

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

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

[Link](somme(10, 1, 6));
// affiche 17
 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 [Link] + param2;
return param1 + param2;
}

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

[Link](stringOrNumber(5, 3));
// affiche 8
 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 < [Link]; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}
 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 < [Link]; 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 < [Link]; i++){
// la ligne suivante génère une erreur
tab[i]++;
}
}
 Fonction Fonctions génératrices

TypeScript

Fonction génératrice

déclarée avec function*

utilise le mot-clé yield pour générer plusieurs valeurs
 Fonction Fonctions génératrices

TypeScript

Fonction génératrice

déclarée avec function*

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

Exemple
function* generateur() {
for (let i = 0; i < 3; i++) {
yield i;
}
}
 Fonction Fonctions génératrices

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

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

La méthode next de l’itérateur

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

exécutée jusqu’à 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 géné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 }
 Fonction Fonctions géné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, vérifiez dans [Link] les propriétés suivantes

"target": "es6"
 Fonction Fonctions géné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 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
}
 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; }
 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;
 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);
 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
 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 Avec les fonctions fléché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 ]
 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 ]
 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 à la déclaration

var t: [number, string, string] = [100, "wick", 'john'];

 Typage Typage statique

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

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

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

[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 à 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 à 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 éléments de tuple optionnels

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

 Typage Typage statique

TypeScript
On peut utiliser ? rendre certains éléments de tuple optionnels

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

En faisant une affectation à un tuple, il faut indiquer une valeur pour chaque élément non
optionnel

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

TypeScript
On peut utiliser ? rendre certains éléments de tuple optionnels

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

En faisant une affectation à un tuple, il faut indiquer une valeur pour chaque élément non
optionnel

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

La valeur d’un élément optionnel non initialisé est undefined

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

TypeScript

Pour ajouter un élément

t[2] = 'john';
 Typage Typage statique

TypeScript

Pour ajouter un élément

t[2] = 'john';

Ceci génère une erreur

t[2] = 100;
 Typage Typage statique

TypeScript

Pour ajouter un élément

t[2] = 'john';

Ceci 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']
 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
Les éléments restants peuvent ne pas être à 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' ]
 Typage Typage statique

TypeScript
Les éléments restants peuvent ne pas être à 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 keys

TypeScript
Exemple

var list: number[] = [Link](Array(3).keys())

[Link](list);
// affiche [ 0, 1, 2 ]
 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 créer un tableau à partir d’un itérable

[Link]([Link]('wick'));
// affiche [ 'w', 'i', 'c', 'k' ]
 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 cré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 à partir

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

TypeScript

On peut utiliser la méthode of pour créer un tableau à 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

Les deux écritures suivantes sont différentes

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

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

TypeScript
La 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);
H I ©
// affiche [ 2, 2, 2, 2, 2, 2, 2 ]
UEL
O
[Link](0, 3);
f E LM
[Link](tab);
ch r e
©A
// 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 fléchées sont utilisées pour réaliser les opérations suivant sur les
tableaux

forEach() : pour parcourir un tableau

H I ©
map() : pour appliquer une fonction sur les éléments d’un tableau

U EL
O
filter() : pour filtrer les éléments d’un tableau selon un critère défini sous

f E LM
forme d’une fonction anonyme ou fléchée

ch r e
reduce() : pour réduire tous les éléments d’un tableau en un seul selon une
A
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
 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
 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’écriture précédente en utilisant les callback

[Link](afficher);

function afficher(value: number) {

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

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

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

[Link](key, value);
}

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

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

H I ©
EL
function afficher(value: number, key: number, t:
Array<number>) {
O U
} f E LM
[Link](key, value, t);

ch r e
/* affiche ©A
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.

 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 à 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
 Array reduce

TypeScript

Si 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)

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
 Map

TypeScript
Pour cré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 }
 Map

TypeScript
Pour cré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 élément à un Map

[Link]('html', 18);
 Map

TypeScript
Pour cré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 élément à un Map

[Link]('html', 18);

Pour ajouter plusieurs éléments à la fois

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

TypeScript
Si la clé existe déjà, la valeur sera remplacée

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

TypeScript
Si la clé existe déjà, la valeur sera remplacée

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

Pour récupérer la valeur associée à une clé

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

TypeScript
Si la clé existe déjà, la valeur sera remplacée

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

Pour récupérer la valeur associée à une clé

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

Pour vérifier l’existence d’une clé

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

TypeScript
Si la clé existe déjà, la valeur sera remplacée

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

Pour récupérer la valeur associée à une clé

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

Pour vérifier l’existence d’une clé

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

Pour supprimer un élément selon la clé

[Link]('php');
 Map

TypeScript
Pour récupérer la liste des clés d’un Map

[Link]([Link]());
// affiche [Map Iterator] { 'java', 'c', 'html', 'css' }
 Map

TypeScript
Pour récupérer la liste des clés d’un Map

[Link]([Link]());
// affiche [Map Iterator] { 'java', 'c', 'html', 'css' }

Pour récupérer la liste des valeurs d’un Map

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

TypeScript
Pour récupérer la liste des clés d’un Map
[Link]([Link]());
// affiche [Map Iterator] { 'java', 'c', 'html', 'css' }

Pour récupérer la liste des valeurs d’un Map

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

Pour récupérer la liste des entré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() (solution ES5)
for (let elt of [Link]())
[Link](elt[0] + " " + elt[1]);
/* affiche
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));
H I ©
}
UEL
/* affiche O
java 10
f E LM
c 12
ch r e
html 20
css 12 ©A
*/
 Map

TypeScript

Une deuxième solution consiste à 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)
}
 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
Les éléments sont stockées et récupérés dans l’ordre d’insertion
Disponible depuis ES5 puis modifié dans ES6
 Set

TypeScript
Pour créer un Set

let marques = new Set(["peugeot", "ford", "fiat", "mercedes"]);

[Link](marques);
// affiche Set { 'peugeot', 'ford', 'fiat', 'mercedes' }
 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 à un Set

[Link]('citroen');
 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 à un Set

[Link]('citroen');

Pour ajouter plusieurs éléments à 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' }
 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 à 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)
}
 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)
}