Partie 1 : Programmation web-mobile Cours TypeScript

1. 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

2. 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

3.  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

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

5. 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

6.  TypeScript
 Angular
 Ionic
Pr. Habib Ayad 6

7.  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

8.  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

9.  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

10.  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

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

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

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

14.  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

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

16. npm install -g typescript
Pr. Habib Ayad 16

17.  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

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

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

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

21.  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

22.  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

23.  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

24.  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

25. • > : 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

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

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

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

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

30.  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

31.  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

32.  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

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

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

35.  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

36.  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

37.  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

38.  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

39.  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

40.  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

41.  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

42.  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

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

44.  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

45.  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

46.  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

47.  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

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

49.  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

50.  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

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

52.  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

53.  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