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 [Link], on exécute les commandes suivantes :
tsc [Link]
node [Link]
Exemple N°1 : script permettant d’afficher un tableau
var list: number[] = [1, 2, 3];
[Link](list);
// affiche [ 1, 2, 3 ]var list: number[] = [1, 2, 3];
Exemple N°2
//Exemple avec any
var x: any;
x = "bonjour";
x = 5;
[Link](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);
[Link](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);
[Link](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];
[Link](elt => [Link](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 = [Link](x => x * 2);
[Link](tab1);
// expected output: Array [2, 8, 18, 32]
Exemple N°7 : Les objets avec typescript
Créer un fichier [Link]
export class Personne {
num: number;
nom: string;
prenom: string;
}
Créer le fichier [Link] permettant d’instancier une personne et de l’afficher
import { Personne } from './personne';
let personne: Personne;
2
personne = new Personne();
[Link] = 1;
[Link] = "wick";
[Link] = "john";
[Link](personne)
// affiche Personne { num: 1, nom: ’wick’, prenom: ’john’ }
Exemple N°8 : Les objets avec typescript
Créer le Fichier [Link]
export class Personne {
ssn: string;
firstName: string;
lastName: string;
constructor(ssn: string, firstName: string, lastName: string) {
[Link] = ssn;
[Link] = firstName;
[Link] = lastName;
}
getFullName(): string {
return `${[Link]} ${[Link]}`;
} }
Créer le fichier permettant de faire appel au fichier [Link] 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');
[Link]([Link]());
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=[];
[Link](x=>[Link]===type?[Link](x):"");
return tab1;
}
Appel à la méthode getByType avec la valeur du type : user
//[Link](getByType("user"));
let tab1=getByType("user");
[Link](x=>[Link](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
[Link]((x)=>{
if([Link]==='user')[Link](x);
}
);
let nbu=0,nba=0;
[Link]((x)=>{
([Link]==='user')? nbu++:nba++;
}
);
[Link]("le nombre de user est ", nbu);
4
[Link]("le nombre de admin est",nba);
[Link](x=>{
[Link](y=>{
y==='Lyon'?[Link]([Link]):[Link]("non lyon")
})
});
