TP1 TYPESCRIPT (Angular)

Installer visual studio code

Installation de typescript
npm install -g typescript

Cette installation vous donnera accès à la commande tsc qui vous permettra de transpiler
votre code en JavaScript (ES3, ES5 ou ES2015).
En cas d’erreur d’exécution de script (interdiction) on devrais exécuter la commande suivante sous
powershelle en mode Administrateur

set-executionpolicy unrestricted

pour executer un script TypeScript intitule ex1.ts, on exécute les commandes suivantes :

tsc ex1.ts

node ex1.js

Exemple N°1 : script permettant d’afficher un tableau

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

console.log(list);
// affiche [ 1, 2, 3 ]var list: number[] = [1, 2, 3];

Exemple N°2
//Exemple avec any
var x: any;
x = "bonjour";
x = 5;
console.log(x);
// affiche 5;

Exemple N°3: fonctions avec typescript

function somme(a: number, b: number): number {
return a + b;
}
//Appeler une fonction
let resultat: number = somme (1, 3);
console.log(resultat);
// affiche 4

1
Exemple N°4: fonctions fléchés avec typescript

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

//Appeler une fonction
let resultat: number = somme (5, 3);
console.log(resultat);
// affiche 8

Ou en plus simple

let somme = (a: number, b: number): number => a + b;

Exemple N°5 : Afficher le contenu d’un tableau

Utiliser forEach pour afficher le contenu d’un tableau

var tab = [2, 3, 5];

tab.forEach(elt => console.log(elt));
// affiche 2 3 5

Exemple N°6 : Afficher le contenu d’un tableau

Utiliser map pour parcourir un tableau

const tab = [1, 4, 9, 16];

// pass a function to map

const tab1 = tab.map(x => x * 2);

console.log(tab1);
// expected output: Array [2, 8, 18, 32]

Exemple N°7 : Les objets avec typescript

Créer un fichier personne.ts

export class Personne {

num: number;
nom: string;
prenom: string;
}

Créer le fichier ex1.ts permettant d’instancier une personne et de l’afficher

import { Personne } from './personne';

let personne: Personne;

2
personne = new Personne();
personne.num = 1;
personne.nom = "wick";
personne.prenom = "john";
console.log(personne)
// affiche Personne { num: 1, nom: ’wick’, prenom: ’john’ }

Exemple N°8 : Les objets avec typescript

Créer le Fichier Personne.ts

export class Personne {
ssn: string;
firstName: string;
lastName: string;

constructor(ssn: string, firstName: string, lastName: string) {

this.ssn = ssn;
this.firstName = firstName;
this.lastName = lastName;
}

getFullName(): string {
return `${this.firstName} ${this.lastName}`;
} }

Créer le fichier permettant de faire appel au fichier Personne.ts et de

l’afficher en utilisant la méthode d’affichage crée précédemment
import { Personne } from './Personne';
let p1 = new Personne('171280926', 'John', 'Doe');
console.log(p1.getFullName());

Exemple N°9: Les objets avec typescript

Soit le tableaux de personne comme suit :

const personnes = [
{ type : 'user' , nom : ' Max Mustermann ' , age : 25 , villes : [ ' Marse
ille ' , ' Lyon ' , ' Paris '] } ,
{ type : 'admin' , nom : ' John Wick ' , age : 45 , villes : [ ' Paris ']
} ,
{ type : 'user' , nom : ' Kate Muller ' , age : 23 , villes : [ ' Nantes '
, ' Lyon ' , ' Lille ' , ' Nice '] } ,
{ type : 'admin' , nom : ' Bruce Willis ' , age : 64 , villes : [ ' Paris
' , ' Nantes '] } ,

3
 { type : 'user' , nom : ' Jack Wilson ' , age : 35 , villes : [ ' Marseill
e ' , ' Lyon ' , ' Montpellier '] } ,
{ type : 'admin' , nom : ' Carol Smith ' , age : 23 , villes : [ ' Marseil
le ' , ' Nice ' , ' Montpellier '] }
];

Créer la méthode getByType permettant d’afficher les personnes de type donné

let getByType=(type: string): Array<Object>=>{
let tab1=[];
personnes.forEach(x=>x.type===type?tab1.push(x):"");
return tab1;

}
Appel à la méthode getByType avec la valeur du type : user
//console.log(getByType("user"));
let tab1=getByType("user");
tab1.forEach(x=>console.log(x));

Exemple N°10: Les objets avec typescript

const personnes = [
{ type : 'user' , nom : ' Max Mustermann ' , age : 25 , villes : [ ' Marse
ille ' , ' Lyon ' , ' Paris '] } ,
{ type : 'admin' , nom : ' John Wick ' , age : 45 , villes : [ ' Paris ']
} ,
{ type : 'user' , nom : ' Kate Muller ' , age : 23 , villes : [ ' Nantes '
, ' Lyon ' , ' Lille ' , ' Nice '] } ,
{ type : 'admin' , nom : ' Bruce Willis ' , age : 64 , villes : [ ' Paris
' , ' Nantes '] } ,
{ type : 'user' , nom : ' Jack Wilson ' , age : 35 , villes : [ ' Marseill
e ' , ' Lyon ' , ' Montpellier '] } ,
{ type : 'admin' , nom : ' Carol Smith ' , age : 23 , villes : [ ' Marseil
le ' , ' Nice ' , ' Montpellier '] }
];

Créer le script permettant d’afficher le nombre d’utilisateur et

d’administrateur
personnes.forEach((x)=>{
if(x.type==='user')console.log(x);
}
);

let nbu=0,nba=0;
personnes.forEach((x)=>{
(x.type==='user')? nbu++:nba++;
}
);
console.log("le nombre de user est ", nbu);

4
console.log("le nombre de admin est",nba);

personnes.forEach(x=>{
x.villes.forEach(y=>{
y==='Lyon'?console.log(x.nom):console.log("non lyon")
})
});