Partie1 TypeScript

Pr. Habib Ayad
Enseignant chercheur à l’université Hassan II de Casablanca
Laboratoire d’informatique de Mohammedia
Faculté des Sciences et Techniques Mohammedia
Développement des applications
web-mobile
Pr. Habib Ayad 1

Plateforme Langage
Apple avec iOS,
Google avec Android,
Microsoft avec Windows.
Objective-C et Swift ;
Java;
C# et le XAML.
Pour développer une application mobile pour les trois plateformes, il fallait la développer trois
fois en trois langages!
Pr. Habib Ayad 2

 Développer une application mobile multiplateformes avec les
bases de code en HTML, CSS et JS est devenu possible grâce au
Framework Cordova ou Capacitor qui permettent de déployer une
application Ionic en application mobile native.
 Ionic est construit sur Angular.
 Angular utilise le TypeScript
Pr. Habib Ayad 3

 Htlm
 Css & Bootstrap
 Bases de programmation (js, java, C)
Pr. Habib Ayad 4

Développement mobile
Développement des applications web-mobile
SPA
Maitrise d’un langage utilisé par plusieurs
Framework (Angular, React, Vue.js,…)
Pr. Habib Ayad 5

 TypeScript
 Angular
 Ionic
Pr. Habib Ayad 6

 Introduction
 Environnement de développement
◦ NODE.JS
◦ NPM
◦ TYPESCRIPT
 Eléments de langages
 POO (Classes, Interfaces, Objets)
 Fonctions & Fonctions fléchées
Pr. Habib Ayad 7

 TypeScript est un langage transcompilé en JavaScript. C.à.d. après
écrire un code en TypeScript un compilateur va convertir le code en
JavaScript ainsi tous les navigateurs peuvent comprendre et
interpréter ce code.
 TypeScript rend JavaScript plus proche d'un langage orienté objet
fortement typé (Java, C#,…).
Pr. Habib Ayad 8

 TypeScript est un sur-ensemble typé de JavaScript développé par
Microsoft , càd que tout le code JavaScript est un code TypeScript
valide.
 TypeScript peut introduire de nouvelles fonctionnalités de langage
tout en conservant la compatibilité avec les moteurs JavaScript
existants. ES3, ES5 et ES6
Pr. Habib Ayad 9

 ES = ECMAScript
 Ecma International
◦ European Computer Manufacturers Association 1960
◦ European association for standardizing information and communication
systems 1994
 Ecma est une organisation de standardisation active dans le
domaine de l'informatique.
Pr. Habib Ayad 10

 Angular
 Vue.js
 React
 …
Pr. Habib Ayad 11

 La 1er version en 2014
 Actuellement on est sur la version 4.x (2020)
Pr. Habib Ayad 12

 Pour pouvoir développer en TypeScript, installer les outils suivants:
 NODE.JS
 NPM
 TYPESCRIPT
Pr. Habib Ayad 13

 NodeJS est une plateforme construite sur le moteur JavaScript V8
de Chrome qui permet de développer des applications en utilisant
du JavaScript.
 https://nodejs.org/en/download/
Pr. Habib Ayad 14

 Après avoir installé nodejs s’assurer de la version de nodejs et
npm(nodejs package manager):
Pr. Habib Ayad 15

npm install -g typescript
Pr. Habib Ayad 16

 Constantes & variables
◦ const g = 9.8;
//on peut pas changer la valeur d’une constante par la suite
◦ let str1 = "Casablanca";
Pr. Habib Ayad 17

 Type number
◦ let prix:number;
◦ let prix = 99.5; //Déclaration implicite
Pr. Habib Ayad 18

 Type string
◦ let nom:string;
◦ let nom = "Ali"; //Déclaration implicite
Pr. Habib Ayad 19

 Type boolean
◦ let ok:boolean;
◦ let ok = true; //Déclaration implicite
Pr. Habib Ayad 20

 Type any
◦ let x:any; ou let x;
◦ x = 5;
◦ x = "Casa";
◦ x = true;
 Union
◦ let v: number|string;
◦ v = 5;
◦ v = "5m/s";
Pr. Habib Ayad 21

 Type Array
◦ let maListe : Array<Type>;
◦ let maListe : number[];
 Exemples
◦ let list: Array<number> = [1, 2, 3];
◦ let list: number[] = [1, 2, 3];
◦ let langages: Array<string> = ['Python','Java','C++'];
◦ let langages: string[] = ['Python','Java','C++'];
 Indices
◦ L’indice d’un tableau commence par zéro:
◦ langages[0] vaut 'Python'
Pr. Habib Ayad 22

 Type Array
 let a =[];
 let a: any[]
 let tab = [10,-8,'Ali', true];
 let tab: (string|number|boolean)[] = [10,-8,'Ali', true];
Pr. Habib Ayad 23

 Type Array
◦ push : ajout d’un élément à la fin
tab = [10,-8,'Ali', true];
tab.push(2020);
◦ pop : retrait du dernier élément
◦ splice : splice(indiceDebue, nbSuppr, elements à insérés)
◦ list = [10,20,50,10,30];
◦ list.splice(2,1,90,80,100);
◦ [10,20,90,80,100,10,30]
Pr. Habib Ayad 24

• > : supérieur
• >= : supérieur ou égale
• < : inférieure
• <= :inférieure ou égale
• & : ET (bitwise)
• | : OU (bitwise)
• && : ET
• || : OU
• = : Affectation
• == : égalité
• != : inégalité
• === : égalité dite stricte (de
valeur et de type)
• !== : inégalité dite stricte
• Opérateur ternaire :
• condition?valeurSiVrai:valeurSiFaux
• sign = x>=0?1:-1;
Pr. Habib Ayad 25

 IF
if(condition){
//instructions si condition est vrai
}else{
//instructions si condition est fausse
}
Pr. Habib Ayad 26

 while
while(condition){
//instructions
}
 do
do{
//instructions
} while(condition)
Pr. Habib Ayad 27

 Switch
switch(expression){
case val1: Instructions;
break;
case val2: Instructions;
break;
…
default: Instructions;
break;
}
Pr. Habib Ayad 28

 for
for (init; Condition; incrimentation) {
//Conditions
}
 Exemple
for (let i = 0; i < 3; i++) {
console.log ("Itération N°." + i);
}
Pr. Habib Ayad 29

 for in
Pour accéder aux indice d’un tableau
let tab2 = [10, 20, 'ali', false];
for(let ind in tab2){
console.log(ind);
} //0,1,2,3
 for of
 Pour accéder aux valeurs d’un tableau
for(let val of tab2){
console.log(val);
}// 10, 20, 'ali', false
Pr. Habib Ayad 30

 T = [-2,8,7,1,0,-8,3,-5]
 Programme qui permet de calculer la somme des valeurs
positives du tableau
Pr. Habib Ayad 31

 Fonctions sans arguments et sans return
function bjr(){
console.log("Bonjour tout le monde");
}
//============================
function bjr2(nom:string){
console.log("Bonjour ",nom);
}
Pr. Habib Ayad 32

 Fonctions sans arguments et avec return
function time():string{
let dt = new Date();
return dt.toLocaleString();
}
Pr. Habib Ayad 33

 Fonctions avec arguments et avec return
function som(x: number, y: number):number{
return x + y;
}
Pr. Habib Ayad 34

 Fonctions fléchées (Lambda)
(param1, param2, ..., paramN) => expression
 let hello = ()=>console.log('hi every one');
 let poly = (x:number)=>x**2 -5;
Pr. Habib Ayad 35

 Fonctions fléchées
let densite = (m:number,v:number)=>{
let d : number|string;
if(v != 0 ){
d= m/v;
}else{
d = "Veuillez donner un volume diff de 0!";
}
return d;
}
console.log(densite(10,5));
console.log(densite(10,0));
Pr. Habib Ayad 36

 Fonctions fléchées
Remarque:
Si une fonction fléchée ne comporte s’une seule instruction alors les
accolades et le return ne sont pas nécessaire
Pr. Habib Ayad 37

 forEach
 Applique une fonction sur chaque élément du tableau
let T = [-4,6,0,7,10];
T.forEach((val,ind)=>console.log(ind,val));
Pr. Habib Ayad 38

 map
 Prend une fonction en paramètre. Applique la fonction sur
chaque élément et ajoute le résultat dans le tableau renvoyé en
résultat.
let T = [-4,6,0,7,10];
let T2 = T.map(x=>x**2);
console.log(T2);
Pr. Habib Ayad 39

 filter
 Prend une fonction renvoyant un booléen en paramètre. Renvoi le
tableau contenant les éléments pour lesquels la fonction à
répondue vrai.
let T = [-4,6,0,7,10];
let T3 = T.filter(x=>x>0);
console.log(T3);
// T3=[6,7,10];
Pr. Habib Ayad 40

 reduce
 Réduit un tableau à une seule valeur en appliquant une fonction.
let T4 = [1,2,3,4];
let p = T4.reduce((acc,val)=>acc + val**2);
console.log(p); //30
let p2 = T4.reduce((acc,val)=>acc*val);
console.log(p2);//24
Pr. Habib Ayad 41

 Syntaxe
Une interface spécifie une liste de champs et de fonctions pouvant être
attendus sur toute classe implémentant l'interface.
Les interfaces permettent de spécifier la forme d'un objet.
Pr. Habib Ayad 42

 Syntaxe
interface nom_interface {
Attributs;
Fonctions;
}
Pr. Habib Ayad 43

 Exemple
interface Istudent{
id:number;
nom:string;
filier:string;
parcours?:string
}
◦ ?//Champs optionnel
let std1:Istudent = {
id:1,
nom:"Ali",
filier:"MIA",
parcours:"IA"
}
let std2:Istudent = {
id:2,
nom:"Fatima",
filier:"GI",
}
Pr. Habib Ayad 44

 Exemple
interface Istudent{
id:number;
nom:string;
filier:string;
parcours?:string
}
let etudiants:Array<Istudent>=[];
etudiants[0]={id:50,
nom:"Samir",
filier:"GE"};
etudiants.push(std1);
etudiants.push(std2);
Pr. Habib Ayad 45

 Exemple
interface Istudent{
id:number;
nom:string;
filier:string;
parcours?:string
}
Exercice d’application:
Donner un tableau des étudiants
qui suivent un parcours
let etd_parc = etudiants.
filter(e=>e.parcours!=undefined);
console.log(etd_parc)
Pr. Habib Ayad 46

 Interface
interface IPoint {
nomPoint:string;
x:number;
y:number;
distOrig():number;
}
Classe
class Point implements IPoint{
nomPoint:string;
x:number;
y:number;
constructor(px:number,py:number,np:string){
this.x = px;
this.y = py;
this.nomPoint = np;
}
public distOrig = ()=>Math.sqrt(this.x**2 +
this.y**2);
}
Pr. Habib Ayad 47

Exercice d’application:
Ecrire une fonction (fléchée qui retourne la distance de
Manhattan entre deux points:
Pr. Habib Ayad 48

 Export et import permet de réutiliser des variables, interfaces,
classes,… entre les différents fichiers typescript d’un projet.
 Export
export déclaration
Exemple
export let prix:number = 300.85;
Pr. Habib Ayad 49

 Export et import permet de réutiliser des variables, interfaces,
classes,… entre les différents fichiers typescript d’un projet.
 Import
import {noms d’export} from 'chemin'
Exemple
import {prix} from './f1'
Pr. Habib Ayad 50

 Fichier IPoint.ts
export interface IPoint {
nomPoint:string;
x:number;
y:number;
distOrig():number;
angleX():number;
}
Pr. Habib Ayad 51

 Fichier Point.ts
export class Point implements IPoint{
nomPoint:string;
x:number;
y:number;
constructor(px:number,py:number,np:string){
this.x = px;
this.y = py;
this.nomPoint = np;
}
public distOrig = ()=>Math.sqrt(this.x**2 + this.y**2);
public angleX = ()=> Math.atan(this.y/this.x)*(180/Math.PI); //ang en deg
}
Pr. Habib Ayad 52

 Fichier main.ts
import {Point} from './Point';
let A = new Point(-5,3,"pointA");
console.log(A.distOrig());
let manhattan = (p1:Point,p2:Point) => Math.abs(p1.x - p2.x) + Math.abs(p1.y -p2.y);
let B = new Point(0,8,"pointB");
console.log('distance entre '+A.nomPoint+' et '+B.nomPoint+' est '+ manhattan(A,B));
let angB = B.angleX();
console.log('angle = ', angB, 'deg');
La transpilation du fichier main.ts induit la transpilation de tous les fichiers importés
Pr. Habib Ayad 53

Partie1 TypeScript

Contenu connexe

Tendances (20)

Similaire à Partie1 TypeScript (20)

Dernier (7)

Partie1 TypeScript