0% ont trouvé ce document utile (0 vote)

171 vues285 pages

TypeScript et Angular pour Débutants

Ce document présente les bases du typage de variables en TypeScript, notamment la déclaration et l'initialisation de variables de différents types comme les chaînes de caractères, les nombres, les tableaux et les objets.

Transféré par

kabeche samir

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

171 vues285 pages

TypeScript et Angular pour Débutants

Transféré par

kabeche samir

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

TypeScript pour Angular

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[Link]@[Link]

H & H: Research and Training 1 / 142

Plan

1 Introduction

2 Variable
Déclaration
Union de type
Variable locale
Cast
Conversion
Alias de type
Nullish Coalescing (Coalescence nulle)

3 Constante

H & H: Research and Training 2 / 142

Plan

4 Fonction
Déclaration et appel
Paramètres par défaut
Paramètres optionnels
Paramètres restants
Paramètres à plusieurs types autorisés
Paramètres en lecture seule
Fonctions fléchées (arrow function)

5 Concept de décomposition (spread)

6 import / export

H & H: Research and Training 3 / 142

Plan
7 Classe
Rappel
Syntaxe
Setter
Getter
Constructeur
Attributs et méthodes statiques
8 Héritage
9 Classe et méthode abstraites
10 Interface
11 Décorateur
12 Généricité
13 Map
14 Set
H & H: Research and Training 4 / 142
Introduction

TypeScript

ECMAScript
ensemble de normes sur les langages de programmation de type
script (JavaScript, ActionScript...)
standardisée par Ecma International (European Computer
Manufacturers Association) depuis 1994

H & H: Research and Training 5 / 142

Introduction

TypeScript

Quelques versions
ECMAScript version 5 (ES5) ou ES 2009
ECMAScript version 6 (ES6) ou ES 2015 (compatible avec les
navigateurs modernes)

H & H: Research and Training 5 / 142

Introduction

TypeScript

TypeScript
langage de programmation
procédural et orienté objet
supportant le typage statique, dynamique et générique

open-source
créé par Anders Hejlsberg (inventeur de C#) de MicroSoft
utilisé par Angular (Google)

H & H: Research and Training 6 / 142

Introduction

TypeScript
TypeScript : sur-couche de ES6 ajoutant
typage
meilleure gestion de module (à ne pas confondre avec les
modules Angular)

TypeScript

ES6

JavaScript
(ES5)

H & H: Research and Training 7 / 142

Introduction

TypeScript

Le navigateur ne comprend pas le TypeScript

Il faut le transcompiler (ou transpiler) en JavaScript

transpiler
[Link] [Link]

H & H: Research and Training 8 / 142

Introduction

TypeScript
Comment va t-on procéder dans ce cours ?

transpiler exécuter
[Link] [Link] résultat

tsc [Link] node [Link]

tsc [Link] | node [Link]

Pour consulter la liste d’ptions pour la commande tsc

[Link]

H & H: Research and Training 9 / 142

Introduction

TypeScript

De quoi on a besoin ?

[Link] pour exécuter la commande node

TypeScript pour exécuter la commande tsc

H & H: Research and Training 10 / 142

Introduction

TypeScript

Pour [Link], il faut

aller sur [Link]
choisir la dernière version, télécharger et installer

H & H: Research and Training 11 / 142

Introduction

TypeScript

Pour [Link], il faut

aller sur [Link]
choisir la dernière version, télécharger et installer

Pour TypeScript, il faut

ouvrir une console (invite de commandes)
lancer la commande npm install -g typescript
vérifier la version avec la commande tsc -v

H & H: Research and Training 11 / 142

Introduction

TypeScript

Quel IDE pour TypeScript (et éventuellement Angular)

Microsoft recommande Visual Studio Code

[Link]/download

H & H: Research and Training 12 / 142

Variable Déclaration

TypeScript
Déclarer une variable
var nomVariable: typeVariable;

H & H: Research and Training 13 / 142

Variable Déclaration

TypeScript
Déclarer une variable
var nomVariable: typeVariable;

Exemple
var x: number;

H & H: Research and Training 13 / 142

Variable Déclaration

TypeScript
Déclarer une variable
var nomVariable: typeVariable;

Exemple
var x: number;

Initialiser une variable

x = 2;

H & H: Research and Training 13 / 142

Variable Déclaration

TypeScript
Déclarer une variable
var nomVariable: typeVariable;

Exemple
var x: number;

Initialiser une variable

x = 2;

Déclarer et initialiser une variable

var x: number = 2;
H & H: Research and Training 13 / 142
Variable Déclaration

TypeScript

Cependant, ceci génère une erreur car une varaible ne change

pas de type
x = "bonjour";

H & H: Research and Training 14 / 142

Variable Déclaration

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)

H & H: Research and Training 15 / 142

Variable Déclaration

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.

H & H: Research and Training 15 / 142
Variable Déclaration

TypeScript
Pour les chaı̂nes de caractères, on peut faire
var str1: string = "wick";
var str2: string = ’john’;

H & H: Research and Training 16 / 142

Variable Déclaration

TypeScript
Pour les chaı̂nes de caractè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 ?

H & H: Research and Training 16 / 142

Variable Déclaration

TypeScript
Pour les chaı̂nes de caractè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’équivalent de faire
var str3: string = "Bonjour " + str2 + " " + str1 + "\nQue
pensez-vous de TypeScript ?";

H & H: Research and Training 16 / 142

Variable Déclaration

TypeScript
Une première déclaration pour les tableaux
var list: number[] = [1, 2, 3];
[Link](list);
// affiche [ 1, 2, 3 ]

H & H: Research and Training 17 / 142

Variable Déclaration

TypeScript
Une première déclaration pour les tableaux
var list: number[] = [1, 2, 3];
[Link](list);
// affiche [ 1, 2, 3 ]

Une deuxième déclaration

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

H & H: Research and Training 17 / 142

Variable Déclaration

TypeScript
Une première déclaration pour les tableaux
var list: number[] = [1, 2, 3];
[Link](list);
// affiche [ 1, 2, 3 ]

Une deuxième dé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 ]

H & H: Research and Training 17 / 142

Variable Déclaration

TypeScript
Remarques

En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un

intervalle de valeurs entières consécutives.

Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un
intervalle de valeurs entières consécutives.

H & H: Research and Training 18 / 142

Variable Déclaration

TypeScript
Remarques

En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un

intervalle de valeurs entières consécutives.

Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un
intervalle de valeurs entières consécutives.

Exemple

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

[Link](list);
// affiche [ 0, 1, 2 ]

H & H: Research and Training 18 / 142

Variable Déclaration

TypeScript
Remarques

En JavaScript, il n’y a pas de méthode range pour générer un tableau contenant un

intervalle de valeurs entières consécutives.

Avec EcmaScript 6, on peut utiliser des méthodes comme from et keys pour générer un
intervalle de valeurs entières consécutives.

Exemple

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

[Link](list);
// affiche [ 0, 1, 2 ]

On peut utiliser une fonction fléchée (à voir dans une prochaine section) pour modifier les
valeurs générées

var list: number[] = [Link]({ length: 3 }, (v, k) => k + 1)

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

H & H: Research and Training 18 / 142

Variable Déclaration

TypeScript
Pour les tuples, on initialise toutes les valeurs à la déclaration

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

H & H: Research and Training 19 / 142

Variable Déclaration

TypeScript
Pour les tuples, on initialise toutes les valeurs à la déclaration

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

Pour accéder à un élément d’un tuple en lecture ou en écriture

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

t[2] = "travolta";
[Link](t);
// affiche [ 100, ’wick’, ’travolta’ ]

H & H: Research and Training 19 / 142

Variable Déclaration

TypeScript
Pour les tuples, on initialise toutes les valeurs à la déclaration

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

Pour accéder à un élément d’un tuple en lecture ou en écriture

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

t[2] = "travolta";
[Link](t);
// affiche [ 100, ’wick’, ’travolta’ ]

Cependant, ceci génère une erreur

t = [100, 200, ’john’];

H & H: Research and Training 19 / 142

Variable Déclaration

Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels

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

[Link](t);
// affiche [ 100 ]
[Link](t[1]);
// affiche undefined

H & H: Research and Training 20 / 142

Variable Déclaration

Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels

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

[Link](t);
// affiche [ 100 ]
[Link](t[1]);
// affiche undefined

Pour ajouter un élément

t[1] = ’wick’;

H & H: Research and Training 20 / 142

Variable Déclaration

Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels

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

[Link](t);
// affiche [ 100 ]
[Link](t[1]);
// affiche undefined

Pour ajouter un élément

t[1] = ’wick’;

Ceci génère une erreur

t[2] = 100;

H & H: Research and Training 20 / 142

Variable Déclaration

Avec TypeScript 3.0, on peut rendre certains éléments de tuple optionnels

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

[Link](t);
// affiche [ 100 ]
[Link](t[1]);
// affiche undefined

Pour ajouter un élément

t[1] = ’wick’;

Ceci génère une erreur

t[2] = 100;

Et cette instruction aussi car on dépasse la taille du tuple

t[3] = 100;

H & H: Research and Training 20 / 142

Variable Déclaration

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

H & H: Research and Training 21 / 142

Variable Déclaration

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

Une variable de type any peut être affectée à n’importe quel autre
type de variable
var x: any;
x = "bonjour";
x = 5;
var y: number = x;

H & H: Research and Training 21 / 142

Variable Déclaration

TypeScript
Le type unknown (TypeScript 3.0) fonctionne comme any mais ne
peut être affecté qu’à une variable de type unknown ou any
var x: unknown;
x = "bonjour";
x = 5;
[Link](x);
// affiche 5;

H & H: Research and Training 22 / 142

Variable Déclaration

Ceci génère donc une erreur

var x: unknown;
x = "bonjour";
x = 5;
var y: number = x;

H & H: Research and Training 22 / 142

Variable Déclaration

Déclarons une énumération (dans [Link])

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

H & H: Research and Training 23 / 142

Variable Déclaration

Déclarons une énumération (dans [Link])

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

L’indice du premier élément est 0

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

H & H: Research and Training 23 / 142

Variable Déclaration

Déclarons une énumération (dans [Link])

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

L’indice du premier élément est 0

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

Pour modifier l’indice du premier élément

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

H & H: Research and Training 23 / 142

Variable Déclaration

Déclarons une énumération (dans [Link])

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

L’indice du premier élément est 0

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

Pour modifier l’indice du premier élément

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

En affichant maintenant, le résultat est

[Link]([Link])
// affiche 4
H & H: Research and Training 23 / 142
Variable Déclaration

TypeScript
On peut aussi modifier plusieurs indices simultanément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE };

H & H: Research and Training 24 / 142

Variable Déclaration

TypeScript
On peut aussi modifier plusieurs indices simultanément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE };

En affichant, le résultat est

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

H & H: Research and Training 24 / 142

Variable Déclaration

TypeScript
On peut aussi modifier plusieurs indices simultanément
enum mois { JANVIER = 1, FEVRIER, MARS, AVRIL = 10, MAI, JUIN,
JUILLET, AOUT, SEPTEMBRE, OCTOBRE, NOVEMBRE = 2, DECEMBRE };

En affichant, le ré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;

H & H: Research and Training 24 / 142

Variable Déclaration

TypeScript
Pour déclarer un objet
var obj: {
nom: string;
numero: number;
};

H & H: Research and Training 25 / 142

Variable Déclaration

TypeScript
Pour dé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 25 / 142

Variable Déclaration

TypeScript

On peut modifier les valeurs d’un objet ainsi

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

[Link](obj);

H & H: Research and Training 26 / 142

Variable Déclaration

TypeScript

On peut modifier les valeurs d’un objet ainsi

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

[Link](obj);

Ceci est une erreur

[Link] = 125;

H & H: Research and Training 26 / 142

Variable Union de type

TypeScript
Union de type

Il est possible d’autoriser plusieurs types de valeurs pour une variable

H & H: Research and Training 27 / 142

Variable Union de type

TypeScript
Union de type

Il est possible d’autoriser plusieurs types de valeurs pour une variable

Déclarer une variable acceptant plusieurs types de valeur

var y: number | boolean | string;

H & H: Research and Training 27 / 142

Variable Union de type

TypeScript
Union de type

Il est possible d’autoriser plusieurs types de valeurs pour une variable

Déclarer une variable acceptant plusieurs types de valeur

var y: number | boolean | string;

affecter des valeurs de type différent

y = 2;
y = "bonjour";
y = false;

H & H: Research and Training 27 / 142

Variable Union de type

TypeScript
Union de type

Il est possible d’autoriser plusieurs types de valeurs pour une variable

Déclarer une variable acceptant plusieurs types de valeur

var y: number | boolean | string;

affecter des valeurs de type différent

y = 2;
y = "bonjour";
y = false;

Ceci génère une erreur

y = [2, 5];
H & H: Research and Training 27 / 142
Variable Variable locale

TypeScript

Le mot-clé let
permet de donner une visibilité locale à une variable déclarée dans un
bloc.

H & H: Research and Training 28 / 142

Variable Variable locale

TypeScript

Le mot-clé let
permet de donner une visibilité locale à une variable déclarée dans un
bloc.

Ceci génère une erreur car la variable x a une visibilité locale

limitée au bloc if
if (5 > 2)
{
let x = 1;
}
[Link](x);
// affiche ReferenceError: x is not defined

H & H: Research and Training 28 / 142

Variable Cast

TypeScript
Premier exemple
let str: any = "bonjour";
let longueur: number = (<string>str).length;

[Link](longueur);
// affiche 7

H & H: Research and Training 29 / 142

Variable Cast

TypeScript
Premier exemple
let str: any = "bonjour";
let longueur: number = (<string>str).length;

[Link](longueur);
// affiche 7

Deuxième exemple
let str: any = "bonjour";
let longueur: number = (str as string).length;

[Link](longueur);
// affiche 7

H & H: Research and Training 29 / 142

Variable Conversion

TypeScript
Pour convertir une chaı̂ne de caractè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

H & H: Research and Training 30 / 142

Variable Conversion

TypeScript
Pour convertir une chaı̂ne de caractè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

H & H: Research and Training 30 / 142
Variable Alias de type

TypeScript

Le mot-clé type permet de définir un alias de type

type maStructure = [number, string, string];

H & H: Research and Training 31 / 142

Variable Alias de type

TypeScript

Le mot-clé type permet de définir un alias de type

type maStructure = [number, string, string];

Ensuite, on peut utiliser maStructure comme un type

let first: maStructure = [100, "wick", ’john’ ];

[Link](first);
// affiche [ 100, ’wick’, ’john’ ]

H & H: Research and Training 31 / 142

Variable Nullish Coalescing (Coalescence nulle)

TypeScript
L’opérateur ?? permet d’éviter d’affecter la valeur null ou
undefined à une variable
var obj = {nom: null, prenom: ’john’};
let nom: string = [Link] ?? ’doe’;
[Link](nom);
// affiche doe

C’est équivalent à
var obj = {nom: null, prenom: ’john’};
let nom: string = ([Link] !== null && [Link] !==
undefined) ? [Link] : ’doe’;
[Link](nom);
// affiche doe

H & H: Research and Training 32 / 142

Constante

TypeScript

Les constantes
se déclare avec le mot-clé const
permet à une variable de ne pas changer de valeur

H & H: Research and Training 33 / 142

Constante

TypeScript

Les constantes
se déclare avec le mot-clé const
permet à une variable de ne pas changer de valeur

Ceci génère une erreur car une constante ne peut changer de

valeur
const X: any = 5;
X = "bonjour";
// affiche TypeError: Assignment to constant
variable.

H & H: Research and Training 33 / 142

Constante

TypeScript
Avec TypeScript 3.4, on peut définir une constante avec une assertion
sans pré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

H & H: Research and Training 34 / 142

Constante

TypeScript
Avec TypeScript 3.4, on peut définir une constante avec une assertion
sans pré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 génère une erreur car une constante ne peut changer de valeur
X = "hello";
H & H: Research and Training 34 / 142
Constante

TypeScript
Avec TypeScript 3.4, on peut aussi dé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

H & H: Research and Training 35 / 142

Constante

TypeScript
Avec TypeScript 3.4, on peut aussi dé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 génère une erreur car une constante ne peut changer de valeur
X = "hello";

H & H: Research and Training 35 / 142

Fonction Déclaration et appel

TypeScript
Déclarer une fonction
function nomFonction([les paramètres]){
les instructions de la fonction
}

H & H: Research and Training 36 / 142

Fonction Déclaration et appel

TypeScript
Déclarer une fonction
function nomFonction([les paramètres]){
les instructions de la fonction
}

Exemple
function somme(a: number, b: number): number {
return a + b;
}

H & H: Research and Training 36 / 142

Fonction Déclaration et appel

TypeScript
Déclarer une fonction
function nomFonction([les paramè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

H & H: Research and Training 36 / 142

Fonction Déclaration et appel

TypeScript

Le code suivant génère une erreur

function somme(a: number, b: number): string {
return a + b;
}

H & H: Research and Training 37 / 142

Fonction Déclaration et appel

TypeScript

Le code suivant génère une erreur

function somme(a: number, b: number): string {
return a + b;
}

Celui-ci aussi
let resultat: number = somme ("1", 3);

H & H: Research and Training 37 / 142

Fonction Déclaration et appel

TypeScript

Le code suivant génère une erreur

function somme(a: number, b: number): string {
return a + b;
}

Celui-ci aussi
let resultat: number = somme ("1", 3);

Et même celui-ci
let resultat: string = somme(1, 3);

H & H: Research and Training 37 / 142

Fonction Déclaration et appel

TypeScript

Une fonction qui ne retourne rien a le type void

function direBonjour(): void {
[Link]("bonjour");
}

H & H: Research and Training 38 / 142

Fonction Déclaration et appel

TypeScript

Une fonction qui ne retourne rien a le type void

function direBonjour(): void {
[Link]("bonjour");
}

Une fonction qui n’atteint jamais sa fin a le type never

function boucleInfinie(): never {
while (true){

}
}

H & H: Research and Training 38 / 142

Fonction Paramètres par défaut

TypeScript

Il est possible d’attribuer une valeur par défaut aux paramètres

d’une fonction

H & H: Research and Training 39 / 142

Fonction Paramètres par défaut

TypeScript

Il est possible d’attribuer une valeur par défaut aux paramè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

H & H: Research and Training 39 / 142

Fonction Paramètres optionnels

TypeScript

Il est possible de rendre certains paramètres d’une fonction

optionnels

H & H: Research and Training 40 / 142

Fonction Paramètres optionnels

TypeScript

Il est possible de rendre certains paramè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

H & H: Research and Training 40 / 142

Fonction Paramètres restants

TypeScript
Il est possible de définir une fonction prenant un nombre indéfini de
paramètres

H & H: Research and Training 41 / 142

Fonction Paramètres restants

TypeScript
Il est possible de définir une fonction prenant un nombre indéfini de
paramè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

H & H: Research and Training 41 / 142

Fonction Paramètres à plusieurs types autorisés

TypeScript

Il est possible d’autoriser plusieurs types pour un paramètre

H & H: Research and Training 42 / 142

Fonction Paramètres à plusieurs types autorisés

TypeScript

Il est possible d’autoriser plusieurs types pour un paramè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

H & H: Research and Training 42 / 142

Fonction Paramètres en lecture seule

TypeScript
Le mot-clé ReadonlyArray (TypeScript 3.4) indique qu’un paramè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 génère une erreur
tab[i]++;
}
}

H & H: Research and Training 43 / 142

Fonction Paramètres en lecture seule

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 génère une erreur
tab[i]++;
}
}

H & H: Research and Training 43 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}

H & H: Research and Training 44 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}

Exemple
let somme = (a: number, b: number): number => { return a + b; }

H & H: Research and Training 44 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramètres]): typeValeurRetour => {
les instructions de la fonction
}

Exemple
let somme = (a: number, b: number): number => { return a + b; }

Ou en plus simple
let somme = (a: number, b: number): number => a + b;

H & H: Research and Training 44 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Il est possible de déclarer une fonction en utilisant les expressions fléchées
let nomFonction = ([les paramè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 fléchée

let resultat: number = somme (1, 3);

H & H: Research and Training 44 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Cas d’une fonction fléchée à un seul paramètre
let carre = (a: number): number => a * a;
[Link](carre(2)); // affiche 4

H & H: Research and Training 45 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Cas d’une fonction fléchée à un seul paramètre
let carre = (a: number): number => a * a;
[Link](carre(2)); // affiche 4

Sans typage, la fonction peut être écrite ainsi

let carre = a => a * a;
[Link](carre(2)); // affiche 4

H & H: Research and Training 45 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Cas d’une fonction fléchée à un seul paramètre
let carre = (a: number): number => a * a;
[Link](carre(2)); // affiche 4

Sans typage, la fonction peut être écrite ainsi

let carre = a => a * a;
[Link](carre(2)); // affiche 4

Déclaration d’une fonction fléchée sans paramètre

let sayHello = (): void => [Link](’Hello’);
sayHello(); // affiche Hello

H & H: Research and Training 45 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Remarque

Il est déconseillé d’utiliser les fonctions fléchées dans un objet

Le mot-clé this est inutilisable dans les fonctions fléchées

H & H: Research and Training 46 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript
Remarque

Il est déconseillé d’utiliser les fonctions fléchées dans un objet

Le mot-clé this est inutilisable dans les fonctions fléchées

Sans les fonctions fléchées Avec les fonctions fléchées

let obj = { let obj = {
nom: ’wick’, nom: ’wick’,
afficherNom: function() { afficherNom: () => {
[Link]([Link]) [Link]([Link])
} }
} }
[Link](); [Link]();
// affiche wick // affiche undefined
H & H: Research and Training 46 / 142
Fonction Fonctions fléchées (arrow function)

TypeScript

Les fonctions fléchées sont utilisées pour réaliser les opérations

suivant sur les tableaux
forEach() : pour parcourir un tableau
map() : pour appliquer une fonction sur les éléments d’un tableau
filter() : pour filtrer les éléments d’un tableau selon un critère
défini sous forme d’une fonction anonyme ou fléchée
reduce() : pour réduire tous les éléments d’un tableau en un
seul selon une règle définie dans une fonction anonyme ou
fléchée
...

H & H: Research and Training 47 / 142

Fonction Fonctions fléchées (arrow function)

Utiliser forEach pour afficher le contenu d’un tableau

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

H & H: Research and Training 48 / 142

Fonction Fonctions fléchées (arrow function)

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) {
[Link](value);
}
// affiche 2 3 5

H & H: Research and Training 48 / 142

Fonction Fonctions fléchées (arrow function)

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) {
[Link](value);
}
// affiche 2 3 5

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

[Link](afficher);

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

H & H: Research and Training 48 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

La fonction afficher peut accepter deux paramètres : le premier

est la valeur de l’itération courante et le deuxième est son indice
dans le tableau
[Link](afficher);

function afficher(value, key) {

[Link](key, value);
}

/* affiche
0 2
1 3
2 5
*/

H & H: Research and Training 49 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

La fonction afficher peut accepter un troisième paramètre qui

correspond au tableau
[Link](afficher);

function afficher(value, key, t) {

[Link](key, value, t);
}

/* affiche
0 2 [ 2, 3, 5 ]
1 3 [ 2, 3, 5 ]
2 5 [ 2, 3, 5 ]
*/

H & H: Research and Training 50 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

On peut utiliser map pour effecteur un traitement sur chaque

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

H & H: Research and Training 51 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

On peut utiliser map pour effecteur un traitement sur chaque

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

On peut aussi utiliser filter pour filtrer des éléments

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

H & H: Research and Training 51 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

Remarque

Attention, selon l’ordre d’appel de ces méthodes, le résultat peut changer.

H & H: Research and Training 52 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

Remarque

Attention, selon l’ordre d’appel de ces méthodes, le résultat peut changer.

Exemple avec reduce : permet de réduire les élé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

H & H: Research and Training 52 / 142

Fonction Fonctions fléchées (arrow function)

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

H & H: Research and Training 53 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

Remarques

Le premier paramètre de reduce correspond au résultat de

l’itération précédente
Le deuxième correspond à l’élément du tableau de l’itération
courante
Le premier paramètre est initialisé par la valeur du premier
élément du tableau
On peut changer la valeur initiale du premier paramètre en
l’ajoutant à la fin de la méthode

H & H: Research and Training 54 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

Dans cet exemple, on initialise le premier paramè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

H & H: Research and Training 55 / 142

Fonction Fonctions fléchées (arrow function)

TypeScript

Fonctions fléchées : pourquoi ?

Simplicité d’écriture du code ⇒ meilleure lisibilité

Pas de binding avec les objets prédéfinis : arguments, this...
...

H & H: Research and Training 56 / 142

Concept de décomposition (spread)

Considérons la fonction somme suivante

function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}

H & H: Research and Training 57 / 142

Concept de décomposition (spread)

Considérons la fonction somme suivante

function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}

Pour appeler la fonction somme, il faut lui passer trois paramètres number
[Link](somme (1, 3, 5));
// affiche 9

H & H: Research and Training 57 / 142

Concept de décomposition (spread)

Considérons la fonction somme suivante

function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}

Pour appeler la fonction somme, il faut lui passer trois paramètres number
[Link](somme (1, 3, 5));
// affiche 9

Et si les valeurs se trouvent dans un tableau, on peut utiliser la décomposition

let t: Array<number> = [1, 3, 5];
[Link](somme(...t));

H & H: Research and Training 57 / 142

Concept de décomposition (spread)

Considérons la fonction somme suivante

function somme(a?: number, b?: number, c?: number): number {
return a + b + c;
}

Pour appeler la fonction somme, il faut lui passer trois paramètres number
[Link](somme (1, 3, 5));
// affiche 9

Et si les valeurs se trouvent dans un tableau, on peut utiliser la décomposition

let t: Array<number> = [1, 3, 5];
[Link](somme(...t));

On peut utiliser partiellement la décomposition

let t: Array<number> = [1, 3];
[Link](somme(...t, 5));

H & H: Research and Training 57 / 142

Concept de décomposition (spread)

TypeScript

Considérons les deux objets suivants

let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = obj;

H & H: Research and Training 58 / 142

Concept de décomposition (spread)

TypeScript

Considérons les deux objets suivants

let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = obj;

Modifier l’un ⇒ modifier l’autre

[Link] = ’abruzzi’;
[Link](obj);
// affiche { nom: ’abruzzi’, prenom: ’john’ }

[Link](obj2);
// affiche { nom: ’abruzzi’, prenom: ’john’ }

H & H: Research and Training 58 / 142

Concept de décomposition (spread)

TypeScript

Pour que les deux objets soient indépendants, on peut utiliser la

décomposition pour faire le clonage
let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = { ...obj };
[Link] = ’abruzzi’;

[Link](obj);
// affiche { nom: ’wick’, prenom: ’john’ }

[Link](obj2);
// affiche { nom: ’abruzzi’, prenom: ’john’ }

H & H: Research and Training 59 / 142

import / export

TypeScript

Particularité
Avec TypeScript, on peut utiliser des éléments définis dans un
autre fichier : une variable, une fonction, une classe, une
interface...
Pour cela, il faut l’importer là où on a besoin de l’utiliser
Pour importer un élément, il faut l’exporter dans le fichier source
En transpilant le fichier contenant les import, les fichiers
contenant les éléments importés seront aussi transpilés.

H & H: Research and Training 60 / 142

import / export

TypeScript

Étant donné le fichier [Link] dont le contenu est

function somme(a: number = 0, b: number = 0) {
return a + b;
}

function produit(a: number = 0, b: number = 1) {

return a * b;
}

H & H: Research and Training 61 / 142

import / export

TypeScript
Pour exporter les deux fonctions somme et produit de [Link]
export function somme(a: number = 0, b: number = 0) {
return a + b;
}

export function produit(a: number = 0, b: number = 1) {

return a * b;
}

H & H: Research and Training 62 / 142

import / export

TypeScript
Pour exporter les deux fonctions somme et produit de [Link]
export function somme(a: number = 0, b: number = 0) {
return a + b;
}

export function produit(a: number = 0, b: number = 1) {

return a * b;
}

Ou aussi
function somme(a:number = 0, b:number = 0) {
return a + b;
}

function produit(a: number = 0, b: number = 1) {

return a * b;
}
export { somme, produit };
H & H: Research and Training 62 / 142
import / export

TypeScript

Pour importer et utiliser une fonction

import { somme } from ’./fonctions’;

[Link](somme(2, 5));
// affiche 7

H & H: Research and Training 63 / 142

import / export

TypeScript

Pour importer et utiliser une fonction

import { somme } from ’./fonctions’;

[Link](somme(2, 5));
// affiche 7

On peut aussi utiliser des alias

import { somme as s } from ’./fonctions’;

[Link](s(2, 5));
// affiche 7

H & H: Research and Training 63 / 142

import / export

TypeScript
Pour importer plusieurs éléments
import { somme, produit } from ’./fonctions’;

[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10

H & H: Research and Training 64 / 142

import / export

TypeScript
Pour importer plusieurs éléments
import { somme, produit } from ’./fonctions’;

[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10

Pour importer plusieurs éléments

import * as f from ’./fonctions’;

[Link]([Link](2, 5));
// affiche 7

[Link]([Link](2, 5));
// affiche 10

H & H: Research and Training 64 / 142

import / export

TypeScript
On peut aussi donner des alias pendant l’export
function somme(a:number = 0, b:number = 0) {
return a + b;
}

function produit(a: number = 0, b: number = 1) {

return a * b;
}
export { produit as p, somme as s } ;

H & H: Research and Training 65 / 142

import / export

TypeScript
On peut aussi donner des alias pendant l’export
function somme(a:number = 0, b:number = 0) {
return a + b;
}

function produit(a: number = 0, b: number = 1) {

return a * b;
}
export { produit as p, somme as s } ;

Pour importer
import * as f from ’./fonctions’;

[Link](f.s(2, 5));
// affiche 7

[Link](f.p(2, 5));
// affiche 10
H & H: Research and Training 65 / 142
import / export

TypeScript
On peut aussi utiliser le export default (un seul par fichier)
export default function somme(a: number = 0, b: number = 0) {
return a + b;
}

export function produit(a: number = 0, b: number = 1) {

return a * b;
}

H & H: Research and Training 66 / 142

import / export

TypeScript
On peut aussi utiliser le export default (un seul par fichier)
export default function somme(a: number = 0, b: number = 0) {
return a + b;
}

export function produit(a: number = 0, b: number = 1) {

return a * b;
}

Pour importer, pas besoin de { } pour les éléments exporter par défaut
import somme from ’./fonctions’;
import { produit } from ’./fonctions’;

[Link](somme(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 10
H & H: Research and Training 66 / 142
import / export

TypeScript

Attention, ici on a importé somme avec deux alias différents

import s from ’./fonctions’;
import produit from ’./fonctions’;

[Link](s(2, 5));
// affiche 7

[Link](produit(2, 5));
// affiche 7

H & H: Research and Training 67 / 142

Classe Rappel

TypeScript
Qu’est ce qu’une classe en POO ?

Ça correspond à un plan, un moule, une usine...

C’est une description abstraite d’un type d’objets
Elle représente un ensemble d’objets ayant les mêmes propriétés
statiques (attributs) et dynamiques (méthodes)

H & H: Research and Training 68 / 142

Classe Rappel

TypeScript
Qu’est ce qu’une classe en POO ?

Ça correspond à un plan, un moule, une usine...

C’est une description abstraite d’un type d’objets
Elle représente un ensemble d’objets ayant les mêmes propriétés
statiques (attributs) et dynamiques (méthodes)

Instance ?
Une instance correspond à un objet créé à partir d’une classe (via
le constructeur)
L’instanciation : création d’un objet d’une classe
instance ≡ objet

H & H: Research and Training 68 / 142

Classe Rappel

TypeScript

De quoi est composé une classe ?

NomClasse

les attributs

les méthodes

Attribut : [visibilité] + nom + type

Méthode : [visibilité] + nom + arguments + valeur de retour ≡
signature : exactement comme les fonctions en procédurale

H & H: Research and Training 69 / 142

Classe Syntaxe

TypeScript

Considérons la classe Personne définie dans [Link]

export class Personne {
num: number;
nom: string;
prenom: string;
}

H & H: Research and Training 70 / 142

Classe Syntaxe

TypeScript

Considérons la classe Personne définie dans [Link]

export class Personne {
num: number;
nom: string;
prenom: string;
}

En TypeScript

Toute classe a un constructeur par défaut sans paramètre.

Par défaut, la visibilité des attributs est public.

H & H: Research and Training 70 / 142

Classe Syntaxe

TypeScript
Hypothèse

Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john

H & H: Research and Training 71 / 142

Classe Syntaxe

TypeScript
Hypothèse

Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john

Étape 1 : Commençons par importer la classe Personne dans [Link]

import { Personne } from ’./personne’;

H & H: Research and Training 71 / 142

Classe Syntaxe

TypeScript
Hypothèse

Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john

Étape 1 : Commençons par importer la classe Personne dans [Link]

import { Personne } from ’./personne’;

Étape 2 : déclarons un objet (objet non créé)

let personne: Personne;

H & H: Research and Training 71 / 142

Classe Syntaxe

TypeScript
Hypothèse

Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john

Étape 1 : Commençons par importer la classe Personne dans [Link]

import { Personne } from ’./personne’;

Étape 2 : déclarons un objet (objet non créé)

let personne: Personne;

Étape 3 : créons l’objet (instanciation) de type Personne (objet créé)

personne = new Personne();

H & H: Research and Training 71 / 142

Classe Syntaxe

TypeScript
Hypothèse

Si on voulait créer un objet de la classe Personne avec les valeurs 1, wick et john

Étape 1 : Commençons par importer la classe Personne dans [Link]

import { Personne } from ’./personne’;

Étape 2 : déclarons un objet (objet non créé)

let personne: Personne;

Étape 3 : créons l’objet (instanciation) de type Personne (objet créé)

personne = new Personne();

On peut faire déclaration + instanciation

let personne: Personne = new Personne();

H & H: Research and Training 71 / 142

Classe Syntaxe

TypeScript

Affectons les valeurs aux différents attributs

[Link] = 1;
[Link] = "wick";
[Link] = "john";

H & H: Research and Training 72 / 142

Classe Syntaxe

TypeScript

Affectons les valeurs aux différents attributs

[Link] = 1;
[Link] = "wick";
[Link] = "john";

Pour être sûr que les valeurs ont bien été affectées aux attributs,
on affiche
[Link](personne)
// affiche Personne { num: 1, nom: ’wick’, prenom: ’
john’ }

H & H: Research and Training 72 / 142

Classe Setter

TypeScript
Hypothèse

Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la
classe Personne

H & H: Research and Training 73 / 142

Classe Setter

TypeScript
Hypothèse

Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la
classe Personne

Démarche

1 Bloquer l’accès directe aux attributs (mettre la visibilité à private)

2 Définir des méthodes publiques qui contrôlent l’affectation de valeurs

aux attributs (les setter)

H & H: Research and Training 73 / 142

Classe Setter

TypeScript
Hypothèse

Supposant que l’on n’accepte pas de valeur négative pour l’attribut num de la
classe Personne

Démarche

1 Bloquer l’accès directe aux attributs (mettre la visibilité à private)

2 Définir des méthodes publiques qui contrôlent l’affectation de valeurs

aux attributs (les setter)

Convention

Mettre la visibilité private ou protected pour tous les attributs

Mettre la visibilité public pour toutes les méthodes

H & H: Research and Training 73 / 142
Classe Setter

Mettons la visibilité private pour tous les attributs de la classe Personne

export class Personne {
private num: number;
private nom: string;
private prenom: string;
}

H & H: Research and Training 74 / 142

Classe Setter

Mettons la visibilité private pour tous les attributs de la classe Personne

export class Personne {
private num: number;
private nom: string;
private prenom: string;
}

Dans le fichier [Link], les trois lignes suivantes sont soulignées en rouge
[Link] = 1;
[Link] = "wick";
[Link] = "john";

H & H: Research and Training 74 / 142

Classe Setter

Mettons la visibilité private pour tous les attributs de la classe Personne

export class Personne {
private num: number;
private nom: string;
private prenom: string;
}

Dans le fichier [Link], les trois lignes suivantes sont soulignées en rouge
[Link] = 1;
[Link] = "wick";
[Link] = "john";

Explication

Les attributs sont privés, donc aucun accès direct n’est autorisé

H & H: Research and Training 74 / 142

Classe Setter

Mettons la visibilité private pour tous les attributs de la classe Personne

export class Personne {
private num: number;
private nom: string;
private prenom: string;
}

Dans le fichier [Link], les trois lignes suivantes sont soulignées en rouge
[Link] = 1;
[Link] = "wick";
[Link] = "john";

Explication

Les attributs sont privés, donc aucun accès direct n’est autorisé

Solution : les setters

Des méthodes qui contrôlent l’affectation de valeurs aux attributs

H & H: Research and Training 74 / 142

Classe Setter

TypeScript

Conventions TypeScript

Le setter est une méthode déclarée avec le mot-clé set

Il porte le nom de l’attribut
On l’utilise comme un attribut
Pour éviter l’ambiguı̈té, on ajoute un underscore pour l’attribut

H & H: Research and Training 75 / 142

Classe Setter

TypeScript
Nouveau contenu de la classe Personne après ajout des setters
export class Personne {
private _num: number;
private _nom: string;
private _prenom: string;

public set num(_num : number) {

this._num = (_num >= 0 ? _num : 0);
}
public set nom(_nom: string) {
this._nom = _nom;
}
public set prenom(_prenom: string) {
this._prenom = _prenom;
}
}
H & H: Research and Training 76 / 142
Classe Setter

TypeScript
Pour tester, rien à changer dans [Link]
import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = 1;
[Link] = "wick";
[Link] = "john";

[Link](personne);

H & H: Research and Training 77 / 142

Classe Setter

TypeScript
Pour tester, rien à changer dans [Link]
import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = 1;
[Link] = "wick";
[Link] = "john";

[Link](personne);

Pour transpiler, ajouter l’option -t es5, le résultat est :

Personne { num: 1, nom: ’wick’, prenom: ’john’ }

H & H: Research and Training 77 / 142

Classe Setter

TypeScript
Testons avec une valeur négative pour l’attribut numero
import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = -1;
[Link] = "wick";
[Link] = "john";

[Link](personne);

H & H: Research and Training 78 / 142

Classe Setter

TypeScript
Testons avec une valeur négative pour l’attribut numero
import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = -1;
[Link] = "wick";
[Link] = "john";

[Link](personne);

Le résultat est :
Personne { num: 0, nom: ’wick’, prenom: ’john’ }

H & H: Research and Training 78 / 142

Classe Getter

TypeScript
Question

Comment récupérer les attributs (privés) de la classe Personne ?

H & H: Research and Training 79 / 142

Classe Getter

TypeScript
Question

Comment récupérer les attributs (privés) de la classe Personne ?

Démarche

Définir des méthodes qui retournent les valeurs des attributs (les getter)

H & H: Research and Training 79 / 142

Classe Getter

TypeScript
Question

Comment récupérer les attributs (privés) de la classe Personne ?

Démarche

Définir des méthodes qui retournent les valeurs des attributs (les getter)

Conventions TypeScript

Le getter est une méthode déclarée avec le mot-clé get

Il porte le nom de l’attribut

On l’utilise comme un attribut

H & H: Research and Training 79 / 142

Classe Getter

TypeScript

Ajoutons les getters dans la classe Personne

public get num() : number {
return this._num;
}
public get nom(): string {
return this._nom;
}
public get prenom(): string {
return this._prenom;
}

H & H: Research and Training 80 / 142

Classe Getter

TypeScript

Pour tester

import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = 1;
[Link] = "wick";
[Link] = "john";

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

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

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

H & H: Research and Training 81 / 142

Classe Constructeur

TypeScript
Remarques

Par défaut, toute classe en TypeScript a un constructeur par

défaut sans paramètre
Pour simplifier la création d’objets, on peut définir un nouveau
constructeur qui prend en paramètre plusieurs attributs de la
classe

H & H: Research and Training 82 / 142

Classe Constructeur

TypeScript
Remarques

Par défaut, toute classe en TypeScript a un constructeur par

défaut sans paramètre
Pour simplifier la création d’objets, on peut définir un nouveau
constructeur qui prend en paramètre plusieurs attributs de la
classe

Les constructeurs avec TypeScript

On le déclare avec le mot-clé constructor

Il peut contenir la visibilité des attributs si on veut simplifier la
déclaration

H & H: Research and Training 82 / 142

Classe Constructeur

TypeScript
Le constructeur de la classe Personne prenant trois paramètres
public constructor(_num: number, _nom: string, _prenom:
string) {
this._num = _num;
this._nom = _nom;
this._prenom = _prenom;
}

H & H: Research and Training 83 / 142

Classe Constructeur

Pour préserver la cohérence, il faut que le constructeur contrôle la

valeur de l’attribut num
public constructor(_num: number, _nom: string, _prenom:
string) {
this._num = (_num >= 0 ? _num : 0);
this._nom = _nom;
this._prenom = _prenom;
}

H & H: Research and Training 83 / 142

Classe Constructeur

TypeScript

On peut aussi appelé le setter dans le constructeur

public constructor(_num: number, _nom: string,
_prenom: string) {
[Link] = _num;
this._nom = _nom;
this._prenom = _prenom;
}

H & H: Research and Training 84 / 142

Classe Constructeur

TypeScript
Dans [Link], la ligne suivante est soulignée en rouge
let personne: Personne = new Personne();

H & H: Research and Training 85 / 142

Classe Constructeur

TypeScript
Dans [Link], la ligne suivante est soulignée en rouge
let personne: Personne = new Personne();

Explication
Le constructeur par défaut a été écrasé (il n’existe plus)

H & H: Research and Training 85 / 142

Classe Constructeur

TypeScript
Dans [Link], la ligne suivante est soulignée en rouge
let personne: Personne = new Personne();

Explication
Le constructeur par défaut a été écrasé (il n’existe plus)

Comment faire ?
TypeScript n’autorise pas la présence de plusieurs constructeurs
(la surcharge)
On peut utiliser soit les valeurs par défaut, soit les paramètres
optionnels

H & H: Research and Training 85 / 142

Classe Constructeur

TypeScript

Le nouveau constructeur avec les paramètres optionnels

public constructor(_num?: number, _nom?: string,
_prenom?: string) {
if(_num)
[Link] = _num;
if (_nom)
this._nom = _nom;
if(_prenom)
this._prenom = _prenom;
}

H & H: Research and Training 86 / 142

Classe Constructeur

TypeScript
Pour tester

import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = -1;
[Link] = "wick";
[Link] = "john";
[Link](personne);

let personne2: Personne = new Personne(2, ’bob’, ’mike’);

[Link](personne2);

H & H: Research and Training 87 / 142

Classe Constructeur

TypeScript
Pour tester

import { Personne } from ’./personne’;

let personne: Personne = new Personne();

[Link] = -1;
[Link] = "wick";
[Link] = "john";
[Link](personne);

let personne2: Personne = new Personne(2, ’bob’, ’mike’);

[Link](personne2);

En exécutant, le résultat est :

Personne { num: 0, nom: ’wick’, prenom: ’john’ }
Personne { num: 2, nom: ’bob’, prenom: ’mike’ }

H & H: Research and Training 87 / 142

Classe Constructeur

TypeScript

TypeScript nous offre la possibilité de fusionner la déclaration des attributs et le

constructeur

public constructor(private _num?: number,

private _nom?: string,
private _prenom?: string) {

H & H: Research and Training 88 / 142

Classe Constructeur

TypeScript

TypeScript nous offre la possibilité de fusionner la déclaration des attributs et le

constructeur

public constructor(private _num?: number,

private _nom?: string,
private _prenom?: string) {

En exécutant, le résultat est le même

Personne { num: 0, nom: ’wick’, prenom: ’john’ }
Personne { num: 2, nom: ’bob’, prenom: ’mike’ }

H & H: Research and Training 88 / 142

Classe Attributs et méthodes statiques

TypeScript

Récapitulatif

Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes
valeurs

H & H: Research and Training 89 / 142

Classe Attributs et méthodes statiques

TypeScript

Récapitulatif

Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes
valeurs

Hypothèse

Et si nous voulions qu’un attribut ait une valeur partagée par toutes les instances (par
exemple, le nombre d’objets instanciés de la classe Personne)

H & H: Research and Training 89 / 142

Classe Attributs et méthodes statiques

TypeScript

Récapitulatif

Les instances d’une même classe ont toutes les mêmes attributs mais pas les mêmes
valeurs

Hypothèse

Et si nous voulions qu’un attribut ait une valeur partagée par toutes les instances (par
exemple, le nombre d’objets instanciés de la classe Personne)

Solution : attribut statique ou attribut de classe

Un attribut dont la valeur est partagée par toutes les instances de la classe.

H & H: Research and Training 89 / 142

Classe Attributs et méthodes statiques

TypeScript

Exemple

Si on voulait créer un attribut contenant le nombre d’objets créés à

partir de la classe Personne
Notre attribut doit être déclaré static, sinon chaque objet
pourrait avoir sa propre valeur pour cet attribut

H & H: Research and Training 90 / 142

Classe Attributs et méthodes statiques

TypeScript

Ajoutons un attribut statique nbrPersonnes à la liste d’attributs de la

classe Personne
private static _nbrPersonnes: number = 0;

H & H: Research and Training 91 / 142

Classe Attributs et méthodes statiques

TypeScript

Ajoutons un attribut statique nbrPersonnes à la liste d’attributs de la

classe Personne
private static _nbrPersonnes: number = 0;

Incrémentons notre compteur de personnes dans les constructeurs

public constructor(private _num?: number,
private _nom?: string,
private _prenom?: string) {
Personne._nbrPersonnes++;
}

H & H: Research and Training 91 / 142

Classe Attributs et méthodes statiques

TypeScript
Créons un getter pour l’attribut static nbrPersonnes
public static get nbrPersonnes() {
return Personne._nbrPersonnes;
}

H & H: Research and Training 92 / 142

Classe Attributs et méthodes statiques

TypeScript
Créons un getter pour l’attribut static nbrPersonnes
public static get nbrPersonnes() {
return Personne._nbrPersonnes;
}

Testons cela dans [Link]

import { Personne } from ’./personne’;

[Link]([Link]);
// affiche 0
let personne: Personne = new Personne();
[Link] = -1;
[Link] = "wick";
[Link] = "john";
[Link]([Link]);
// affiche 1
let personne2: Personne = new Personne(2, ’bob’, ’mike’);
[Link]([Link]);
// affiche 2

H & H: Research and Training 92 / 142

Classe Attributs et méthodes statiques

TypeScript
Exercice
Définir une classe Adresse avec trois attributs privés rue,
codePostal et ville de type chaı̂ne de caractère
Définir un constructeur avec trois paramètres, les getters et
setters
Dans la classe Personne, ajouter un attribut adresse (de type
Adresse) et définir un nouveau constructeur à quatre paramètres
et le getter et le setter de ce nouvel attribut
Dans [Link], créer deux objets : un objet adresse (de type
Adresse) et personne (de type Personne) prenant comme
adresse l’objet adresse
Afficher tous les attributs de l’objet personne

H & H: Research and Training 93 / 142

Héritage

TypeScript

L’héritage, quand ?
Lorsque deux ou plusieurs classes partagent plusieurs attributs
(et méthodes)
Lorsqu’une Classe1 est (une sorte de ) Classe2

H & H: Research and Training 94 / 142

Héritage

TypeScript

L’héritage, quand ?
Lorsque deux ou plusieurs classes partagent plusieurs attributs
(et méthodes)
Lorsqu’une Classe1 est (une sorte de ) Classe2

Forme générale
class ClasseFille extends ClasseMère
{
// code
};

H & H: Research and Training 94 / 142

Héritage

TypeScript

Exemple

Un enseignant a un numéro, un nom, un prénom et un salaire

H & H: Research and Training 95 / 142

Héritage

TypeScript

Exemple

Un enseignant a un numéro, un nom, un prénom et un salaire

Un étudiant a aussi un numéro, un nom, un prénom et un niveau

H & H: Research and Training 95 / 142

Héritage

TypeScript

Exemple

Un enseignant a un numéro, un nom, un prénom et un salaire

Un étudiant a aussi un numéro, un nom, un prénom et un niveau

Sémantiquement, enseignant et étudiant sont une sorte de personne

H & H: Research and Training 95 / 142

Héritage

TypeScript

Exemple

Un enseignant a un numéro, un nom, un prénom et un salaire

Un étudiant a aussi un numéro, un nom, un prénom et un niveau

Sémantiquement, enseignant et étudiant sont une sorte de personne

En plus, les deux partagent plusieurs attributs tels que numéro, nom et
prénom

H & H: Research and Training 95 / 142

Héritage

TypeScript

Exemple

Un enseignant a un numéro, un nom, un prénom et un salaire

Un étudiant a aussi un numéro, un nom, un prénom et un niveau

Sémantiquement, enseignant et étudiant sont une sorte de personne

En plus, les deux partagent plusieurs attributs tels que numéro, nom et
prénom

Donc, on peut peut utiliser la classe Personne puisqu’elle contient tous

les attributs numéro, nom et prénom

H & H: Research and Training 95 / 142

Héritage

TypeScript

Exemple

Un enseignant a un numéro, un nom, un prénom et un salaire

Un étudiant a aussi un numéro, un nom, un prénom et un niveau

Sémantiquement, enseignant et étudiant sont une sorte de personne

En plus, les deux partagent plusieurs attributs tels que numéro, nom et
prénom

Donc, on peut peut utiliser la classe Personne puisqu’elle contient tous

les attributs numéro, nom et prénom

Les classes Étudiant et Enseignant hériteront donc (extends) de

la classe Personne

H & H: Research and Training 95 / 142

Héritage

TypeScript

Particularité du langage TypeScript

Une classe ne peut hériter que d’une seule classe

L’héritage multiple est donc non-autorisé.

H & H: Research and Training 96 / 142

Héritage

TypeScript
Préparons la classe Enseignant
import { Personne } from "./personne";

export class Enseignant extends Personne {

H & H: Research and Training 97 / 142

Héritage

TypeScript
Préparons la classe Enseignant
import { Personne } from "./personne";

export class Enseignant extends Personne {

Préparons la classe Etudiant

import { Personne } from "./personne";

export class Etudiant extends Personne {

}
extends est le mot-clé à utiliser pour définir une relation d’héritage
entre deux classes
H & H: Research and Training 97 / 142
Héritage

TypeScript

Ensuite
Créer un attribut niveau dans la classe Etudiant ainsi que ses
getter et setter
Créer un attribut salaire dans la classe Enseignant ainsi que
ses getter et setter

H & H: Research and Training 98 / 142

Héritage

TypeScript
Pour créer un objet de type Enseignant
import { Enseignant } from ’./enseignant’;

let enseignant: Enseignant = new Enseignant();

[Link] = 3;
[Link] = "green";
[Link] = "jonas";
[Link] = 1700;
[Link](enseignant);

H & H: Research and Training 99 / 142

Héritage

TypeScript
Pour créer un objet de type Enseignant
import { Enseignant } from ’./enseignant’;

let enseignant: Enseignant = new Enseignant();

[Link] = 3;
[Link] = "green";
[Link] = "jonas";
[Link] = 1700;
[Link](enseignant);

En exécutant, le résultat est :

Enseignant { _num: 3, _nom: ’green’, _prenom: ’jonas
’, _salaire: 1700 }

H & H: Research and Training 99 / 142

Héritage

TypeScript
TypeScript autorise la redéfinition : on peut définir un constructeur, même s’il
existe dans la classe mère, qui prend plusieurs paramètres et qui utilise le
constructeur de la classe mère
constructor(_num?: number,
_nom?: string,
_prenom?: string,
private _salaire?: number) {

super(_num, _nom, _prenom);

}

H & H: Research and Training 100 / 142

Héritage

super(_num, _nom, _prenom);

}

super() fait appel au constructeur de la classe mère

H & H: Research and Training 100 / 142

Héritage

super(_num, _nom, _prenom);

}

super() fait appel au constructeur de la classe mère

Maintenant, on peut créer un enseignant ainsi

let enseignant: Enseignant = new Enseignant(3, "green", "jonas"
, 1700);

H & H: Research and Training 100 / 142

Héritage

super(_num, _nom, _prenom);

}

super() fait appel au constructeur de la classe mère

Maintenant, on peut créer un enseignant ainsi

let enseignant: Enseignant = new Enseignant(3, "green", "jonas"
, 1700);

Refaire la même chose pour Etudiant

H & H: Research and Training 100 / 142
Héritage

TypeScript

À partir de la classe Enseignant

On ne peut avoir accès direct à un attribut de la classe mère

C’est-à-dire, on ne peut faire this. num car les attributs ont une
visibilité private
Pour modifier la valeur d’un attribut privé de la classe mère, il faut
soit utiliser les getters/setters
soit mettre la visibilité des attributs de la classe mère à protected

H & H: Research and Training 101 / 142

Héritage

TypeScript
On peut créer un objet de la classe Enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);

H & H: Research and Training 102 / 142

Héritage

TypeScript
On peut créer un objet de la classe Enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);

Ou ainsi
let enseignant: Personne = new Enseignant(3, "green"
, "jonas", 1700);

H & H: Research and Training 102 / 142

Héritage

TypeScript
On peut créer un objet de la classe Enseignant ainsi
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);

Ou ainsi
let enseignant: Personne = new Enseignant(3, "green"
, "jonas", 1700);

Ceci est faux

let enseignant: Enseignant = new Personne(3, "green"
, "jonas");

H & H: Research and Training 102 / 142

Héritage

TypeScript
Remarque

Pour connaı̂tre la classe d’un objet, on peut utiliser le mot-clé instanceof

H & H: Research and Training 103 / 142

Héritage

TypeScript
Remarque

Pour connaı̂tre la classe d’un objet, on peut utiliser le mot-clé instanceof

Exemple

let enseignant: Personne = new Enseignant(3, "green", "jonas",

1700);

[Link](enseignant instanceof Enseignant);

// affiche true

[Link](enseignant instanceof Personne);

// affiche true

[Link](personne instanceof Enseignant);

// affiche false

H & H: Research and Training 103 / 142

Héritage

TypeScript

Exercice

1 Créer un objet de type Etudiant, un deuxième de type Enseignant et un

dernier de type Personne stocker les tous dans un seul tableau.

2 Parcourir le tableau et afficher pour chacun soit le numero s’il est personne, soit
le salaire s’il est enseignant ou soit le niveau s’il est étudiant.

H & H: Research and Training 104 / 142

Héritage

TypeScript

Exercice

1 Créer un objet de type Etudiant, un deuxième de type Enseignant et un

dernier de type Personne stocker les tous dans un seul tableau.

2 Parcourir le tableau et afficher pour chacun soit le numero s’il est personne, soit
le salaire s’il est enseignant ou soit le niveau s’il est étudiant.

Pour parcourir un tableau, on peut faire

let personnes: Array<Personne> = [personne, enseignant,

etudiant];
for(let p of personnes) {

H & H: Research and Training 104 / 142

Héritage

TypeScript

Solution
let personnes: Array<Personne> = [personne,
enseignant, etudiant];
for(let p of personnes) {

if(p instanceof Enseignant)

[Link]([Link]);
else if (p instanceof Etudiant)
[Link]([Link])
else
[Link]([Link]);
}

H & H: Research and Training 105 / 142

Classe et méthode abstraites

TypeScript
Classe abstraite

C’est une classe qu’on ne peut instancier

On la déclare avec le mot-clé abstract

H & H: Research and Training 106 / 142

Classe et méthode abstraites

TypeScript
Classe abstraite

C’est une classe qu’on ne peut instancier

On la déclare avec le mot-clé abstract

Si on déclare la classe Personne abstraite

export abstract class Personne {
...
}

H & H: Research and Training 106 / 142

Classe et méthode abstraites

TypeScript
Classe abstraite

C’est une classe qu’on ne peut instancier

On la déclare avec le mot-clé abstract

Si on déclare la classe Personne abstraite

export abstract class Personne {
...
}

Tout ce code sera souligné en rouge

let personne: Personne = new Personne();
...
let personne2: Personne = new Personne(2, ’bob’, ’mike’);

H & H: Research and Training 106 / 142

Classe et méthode abstraites

TypeScript
Méthode abstraite

C’est une méthode non implémentée (sans code)

Une méthode abstraite doit être déclarée dans une classe abstraite

Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite

H & H: Research and Training 107 / 142

Classe et méthode abstraites

TypeScript
Méthode abstraite

C’est une méthode non implémentée (sans code)

Une méthode abstraite doit être déclarée dans une classe abstraite

Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite

Déclarons une méthode abstraite afficherDetails() dans Personne

abstract afficherDetails(): void ;

H & H: Research and Training 107 / 142

Classe et méthode abstraites

TypeScript
Méthode abstraite

C’est une méthode non implémentée (sans code)

Une méthode abstraite doit être déclarée dans une classe abstraite

Une méthode abstraite doit être implémentée par les classes filles de la classe abstraite

Déclarons une méthode abstraite afficherDetails() dans Personne

abstract afficherDetails(): void ;

Remarque

La méthode afficherDetails() dans Personne est soulignée en rouge car la classe

doit être déclarée abstraite

En déclarant la classe Personne abstraite, les deux classes Etudiant et Enseignant

sont soulignées en rouge car elles doivent implémenter les méthodes abstraites de
Personne

H & H: Research and Training 107 / 142

Classe et méthode abstraites

Pour implémenter la méthode abstraite

Placer le curseur sur le nom de la classe

Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class

H & H: Research and Training 108 / 142

Classe et méthode abstraites

Pour implémenter la méthode abstraite

Placer le curseur sur le nom de la classe

Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class

Le code généré
afficherDetails(): void {
throw new Error("Method not implemented.");
}

H & H: Research and Training 108 / 142

Classe et méthode abstraites

Pour implémenter la méthode abstraite

Placer le curseur sur le nom de la classe

Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class

Le code généré
afficherDetails(): void {
throw new Error("Method not implemented.");
}

Remplaçons le code généré dans Etudiant par

afficherDetails(): void {
[Link]([Link] + " " + [Link] + " " + [Link]);
}

H & H: Research and Training 108 / 142

Classe et méthode abstraites

Pour implémenter la méthode abstraite

Placer le curseur sur le nom de la classe

Dans le menu afficher, cliquer sur Quick Fix puis Add inherited abstract class

Le code généré
afficherDetails(): void {
throw new Error("Method not implemented.");
}

Remplaçons le code généré dans Etudiant par

afficherDetails(): void {
[Link]([Link] + " " + [Link] + " " + [Link]);
}

Et dans Enseignant par

afficherDetails(): void {
[Link]([Link] + " " + [Link] + " " + [Link]);
}
H & H: Research and Training 108 / 142
Classe et méthode abstraites

TypeScript

Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
[Link]();

H & H: Research and Training 109 / 142

Classe et méthode abstraites

TypeScript

Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
[Link]();

En exécutant, le résultat est :

green jonas 1700

H & H: Research and Training 109 / 142

Interface

TypeScript
En TypeScript

Une classe ne peut hériter que d’une seule classe

Mais elle peut hériter de plusieurs interfaces

H & H: Research and Training 110 / 142

Interface

TypeScript
En TypeScript

Une classe ne peut hériter que d’une seule classe

Mais elle peut hériter de plusieurs interfaces

Une interface
déclarée avec le mot-clé interface
comme une classe complètement abstraite (impossible de
l’instancier) dont : toutes les méthodes sont abstraites
un protocole, un contrat : toute classe qui hérite d’une interface
doit implémenter toutes ses méthodes

H & H: Research and Training 110 / 142

Interface

TypeScript

Définissons l’interface IMiseEnForme dans [Link]

export interface IMiseEnForme {
afficherNomMajuscule(): void;
afficherPrenomMajuscule() : void;
}

H & H: Research and Training 111 / 142

Interface

TypeScript

Définissons l’interface IMiseEnForme dans [Link]

export interface IMiseEnForme {
afficherNomMajuscule(): void;
afficherPrenomMajuscule() : void;
}

Pour hériter d’une interface, on utilise le mot-clé implements

export abstract class Personne implements IMiseEnForme {
...
}

H & H: Research and Training 111 / 142

Interface

TypeScript

La classe Personne est soulignée en rouge

Placer le curseur sur la classe Personne
Dans le menu afficher, cliquer sur Quick Fix puis Add
inherited abstract class

H & H: Research and Training 112 / 142

Interface

TypeScript

La classe Personne est soulignée en rouge

Placer le curseur sur la classe Personne
Dans le menu afficher, cliquer sur Quick Fix puis Add
inherited abstract class

Le code généré
afficherNomMajuscule(): void {
throw new Error("Method not implemented.");
}
afficherPrenomMajuscule(): void {
throw new Error("Method not implemented.");
}

H & H: Research and Training 112 / 142

Interface

TypeScript

Modifions le code de deux méthodes générées

afficherNomMajuscule(): void {
[Link]([Link]());
}

afficherPrenomMajuscule(): void {
[Link]([Link]());
}

H & H: Research and Training 113 / 142

Interface

TypeScript

Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
[Link]();
[Link]();

H & H: Research and Training 114 / 142

Interface

TypeScript

Pour tester
let enseignant: Enseignant = new Enseignant(3, "
green", "jonas", 1700);
[Link]();
[Link]();

En exécutant, le résultat est :

GREEN
JONAS

H & H: Research and Training 114 / 142

Interface

TypeScript

Remarque

Une interface peut hériter de plusieurs autres interfaces (mais pas

d’une classe)
Pour cela, il faut utiliser le mot-clé extends et pas implements
car une interface n’implémente jamais de méthodes.

H & H: Research and Training 115 / 142

Interface

TypeScript
Une deuxième utilisation
En TypeScript, une interface peut être utilisée comme une classe
Model de plusieurs autres interfaces (mais pas d’une classe)
Elle contient des attributs (qui sont par définition publiques) et des
méthodes (abstraites)

H & H: Research and Training 116 / 142

Interface

Exemple
export interface Person {
num: number;
nom: string;
prenom: string;
}

H & H: Research and Training 116 / 142

Interface

TypeScript
Impossible d’instancier cette interface avec l’opérateur new, mais on
peut utiliser les objets JavaScript
let person: Person = {
num: 1000,
nom: ’turing’,
prenom: ’alan’
};
[Link](person);
// affiche { num: 1000, nom: ’turing’, prenom: ’alan’ }

H & H: Research and Training 117 / 142

Interface

On peut rendre les attributs optionnels

export interface Person {
num?: number;
nom?: string;
prenom?: string;
}
H & H: Research and Training 117 / 142
Interface

TypeScript
Ainsi on peut faire
let person: Person = {
nom: ’turing’,
};
[Link](person)
// affiche { nom: ’turing’ }

H & H: Research and Training 118 / 142

Interface

TypeScript
Ainsi on peut faire
let person: Person = {
nom: ’turing’,
};
[Link](person)
// affiche { nom: ’turing’ }

Pour la suite, gardons l’attribut nom obligatoire

export interface Person {
num?: number;
nom: string;
prenom?: string;
}

H & H: Research and Training 118 / 142

Interface

TypeScript

Duck typing
Un concept un peu proche du polymorphisme
Il se base sur une série d’attributs et de méthodes attendus.
L’objet est considéré valide quel que soit sa classe s’il respecte les
attributs et les méthodes attendus.

H & H: Research and Training 119 / 142

Interface

TypeScript

Exemple : considérons la fonction afficherNom() définie dans

[Link]
function afficherNom(p: Person){
[Link]([Link])
}

H & H: Research and Training 119 / 142

Interface

TypeScript
Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché

afficherNom(person);
// affiche turing

afficherNom(personne);
// affiche wick

H & H: Research and Training 120 / 142

Interface

TypeScript
Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché

afficherNom(person);
// affiche turing

afficherNom(personne);
// affiche wick

Ceci est aussi correcte car alien a un attribut nom

let alien = { couleur: ’blanc’, nom: ’white’ };

afficherNom(alien);
// affiche white

H & H: Research and Training 120 / 142

Interface

TypeScript
Si l’objet passé en paramètre contient un attribut nom, alors ce dernier sera affiché

afficherNom(person);
// affiche turing

afficherNom(personne);
// affiche wick

Ceci est aussi correcte car alien a un attribut nom

let alien = { couleur: ’blanc’, nom: ’white’ };

afficherNom(alien);
// affiche white

Ceci génère une erreur car voiture n’a pas d’attribut nom

let voiture = { marque: ’ford’, modele: ’fiesta’, num: 100000};

afficherNom(voiture);

H & H: Research and Training 120 / 142

Décorateur

TypeScript
Décorateur

L’équivalent d’annotations en Java et php

Méta-programmation (modification des informations/comportement sur

un objet/classe)

Utilisé avec le préfixe @

H & H: Research and Training 121 / 142

Décorateur

TypeScript
Décorateur

L’équivalent d’annotations en Java et php

Méta-programmation (modification des informations/comportement sur

un objet/classe)

Utilisé avec le préfixe @

Ajoutons le décorateur @f() à afficherDetails() dans Enseignant

@f()
afficherDetails(): void {
[Link]([Link] + " " + [Link] + " " + this.
salaire);
}

H & H: Research and Training 121 / 142

Décorateur

TypeScript
Le décorateur @f() n’existe pas en TypeScript, il faut donc le définir (en lui associant une
fonction)
export function f() {
return function(a,b,c){
[Link](’before afficherDetails()’);
}
}

H & H: Research and Training 122 / 142

Décorateur

Testons maintenant le code suivant et vérifions que la fonction associée au décorateur a

bien été exécutée (ajouter l’option --experimentalDecorators à la commande de
transpilation)
let enseignant: Enseignant = new Enseignant(3, "green", "jonas", 1700);
[Link]();

H & H: Research and Training 122 / 142

Décorateur

Testons maintenant le code suivant et vérifions que la fonction associée au décorateur a

bien été exécutée (ajouter l’option --experimentalDecorators à la commande de
transpilation)
let enseignant: Enseignant = new Enseignant(3, "green", "jonas", 1700);
[Link]();

Le résultat est :
before afficherDetails()
green jonas 1700

H & H: Research and Training 122 / 142

Généricité

TypeScript

Généricité
Un concept défini dans tous les LOO avec < ... >
Elle permet de définir des fonctions, classes, interfaces qui
s’adaptent avec plusieurs types

H & H: Research and Training 123 / 142

Généricité

TypeScript

Exemple

si on a besoin d’une classe dont les méthodes effectuent les

mêmes opérations quel que soit le type d’attributs
somme pour entiers ou réels,
concaténation pour chaı̂nes de caractères,
ou logique pour booléens...
...

Impossible sans définir plusieurs classes (une pour chaque

type)

H & H: Research and Training 124 / 142

Généricité

TypeScript
Solution avec la généricité
export class Operation<T>{

constructor(private var1: T, private var2: T) { }

public plus() {
if (typeof this.var1 == ’string’) {
return this.var1 + this.var2;
}
else if (typeof this.var1 == ’number’ && typeof this.var2 == ’
number’) {
return this.var1 + this.var2;
}
else if (typeof this.var1 == ’boolean’ && typeof this.var2 == ’
boolean’) {
return this.var1 || this.var2;
}
else {
throw "error"
}
}
}

H & H: Research and Training 125 / 142

Généricité

TypeScript

Nous pouvons donc utiliser la même méthode qui fait la même chose pour des types
différents

let operation1: Operation<number> = new Operation(5, 3);

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

let operation2: Operation<string> = new Operation("bon", "jour");

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

let operation3: Operation<number> = new Operation(5.2, 3.8);

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

let operation4: Operation<boolean> = new Operation(true, false);

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

H & H: Research and Training 126 / 142

Map

TypeScript

Map (dictionnaire)

Type fonctionnant avec un couple (clé,valeur)

La clé doit être unique
Chaque élément est appelé entrée (entry)
Les éléments sont stockés et récupérés dans l’ordre d’insertion
Disponible depuis ES5 puis modifié dans ES6

H & H: Research and Training 127 / 142

Map

TypeScript

Map (dictionnaire)

Type fonctionnant avec un couple (clé,valeur)

Pour tester, utiliser l’option -t ES6

H & H: Research and Training 127 / 142

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 }

H & H: Research and Training 128 / 142

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

H & H: Research and Training 128 / 142

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

H & H: Research and Training 128 / 142

Map

TypeScript
Si la clé existe déjà, la valeur sera remplacée

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

H & H: Research and Training 129 / 142

Map

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

H & H: Research and Training 129 / 142

Map

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

H & H: Research and Training 129 / 142

Map

TypeScript
Si 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’);

H & H: Research and Training 129 / 142

Map

TypeScript
Pour récupérer la liste des clés d’un Map

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

H & H: Research and Training 130 / 142

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 }

H & H: Research and Training 130 / 142

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 ]
}
*/

H & H: Research and Training 130 / 142

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
*/

H & H: Research and Training 131 / 142

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
*/

Depuis ES6, on peut faire

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

H & H: Research and Training 131 / 142

Map

TypeScript

On peut le faire aussi avec keys()

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

H & H: Research and Training 132 / 142

Map

TypeScript

Une deuxième solution consiste à utiliser forEach (affiche

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

/* affiche
10
12
20
12
*/

H & H: Research and Training 133 / 142

Map

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

function afficher(elt) {
[Link](elt)
}

H & H: Research and Training 134 / 142

Map

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

function afficher(elt) {
[Link](elt)
}

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

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

function afficher(elt){
[Link](elt)
}

H & H: Research and Training 134 / 142

Map

TypeScript

Pour afficher les clés et les valeurs

[Link](afficher);

function afficher(value, key) {

[Link](value, key)
}

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

H & H: Research and Training 135 / 142

Set

TypeScript

Set
Une collection ne contenant pas de doublons
Acceptant les types simples et objets
Les éléments sont stockées et récupérés dans l’ordre d’insertion
Disponible depuis ES5 puis modifié dans ES6

H & H: Research and Training 136 / 142

Set

TypeScript

Pour tester, utiliser l’option -t ES6

H & H: Research and Training 136 / 142

Set

TypeScript

Pour créer un Set

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

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

H & H: Research and Training 137 / 142

Set

TypeScript

Pour créer un Set

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

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

Ajouter un élément à un Set

[Link](’citroen’);

H & H: Research and Training 137 / 142

Set

TypeScript

Pour créer un Set

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

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

Ajouter un élément à un Set

[Link](’citroen’);

Pour ajouter plusieurs éléments à la fois

[Link](’citroen’)
.add(’renault’);

H & H: Research and Training 137 / 142

Set

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

H & H: Research and Training 138 / 142

Set

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

Pour vérifier l’existence d’un élément

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

H & H: Research and Training 138 / 142

Set

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

Pour vérifier l’existence d’un élément

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

Pour supprimer un élément

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

H & H: Research and Training 138 / 142

Set

TypeScript

Autres mé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 éléments de A et
de B.
[Link](B) : retourne un Set contenant les éléments
de A qui sont dans B.
[Link](B) : retourne un Set contenant les éléments de
A qui ne sont pas dans B.

H & H: Research and Training 139 / 142

Set

TypeScript

Pour parcourir un Set

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

H & H: Research and Training 140 / 142

Set

TypeScript

Une deuxième solution consiste à utiliser forEach

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

/* affiche
peugeot
fiat
mercedes
citroen
renault
*/

H & H: Research and Training 141 / 142

Set

TypeScript

On peut aussi définir une méthode et l’appeler dans forEach

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

function afficher(elt){
[Link](elt)
}

H & H: Research and Training 142 / 142

Set

TypeScript

On peut aussi définir une méthode et l’appeler dans forEach

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

function afficher(elt){
[Link](elt)
}

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

[Link](afficher);

function afficher(elt){
[Link](elt)
}

H & H: Research and Training 142 / 142

Vous aimerez peut-être aussi

Cours Typecript
Pas encore d'évaluation
Cours Typecript
91 pages
Cours 2 - Introduction À TypeScript
Pas encore d'évaluation
Cours 2 - Introduction À TypeScript
38 pages
TypeScript pour Angular : Guide Complet
Pas encore d'évaluation
TypeScript pour Angular : Guide Complet
66 pages
Cours N°1.2 - Introduction À TypeScript
Pas encore d'évaluation
Cours N°1.2 - Introduction À TypeScript
38 pages
Cours TypeScript
100% (5)
Cours TypeScript
67 pages
TypeScript pour Angular Devs
Pas encore d'évaluation
TypeScript pour Angular Devs
55 pages
ES6 TypeScript 01 PDF
Pas encore d'évaluation
ES6 TypeScript 01 PDF
45 pages
Cours 2 - Introduction À TypeScript
Pas encore d'évaluation
Cours 2 - Introduction À TypeScript
31 pages
Formation Pratique sur Angular et TypeScript
Pas encore d'évaluation
Formation Pratique sur Angular et TypeScript
95 pages
Cours TypeScript
Pas encore d'évaluation
Cours TypeScript
103 pages
Slide Eric TYPESCRIPT
Pas encore d'évaluation
Slide Eric TYPESCRIPT
15 pages
Introduction à TypeScript
Pas encore d'évaluation
Introduction à TypeScript
111 pages
Syntaxe JavaScript : Notions Fondamentales
Pas encore d'évaluation
Syntaxe JavaScript : Notions Fondamentales
46 pages
Angular Part1 v2
Pas encore d'évaluation
Angular Part1 v2
54 pages
TTTT
Pas encore d'évaluation
TTTT
51 pages
Type Script
Pas encore d'évaluation
Type Script
3 pages
TypeScript Partie1
Pas encore d'évaluation
TypeScript Partie1
19 pages
Introduction à JavaScript et ReactJs
Pas encore d'évaluation
Introduction à JavaScript et ReactJs
39 pages
Enoncé Typescript
Pas encore d'évaluation
Enoncé Typescript
1 page
TS1 Introduction
Pas encore d'évaluation
TS1 Introduction
81 pages
Introduction à TypeScript et ses avantages
Pas encore d'évaluation
Introduction à TypeScript et ses avantages
20 pages
Différence entre guillemets en Java
Pas encore d'évaluation
Différence entre guillemets en Java
19 pages
Id 12571 PDF
Pas encore d'évaluation
Id 12571 PDF
123 pages
Guide TypeScript pour Débutants
Pas encore d'évaluation
Guide TypeScript pour Débutants
12 pages
Partie 2 - 1 Acquérir Les Fondamentaux de Javascript
Pas encore d'évaluation
Partie 2 - 1 Acquérir Les Fondamentaux de Javascript
28 pages
Variables Et Types de Données
Pas encore d'évaluation
Variables Et Types de Données
83 pages
Notes Angular
Pas encore d'évaluation
Notes Angular
15 pages
Cours N°1.1-Introduction
Pas encore d'évaluation
Cours N°1.1-Introduction
27 pages
Javascript
Pas encore d'évaluation
Javascript
44 pages
TP TypeScript
Pas encore d'évaluation
TP TypeScript
8 pages
Type Script
Pas encore d'évaluation
Type Script
41 pages
JavaScript Janvier 2022
Pas encore d'évaluation
JavaScript Janvier 2022
173 pages
TP TypeScript
Pas encore d'évaluation
TP TypeScript
2 pages
Introduction à JavaScript et HTML
Pas encore d'évaluation
Introduction à JavaScript et HTML
68 pages
JS - Partie2 - 1
Pas encore d'évaluation
JS - Partie2 - 1
13 pages
01 JS Introduction
Pas encore d'évaluation
01 JS Introduction
17 pages
Angular et ES6 : Guide Développeur
Pas encore d'évaluation
Angular et ES6 : Guide Développeur
25 pages
Les Variablesles Types Oprerateurs Et Structures de Controle
Pas encore d'évaluation
Les Variablesles Types Oprerateurs Et Structures de Controle
6 pages
Guide JavaScript : Syntaxe et Structures de Base
Pas encore d'évaluation
Guide JavaScript : Syntaxe et Structures de Base
10 pages
JavaScript - Part 1
Pas encore d'évaluation
JavaScript - Part 1
40 pages
Cours 1-Introduction
Pas encore d'évaluation
Cours 1-Introduction
27 pages
Chapitre 2
Pas encore d'évaluation
Chapitre 2
22 pages
Prosit 1
Pas encore d'évaluation
Prosit 1
2 pages
Apprenez TypeScript - Le Guide Ultime Du Débutant
Pas encore d'évaluation
Apprenez TypeScript - Le Guide Ultime Du Débutant
51 pages
TP1 JS
Pas encore d'évaluation
TP1 JS
1 page
Introduction à JavaScript
Pas encore d'évaluation
Introduction à JavaScript
40 pages
Chapitre 1 Javascript Pour NodeJS Papier
Pas encore d'évaluation
Chapitre 1 Javascript Pour NodeJS Papier
17 pages
05-Javascript Base
Pas encore d'évaluation
05-Javascript Base
55 pages
Angular
Pas encore d'évaluation
Angular
42 pages
Exercices TypeScript
Pas encore d'évaluation
Exercices TypeScript
3 pages
Angular2 Cours
Pas encore d'évaluation
Angular2 Cours
202 pages
Apprendre Jquery
100% (2)
Apprendre Jquery
93 pages
Cours Turcs
Pas encore d'évaluation
Cours Turcs
62 pages
CM1 ComplementsJS
Pas encore d'évaluation
CM1 ComplementsJS
52 pages
Installation de Typescript
Pas encore d'évaluation
Installation de Typescript
5 pages
Cours TypeScript
Pas encore d'évaluation
Cours TypeScript
188 pages
Fondamentaux de JavaScript en 143 pages
Pas encore d'évaluation
Fondamentaux de JavaScript en 143 pages
259 pages
Introduction au JavaScript : Concepts Clés
Pas encore d'évaluation
Introduction au JavaScript : Concepts Clés
40 pages
Java Script
Pas encore d'évaluation
Java Script
31 pages
101 Positions Sexuelles Pour Faire Son Cri - Madeleine Carter PDF
76% (221)
101 Positions Sexuelles Pour Faire Son Cri - Madeleine Carter PDF
194 pages
Pierre Jovanovic - Le Livre Des Secrets D Enoch
93% (14)
Pierre Jovanovic - Le Livre Des Secrets D Enoch
331 pages
Votre Mission Spirituelle Selon Votre Signe Astrologique - Nadeau Marie-Claude
100% (20)
Votre Mission Spirituelle Selon Votre Signe Astrologique - Nadeau Marie-Claude
120 pages
Guide du Voyage Astral et Rêves Lucides
91% (11)
Guide du Voyage Astral et Rêves Lucides
87 pages
Manuel de Prière
92% (125)
Manuel de Prière
54 pages
1928 Marcotoune Science Secrete Des Inities PDF
100% (10)
1928 Marcotoune Science Secrete Des Inities PDF
343 pages
Cles Hermetiques Kabbale PDF
100% (17)
Cles Hermetiques Kabbale PDF
38 pages
Guide de lIA Generative de Sousa Cardoso Cyril Parise Fanny Cyril de Sousa Cardoso Fanny Parise
92% (13)
Guide de lIA Generative de Sousa Cardoso Cyril Parise Fanny Cyril de Sousa Cardoso Fanny Parise
295 pages
Plus Malin Que Le Diable
95% (58)
Plus Malin Que Le Diable
32 pages
Le Livre Secret des Esséniens
100% (13)
Le Livre Secret des Esséniens
368 pages
6 Ème Et 7 Ème Livres de Moïse
100% (23)
6 Ème Et 7 Ème Livres de Moïse
119 pages
Techniques Interdites de Manipulation Mentale Robert Mercier Z Library
100% (13)
Techniques Interdites de Manipulation Mentale Robert Mercier Z Library
117 pages
Haziel - COMMENT COMMUNIQUER AVEC SON ANGE GARDIEN PDF
89% (19)
Haziel - COMMENT COMMUNIQUER AVEC SON ANGE GARDIEN PDF
170 pages
Connais Toi Toi Même Et Tu Connaîtrais L'univers Et Les Dieux
91% (23)
Connais Toi Toi Même Et Tu Connaîtrais L'univers Et Les Dieux
193 pages
2000RemedesNaturels Le Medecin Des Pauvres
86% (29)
2000RemedesNaturels Le Medecin Des Pauvres
324 pages
Apprendre Le ML en Une Semaine PDF
94% (17)
Apprendre Le ML en Une Semaine PDF
100 pages
Auto Defense Spirituelle
93% (15)
Auto Defense Spirituelle
61 pages
Le Grand Livre Des 12 Libérations Énergétiques
100% (32)
Le Grand Livre Des 12 Libérations Énergétiques
220 pages
T2 LE GRAND LIVRE DES RECETTES TRADITIONNELLES AFRICAINES 100p100 SANTÉ
94% (31)
T2 LE GRAND LIVRE DES RECETTES TRADITIONNELLES AFRICAINES 100p100 SANTÉ
130 pages
ChatGPT 51 Prompts Pour Tirer Le Meilleur
91% (11)
ChatGPT 51 Prompts Pour Tirer Le Meilleur
59 pages
La Kabbale Pratique - Robert Ambelain
89% (19)
La Kabbale Pratique - Robert Ambelain
303 pages
Power, Les 48 Lois Du Pouvoir (French Edition) - Robert Greene
95% (38)
Power, Les 48 Lois Du Pouvoir (French Edition) - Robert Greene
639 pages
Rituels de Psaumes Et Bougies
95% (20)
Rituels de Psaumes Et Bougies
307 pages
La Voie Du Mage - Bien Debuter - Arnaud Thuly
100% (11)
La Voie Du Mage - Bien Debuter - Arnaud Thuly
267 pages
Les 3000 Codes Secrets Des Psaumes
96% (230)
Les 3000 Codes Secrets Des Psaumes
53 pages
50 Exercices Pour Prendre La Parole en Public
91% (124)
50 Exercices Pour Prendre La Parole en Public
150 pages
Nettoyage Et Protection Énergétique Des Personnes Et Des Lieux Remèdes, Techniques Et Protocoles (French Edition) by Luc Bodin
100% (23)
Nettoyage Et Protection Énergétique Des Personnes Et Des Lieux Remèdes, Techniques Et Protocoles (French Edition) by Luc Bodin
189 pages
Cours Python Complet
90% (10)
Cours Python Complet
150 pages
Psychologie de L'argent
95% (37)
Psychologie de L'argent
209 pages
1940 Ambelain Geomancie Magique
88% (24)
1940 Ambelain Geomancie Magique
200 pages
Probability and Statistics L1 S1 University of Strasbourg S2
Pas encore d'évaluation
Probability and Statistics L1 S1 University of Strasbourg S2
56 pages
Valorisation des toitures en voile mince
Pas encore d'évaluation
Valorisation des toitures en voile mince
136 pages
Exerc 3
Pas encore d'évaluation
Exerc 3
1 page
Formation Trader Pro : Stratégies et QCM
Pas encore d'évaluation
Formation Trader Pro : Stratégies et QCM
18 pages
Jeu Trivial Pursuit Mathématiques
Pas encore d'évaluation
Jeu Trivial Pursuit Mathématiques
14 pages
Glossaire D Infographie Libre
Pas encore d'évaluation
Glossaire D Infographie Libre
85 pages
TD-cinetique Chimique 2024-lsll
Pas encore d'évaluation
TD-cinetique Chimique 2024-lsll
4 pages
La Regression
Pas encore d'évaluation
La Regression
3 pages
Connecteur Actif pour Valves Proportionnelles
Pas encore d'évaluation
Connecteur Actif pour Valves Proportionnelles
84 pages
Analyse des causes avec le diagramme Ishikawa
100% (3)
Analyse des causes avec le diagramme Ishikawa
1 page
Alcali Réactions
Pas encore d'évaluation
Alcali Réactions
36 pages
2 Exo08
Pas encore d'évaluation
2 Exo08
1 page
02 Calcul Vectoriel 2S LVND 2024 2025 Bousso
Pas encore d'évaluation
02 Calcul Vectoriel 2S LVND 2024 2025 Bousso
2 pages
Analyse Fonctionnelle Sur Les Ventilateurs
Pas encore d'évaluation
Analyse Fonctionnelle Sur Les Ventilateurs
8 pages
Redigez Des Documents de Qualite Avec Latex PDF
Pas encore d'évaluation
Redigez Des Documents de Qualite Avec Latex PDF
220 pages
Introduction au Traitement du Signal
Pas encore d'évaluation
Introduction au Traitement du Signal
17 pages
MPSI Probleme 29 Des Problèmes de Révision
Pas encore d'évaluation
MPSI Probleme 29 Des Problèmes de Révision
4 pages
Endomorphismes Symétriques
Pas encore d'évaluation
Endomorphismes Symétriques
4 pages
AVM17062
Pas encore d'évaluation
AVM17062
6 pages
TD3 Cor
Pas encore d'évaluation
TD3 Cor
10 pages
MATHS 6ème
Pas encore d'évaluation
MATHS 6ème
2 pages
Exercices de symétrie axiale 2AC
Pas encore d'évaluation
Exercices de symétrie axiale 2AC
1 page
Normal 2012-2013 PDF
Pas encore d'évaluation
Normal 2012-2013 PDF
8 pages
Systèmes Techniques : Monte-Charge, Barrière de Parking, Fer à Souder, et Rétroprojecteur
Pas encore d'évaluation
Systèmes Techniques : Monte-Charge, Barrière de Parking, Fer à Souder, et Rétroprojecteur
10 pages
Votre Ordinateur Hs25
Pas encore d'évaluation
Votre Ordinateur Hs25
69 pages
UKpl AU4 VMN 3 DBu H6 Z HU9
Pas encore d'évaluation
UKpl AU4 VMN 3 DBu H6 Z HU9
228 pages
Série de TD N°03
0% (1)
Série de TD N°03
2 pages
Chapitre 4 Transistor Bipolaire
Pas encore d'évaluation
Chapitre 4 Transistor Bipolaire
11 pages
Géosynthétique Alvéolaire AT30 pour Talus
Pas encore d'évaluation
Géosynthétique Alvéolaire AT30 pour Talus
1 page
Algo Tunisie
Pas encore d'évaluation
Algo Tunisie
5 pages