TypeScript

M. BEN JAMAA SOUFIENE

Email : gcr.soufiene@gmail.com

1
 Plan de la formation
 Introduction
 Installation et configuration
 Variable et les constante
 Les Fonctions
 Module
 POO

2
Introduction

3
Architecture Web

Frontend Backend
Client HTTP Serveur Web
Requête HTTP
SGBD
JEE
HTML
PHP
CSS Réponse HTTP SQL/NO SQL
Dot Net
JavaScript
Node JS

• Un client web (Browser) communique avec le serveur web (Apache) en utilisant le protocole HTTP
• Une application web se compose de deux parties:
• La partie Frontend : S’occupe de la présentation des IHM côté Client :
• Langages utilisés : HTML, CSS, Java Script
• La partie Backend : S’occupe des traitements effectués côté serveur :
• Technologies utilisées : PHP, JEE, .Net, Node JS
• La communication entre la partie Frontend et la partie Backend se fait en utilisant le protocole HTTP
4
Frameworks JavaScript

Frontend Backend

Client HTTP Serveur Web

Requête HTTP
NodeJS SGBD

React PHP
Express
Node JS
Réponse HTTP SQL/NO SQL
Angular Next
Vue Meteor

• Framework Frontend • Framework Backend

• ReactJS (2013), • ExpressJS (2010),
• AngularJS (2009), • NextJS (2018),
• VueJS (2014), • MeteorJS (2012),
• EmberJS (2011), • …
• PolymerJS (2015)
• …
5
Frameworks javaScript

JavaScript Developer Survey - Edition 2019 (https://2019.stateofjs.com/front-end-frameworks/)

6
Frameworks javaScript

Angular React Vue js

Type Framework Librairie Framework
Auteur google Facebook -

Année 1ère version

Octobre 2010 Mai 2013 Fevrier 2014

Langage TypeScript JavaScript (JSX) JavaScript

Créer Créer des Transformer un
généralement une composants site web existant
Besoin
nouvelle individuels en une application
application
Data binding Bi-directionnel Uni-directionnel Bi-directionnel

7
DOM : Document Object Model

• Le DOM est une interface de programmation qui permet à des scripts d'examiner et de modifier le contenu
du navigateur web.
• Un document XML ou HTML peut être vu sous la forme d'un arbre.
• Chaque nœud de l’arbre est considéré comme un objet.

• Les principaux types de nœuds sont:

• Document : la racine
• Element : les balises standards
• Text : le texte
• Comment : les commentaires
• Attr : les attributs des balises
• Processing instructions : les
balises spécifiques comme par
exemple <?php...?>
8
DOM : Document Object Model

• Le DOM HTML est une norme standard qui définit :

• Les éléments HTML comme des objets
• Les propriétés de tous les éléments (les valeurs qu’on peut définir)
• Les méthodes pour accéder aux éléments
• Les événements qu’on peut effectuer sur les éléments,
• Le DOM offre des fonctions appropriées afin de trouver les éléments :

9
ECMAScript

• Ensemble de normes sur les langages de programmation de type script (JavaScript, ActionScript...)
standardisée par Ecma International (European Computer Manufacturers Association) depuis 1994.
• Quelques versions:
 ECMAScript version 5 (ES5) ou ES 2009
 ECMAScript version 6 (ES6) ou ES 2015 (compatible avec les navigateurs modernes)

10
TypeScripte

• Langage de programmation procédural et orienté objet TypeScript

• Supportant le typage statique, dynamique et générique
ES6
• Open-source
• Permet d’écrire facilement des applications JavaScript.
JavaScript
• Créé par Anders Hejlsberg (inventeur de C#) de ES5
MicroSoft
• Utilisé par Angular (Google)
• TypeScript est une sur-couche de ES6 ajoutant:
 typage
 meilleure gestion de module (à ne pas confondre
avec les modules Angular)
Transpiler
• Le navigateur ne comprend pas le TypeScript. Il faut file.ts file.js
donc le transcompiler (ou transpiler) en JavaScript
11
Comment va t-on procéder dans ce cours?

Transpiler Exécuter
file.ts file.js résultat

tsc file.ts node file.js

• De quoi on a besoin?
 Node.js pour exécuter la commande node
 TypeScript pour exécuter la commande tsc
 Visual Studio Code comme IDE pour TypeScript (et éventuellement Angular)

12
Installation et configuration

13
Installation de NodeJS

• Après installation de NodeJS, vous disposez de :

 L’outil Node qui permet d’exécuter une application NodeJS

 L’outil npm(Node Package Manager) qui est un gestionnaire

de paquets officiels de NodeJS.

• Nous utiliserons cet outil npm pour :

 Initialiser le projet

 Installer les dépendances

 Lancer des scripts

 Etc.. • Pour initialiser un projet NodeJS, On utilise la

commande : >npm init
• Un Projet NodeJS possède un fichier package.json pour :
 Les infos sur le projet

 Déclarer les dépendances du projet

 Déclarer les scripts

 Etc.
14
Initialisation d’un projet NodeJS

• >npm init -y

package.json

15
Initialisation de TypeScripte

• Pour travailler les application NodeJS en Typescript, il faudrait installer les dépendances suivantes:
 typescript: Langage Type Script
 @types/node: Fichier de définition typescript pour nodejs
 nodemon: Un utilitaire qui surveillera toute modification du code source et redémarrera
automatiquement votre serveur.
 concurrently: un outil pour exécuter plusieurs commandes simultanément

 npm install –-save -dev typescript nodemon @types/node concurrently

 vérifier la version avec la commande npx tsc -v

16
Variable et constante

17
Déclaration des variables

• Quels types pour les variables en TypeScript? • Déclarer une variable

• number pour les nombres (entiers, réels, binaires, var nomVariable: typeVariable;
décimaux, hexadécimaux...) • Exemple
• string pour les chaines de caractère var x: number;
• boolean pour les booléens • Initialiser une variable
• array pour les tableaux non-statiques (taille variable) x = 2;
• tuple pour les tableaux statiques (taille et type fixes) • Déclarer et initialiser une variable
• object pour les objets var x: number = 2;
• any pour les variables pouvant changer de type dans • Pour les chaınes de caractères:
le programme var str1: string = "wick";
var str2: string = ‘john’;
• enum pour les énumérations (tableau de constantes)
var str3: string = ‘Bonjour ${ str2 } ${ str1 }’;
• Les types undefined et null du JavaScript sont aussi console.log(str3); // affiche Bonjour john wick

disponibles.
18
Déclaration des variables

• Une première déclaration pour les tableaux • Pour déclarer un objet

var list: number[] = [1, 2, 3]; var obj: {

console.log(list); // affiche [ 1, 2, 3 ] nom: string;
numero: number;
• Une deuxième déclaration };

var list: Array<number> = new Array(1, 2, 3); • On peut initialiser les attributs de cet objet
console.log(list); // affiche [ 1, 2, 3 ] obj = {
nom: ‘wick’,
• Ou encore plus simple numero: 100
};
var list: Array<number> = [1, 2, 3]; console.log(obj);
console.log(list); // affiche [ 1, 2, 3 ] // affiche { nom: ’wick’, numero: 100 }

• Utiliser les méthodes from et keys pour générer • On peut modifier les valeurs d’un objet ainsi
un intervalle de valeurs entières consécutives obj.nom =‘Jhon’;
obj[’numero’] = 200;
var list: number[] = Array.from(Array(3).keys())
console.log(obj);
console.log(list); // affiche [ 0, 1, 2 ]
// affiche { nom: ’jhon’, numero: 200 }
19
Déclaration des variables

• Pour déclarer une énumération • Pour déclarer une variable de type any
enum mois { var x: any;
JANVIER, FEVRIER, MARS, AVRIL, x = "bonjour";
MAI, JUIN, JUILLET, AOUT, x = 5;
SEPTEMBRE, OCTOBRE, console.log(x); // affiche 5;
NOVEMBRE, DECEMBRE
};
console.log(mois.AVRIL); // affiche 3 • Union de type (plusieurs types)
var y: number | boolean | string;
y = 2;
• Pour modifier l’indice du premier élément y = "bonjour";
y = false;
enum mois {
JANVIER = 1, FEVRIER, MARS,
AVRIL, MAI=10, JUIN, JUILLET, • Le mot-clé let permet de donner une visibilité
AOUT, SEPTEMBRE, OCTOBRE,
locale à une variable déclarée dans un bloc.
NOVEMBRE, DECEMBRE
}; if (5 > 2) {
console.log(mois.AVRIL); // affiche 4 let x = 1;
console.log(mois.JUIN); // affiche 11 }
console.log(x); // affiche ReferenceError: x is not defined
20
Déclaration des variables

• Nous pouvons également forcer le type et utiliser • Le mot-clé type permet de définir un alias de
une conversion explicite (cast): type:
let str: any = "bonjour"; type maStructure = [number, string, string];
let longueur: number = (<string>str).length; let first: maStructure = [100, "wick", ’john’ ];
console.log(longueur); // affiche 7 console.log(first); // affiche [ 100, ’wick’, ’john’ ]
• Ou
let str: any = "bonjour"; • L’opérateur ?? permet d’éviter d’affecter la valeur
let longueur: number = (str as string).length;
console.log(longueur); // affiche 7 null ou undefined à une variable

• Pour convertir une chaine de caractère en nombre var obj = {nom: null, prenom: ’john’};
let nom: string = obj.nom ?? ’doe’;
let x : string = "2";
let y: string = "3.5"; console.log(nom); // affiche doe
let a: number = Number(x);
let b: number = Number(y);
console.log(a); // affiche 2
console.log(b); // affiche 3.5

21
Déclaration des constantes

• Les constantes se déclare avec le mot-clé const et permet à une variable de ne pas changer de valeur

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

• Avec TypeScript 3.4, on peut aussi définir une constante ainsi

let X = <const>"bonjour";
console.log(X); // affiche bonjour
console.log(typeof X); // affiche string
let y: string = "bonjour";
console.log(X == y); //affiche true

22
Les fonctions

23
Les Fonctions

• Déclarer une fonction • Une fonction qui n’atteint jamais sa fin a le type
function nomFonction([les parametres]){ never
les instructions de la fonction
} function boucleInfinie(): never {
while (true){
• Exemple
}
function somme(a: number, b: number): number { }
return a + b;
} • Il est possible d’attribuer une valeur par défaut

• Appeler une fonction aux paramètres d’une fonction

let resultat: number = somme (1, 3); function division(x: number, y: number = 1) :
console.log(resultat); // affiche 4 number
{
• Une fonction qui ne retourne rien a le type void return x / y;
}
function direBonjour(): void { console.log(division(10)); // affiche 10
console.log("bonjour"); console.log(division(10, 2)); // affiche 5
}
24
Les Fonctions

• Il est possible de rendre certains paramètres d’une • Il est possible de déclarer une fonction en utilisant
fonction optionnels les expressions fléchées (arrow function)
function division(x: number, y?: number): number { let nomFonction = ([lesparamètres]): typeValeurRetour=> {
if(y) les instructions de la fonction
return x / y; }
return x;
} let somme = (a: number, b: number): number => { return
console.log(division(10)); // affiche 10 a + b;
console.log(division(10, 2)); // affiche 5 }
• Il est possible de définir une fonction prenant un • Ou en plus simple
nombre indéfini de paramètres let somme = (a: number, b: number): number => a + b;
function somme(x: number, ...tab: number[]): • Appeler une fonction fléchées
number {
for (let elt of tab) let resultat: number = somme (1, 3);
x += elt;
return x; • Cas d’une fonction fléchée à un seul paramètre
}
console.log(somme(10)); // affiche 10 let carre = (a: number): number => a * a;
console.log(somme(10, 5)); // affiche 15 console.log(carre(2)); // affiche 4
console.log(somme(10, 1, 6)); // affiche 17
25
Les Fonctions

• Sans typage, la fonction peut être écrite ainsi • Sans les fonctions fléchées
let carre = a => a * a; let obj = {
console.log(carre(2)); // affiche 4 nom: ’wick’,
afficherNom: function() {
console.log(this.nom)
• Déclaration d’une fonction fléchée sans paramètre }
}
let sayHello = (): void => console.log(’Hello’);
obj.afficherNom(); // affiche wick
sayHello(); // affiche Hello
• Avec les fonctions fléchées
• Il est déconseillé d’utiliser les fonctions fléchées let obj = {
dans un objet nom: ’wick’,
afficherNom: () => {
• Le mot-clé this est inutilisable dans les fonctions console.log(this.nom)
}
fléchées }
obj.afficherNom(); // affiche undefined

26
Les Fonctions

• Utiliser forEach pour afficher le contenu d’un • La fonction afficher peut accepter deux paramètres:
tableau le premier est la valeur de l’itération courante et le
var tab = [2, 3, 5]; deuxième est son indice dans le tableau
tab.forEach(elt => console.log(elt)); // affiche 2 3 5
tab.forEach(afficher); /* affiche
02
• Dans forEach, on peut aussi appeler une fonction function afficher(value, key) { 13
console.log(key, value); 25
afficher } */
tab.forEach(elt => afficher(elt));
function afficher(value) {
• La fonction afficher peut accepter un troisième
console.log(value); paramètre qui correspond au tableau
} // affiche 2 3 5
• On peut simplifier l’écriture précédente en utilisant tab.forEach(afficher); /* affiche
les callback 0 2 [ 2, 3, 5 ]
function afficher(value, key, t) { 1 3 [ 2, 3, 5 ]
tab.forEach(afficher); console.log(key, value, t); 2 5 [ 2, 3, 5 ]
function afficher(value) { } */
console.log(value);
}// affiche 2 3 5

27
Les Fonctions

• On peut utiliser map pour effecteur un traitement • Si on a plusieurs instructions, on doit ajouter les
sur chaque élément du tableau puis forEach pour accolades
afficher le nouveau tableau var tab = [2, 3, 5];
var somme = tab.map(elt => elt + 3)
tab.map(elt => elt + 3)
.filter(elt => elt > 5)
.forEach(elt => console.log(elt));
.reduce((sum, elt) => {
// affiche 5 6 8
return sum + elt;
• On peut aussi utiliser filter pour filtrer des éléments }
);
tab.map(elt => elt + 3) console.log(somme); // affiche 14
.filter(elt => elt > 5)
.forEach(elt => console.log(elt)); // affiche 6 8 Remarques
//Attention, selon l’ordre d’appel de ces méthodes, le
//résultat peut changer. • Le premier paramètre de reduce correspond au

• La fonction reduce permet de réduire les éléments résultat de l’itération précédente

d’un tableau en une seule valeur • Le deuxième correspond à l’élément du tableau

var tab = [2, 3, 5]; de l’itération courante
var somme = tab.map(elt => elt + 3)
.filter(elt => elt > 5)
• Le premier paramètre est initialisé par la valeur
.reduce((sum, elt) => sum + elt); du premier élément du tableau 28
console.log(somme); // affiche 14
Spread operator

• L’opérateur … de décomposition (spread operator)

permet de décomposer les éléments d'une valeur
itérable (un tableau, un string et même un objet)
function somme(a?: number, b?: number, c?: number):
number {
return a + b + c;
}
console.log(somme (1, 3, 5)); // affiche 9
let t: Array<number> = [1, 3, 5];
console.log(somme(...t)); // affiche 9
• On peut utiliser la décomposition pour faire le
clonage
let obj = { nom: ’wick’, prenom: ’john’};
let obj2 = {num:5, ...obj };
obj2.nom = ’abruzzi’;
console.log(obj2);
// affiche { num:5, nom: ’abruzzi’, prenom: ’john’ }

29
Module

30
import / export

• Introduit dans ES6

• Avec TypeScript, on peut utiliser des éléments définis dans un autre fichier : une variable, une
fonction, une classe, une interface...
• Pour importer un élément, il faut l’exporter dans le fichier source
• Étant donné le fichier fonctions.ts dont le contenu est

function somme(a: number = 0, b: number = 0) {

return a + b;
}
function produit(a: number = 1, b: number = 1) {
return a * b;
}

31
import / export

• Pour exporter les deux fonctions somme et produit • Pour importer et utiliser une fonction
de fonction.ts import { somme } from ’./fonctions’;
console.log(somme(2, 5)); // affiche 7
export function somme(a: number = 0, b: number = 0) {
return a + b;
} • On peut aussi utiliser des alias
export function produit(a: number = 0, b: number = 1) {
return a * b; import { somme as s } from ’./fonctions’;
} console.log(s(2, 5)); // affiche 7

• Ou aussi • Pour importer plusieurs éléments

function somme(a:number = 0, b:number = 0) { import { somme, produit } from ’./fonctions’;
return a + b; console.log(somme(2, 5)); // affiche 7
} console.log(produit(2, 5)); // affiche 10
function produit(a: number = 0, b: number = 1) {
return a * b; • Pour importer tous éléments
}
export { somme, produit }; import * as f from ’./fonctions’;
console.log(f.somme(2, 5)); // affiche 7
console.log(f.produit(2, 5)); // affiche 10

32
import / export

• On peut aussi utiliser le export default (un seul par • Attention, ici on a importé somme avec deux alias
fichier) différents
export default function somme(a: number = 0, b: number import s from ’./fonctions’;
= 0) { import produit from ’./fonctions’;
return a + b; console.log(s(2, 5));
} // affiche 7
export function produit(a: number = 0, b: number = 1) { console.log(produit(2, 5));
return a * b; // affiche 7
}

• Pour importer, pas besoin de {} pour les éléments

exporter par défaut

import somme from ’./fonctions’;

import { produit } from ’./fonctions’;
console.log(somme(2, 5)); // affiche 7
console.log(produit(2, 5)); // affiche 10

33