TypeScript

© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
TypeScript
Veille technologique : 2018Préparer et élaborer par : Mahmoud Nbet

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
introduction
• Le « TypeScript » est un langage de
programmation open-source développé par
Microsoft.
• Le langage se présente comme un pré
processeur du JavaScript

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
FonctionnalitésetAvantages
• Typage statique/ Interface
• Améliorer le système de
classe
• Namespace
• Modules
• Décorateurs
• Code mieux structuré et
mieux sécurisé

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Siteoficiel
https://www.typescriptlang.org

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
ChoixduAngular
• Le Framework le plus populaire Angular est
écrit en « TypeScript ».
Bien que vous puissiez également
utiliser JavaScript avec Angular, la
plupart des tutoriels que vous
trouverez pour le Framework
sont écrits en TypeScript .

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Installation
• Si vous voulez utiliser « TypeScript » pour vos projets,
vous pouvez l’installer via NPM.
npm i -g typescript

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Compilation
tsc index.ts
• Cette installation vous donnera accès à la commande
« tsc » qui vous permettra de compiler votre code en
JavaScript (ES3, ES5 ou ES2015).
• La commande ci-dessus vous donnera un fichier
nommé index.js
tsc index.ts main.ts
tsc * .ts [--watch] [--target 'es5']

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
tsconfig.json
{
"compilerOptions":{
"target": "es5",
"pretty": true,
"outDir": "./build"
},
"files": [
"demo.ts"
],
"excluse": ["node_modules"]
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Typagestatique
• C’est la fonctionnalité de « TypeScript » qui
vous permet de déclarer les types de
variables.
• Le compilateur s'assure que les variables ont
les bons types de valeurs.
Vous pouvez déclarer un type en
ajoutant un deux-points et le nom
du type
let num: number = 123
let str: string = ‘abc’
let is: boolean = true
let x: any = ‘x’ let varName: type = value

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Typagestatique:LesTableaux
• Avec TypeScript, vous pouvez créer des
tableaux en utilisant des parenthèses en tant
que tels:
var array: string [] = ['chien', 'chat'];
var first: string = tableau [0];
var array: Array<string> = ['chien', 'chat'];

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
LesInterfaces
• une interface vous permet de vérifier les
combinaisons de variables pour s'assurer
qu'elles vont ensemble.
Les interfaces ne sont pas
traduites en JavaScript. leur
seul but est d'aider les
développeurs
interface Food {
nom: string;
calories: number;
category?: number;
}
Les attributs optionnels sont préfixés par un « ? »

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Aveclesfonctions
• Avec « TypeScript » Vous pouvez demander à
une fonction d'attendre ou retourner un
« type » qui correspond à vos besoins, pour
vous assurer que les bonnes propriétés seront
toujours disponibles.
fonction speak (food: Food): void {
console.log (food.name + "contient" + food.calories + "calories");
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Aveclesfonctions«2»
• Il est possible d’initialiser les paramètres, ou
d’ajouter des paramètres optionnels.
Mais non les deux à la fois
fonction myFunction (
food: Food,
show:boolean = false,
otherParam?: Type
): Food {
...
return food;
}
let myFunction = (
food: Food,
show:boolean = false,
otherParam?: Type
): Food => {
...
return food;
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesclasses
• Les classes de « TypeScript » fonctionnent
essentiellement de la même manière que les
classes d'autres langages orientés objet.
Depuis que la mise à jour
d'ECMAScript 2015 a été
publiée, les classes sont
maintenant natives de
JavaScript, mais les règles
pour les classes sont un
peu plus strictes en
TypeScript.
class Menu {
private title: string ;
private items: Array<string> ;
private pages: number ;
constructor(){}
public getItmes(): Array<string> {
return this.itmes;
}
}

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesclasses
class Menu {
// public; private; proteted
private _title: string ;
private items: Array<string> ;
private pages: number ;
constructor(){}
get title():string {
return this._title || ‘plz add a title’;
}
set title(t: string):void {
this._title = t;
}
}
let m = new Menu();
m.title = ‘Menu title’;

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Générique
• Les génériques sont des modèles réutilisables
qui permettent à des fonctions uniques
d'accepter des arguments de types différents.
function genericFunc<T>(argument: T): T[] {
var arrayOfT: T[] = [];
arrayOfT.push(argument);
return arrayOfT;
}
var arrayFromString = genericFunc<string>("beep");
Le "T" suivant le nom de la fonction indique un
générique. Lorsque la fonction est appelée, toutes les
instances de "T" seront remplacées par les types fournis:

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
LesNamespaces
• Les « namespaces » vous permettent
d'organiser les variables dans un groupe
donné afin d'éviter les problèmes
d'écrasement des variables.
namespace myNS {
export let var1 = 3
let var2 = 4
export class Demo { }
}
myNS.var1 // 3
myNS.var2 // Erreur, cela n'existe pas en dehors du module
let d = new myNS.Demo() // Objet de type myNS.Demo

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesmodules
• Les modules se présentent comme des
namespaces que l'on va pouvoir isoler dans un
fichier séparé. Le principe est relativement
similaire.
// demo.ts
export let var1 = 3
let var2 = 4
export class Demo { }
// index.ts
import { var1, Demo } from './demo'
var1 // 3

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Fichiersdedéclarationdestypestiers
• Lorsque vous devez utiliser une bibliothèque
destinée à l'origine au JavaScript courant, vous
devez appliquer un fichier de déclaration pour
le rendre compatible avec TypeScript. Les
fichiers de déclaration, qui ont l'extension
.d.ts, contiennent des informations sur les
bibliothèques et leurs API.
Vous pouvez utiliser « Typings » , un module Node.js
pratique pour gérer vos définitions TypeScript.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesdécorateurs(decorators)
Un décorateur est une fonction qui modifie une
classe JavaScript pour y ajouter des
métadonnées
@component({
selector: '.toto'
})
class Toto {
options;
constructor (options){
this.options = options;
}
}
function component(options){
return function (target) {
console.log(options, target);
}
}

TypeScript

Recommandé

Recommandé

Contenu connexe

Similaire à TypeScript

Similaire à TypeScript (20)

TypeScript

Notes de l'éditeur