TYPESCRIPT Angular
INTRODUCTION
TypeScript est un langage récent (février 2012),
Le but de TypeScript est de rendre plus facile et plus fiable l'écriture de code en
JavaScript pour des applications de grande ampleur.
Quelques ajouts de TypeScript par rapport à JavaScript :
le typage,
les classes,
la modularité
open-source
utilisé par Angular (Google)
INTRODUCTION
TypeScript : sur-couche de ES6 ajoutant:
Typage
meilleure gestion de module (à ne pas confondre avec les modules Angular)
TypeScript
ES6
JavaScript
(ES5)
COMMENT ÇA FONCTIONNE?
Le navigateur ne comprend pas le TypeScript
Il faut le transcompiler (ou transpiler) en JavaScript
transpiler
file.ts file.js
COMMENT ÇA FONCTIONNE?
transpiler exécuter
file.ts file.js résultat
tsc - - watch file.ts
DE QUOI ON A BESOIN ?
Node.js pour exécuter la commande node
aller sur https://nodejs.org/en/
TypeScript pour exécuter la commande tsc, il faut:
lancer la commande npm install -g typescript depuis la console
vérifier la version avec la commande tsc -v
TYPAGE: VARIABLES
Le principal apport du langage TypeScript, celui qui justifie le nom même du
langage, est la possibilité d'associer, facultativement, un type à une donnée.
var pi: number;
var message: string;
var flag: boolean;
var joker: any;
NB: La variable joker a pour type any, qui est le type par défaut
qu'attribue TypeScript à une variable globale s'il ne parvient pas à
déterminer son type lors de sa déclaration.
TYPAGE: FONCTIONS
Il est courant qu'une fonction renvoie un certain résultat. Le langage TypeScript
permet de préciser le type du résultat attendu lors de la déclaration de la fonction.
Par défaut et en l'absence d'instruction return, le type du résultat d'une fonction
est void, c'est-à-dire aucun résultat.
function somme(x: number, y: number): number {
return x + y;
}
var produit = (x: number, y: number) => {
return x * y;
}
console.log(somme("2", 6));//erreur
console.log(produit(2, 6));
TYPAGE: CLASSE
La notion de classe introduite dans TypeScript anticipe la prochaine évolution de
JavaScript (ECMAScript 6).
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
shout(): string {
return "...";
}
}
var animal = new Animal("chien");
TYPAGE: CLASSE - HÉRITAGE
De pair avec la notion de classe, TypeScript implémente la notion d'héritage simple
par l'utilisation du mot-clé extends.
class Lion extends Animal {
type: string;
constructor(name: string, type: string){
super(name);
this.type = type;
}
shout(): string {
return "Rooooaarrr!"
}
}
TYPAGE: INTERFACE
Une interface peut être vue tout d'abord comme une sorte de contrat minimum que
doit respecter une structure de données en termes d'attributs et de méthodes.
class Lion extends Animal implements I{
type: string;
constructor(name: string, type: string) {
super(name);
this.type = type;
interface I {
}
shout(): string;
shout(): string {
marcher():string;
return "Rooooaarrr!";
}
}
marcher(): string {
return "4 pattes";
}
}
FONCTION ANONYME
FLÉCHÉE
Un autre apport notable de TypeScript à JavaScript est sa nouvelle manière de définir
une fonction anonyme qui peut être dénommée ici notation « fléchée » (arrow
function) en raison de l'utilisation du symbole =>.
Appel classique Fonction fléchée
var msg = "Bonjour"; var msg = "Bonjour";
function alertMsg() { setInterval(()=>{
setInterval(signaler, 500); alert(msg);
} }, 5000);
function signaler() {
alert(msg);
}
alertMsg();
EXERCICE
Ecrire un code Typescript qui permet de clignoter une image dans un intervalle du
temps.
SOLUTION
document.addEventListener('DOMContentLoaded',()=>{
clignoter();
})
var clignoter=()=> {
let img = document.getElementById("im");
let hide = true;
setInterval(() => {
if (hide == true)
img.style.setProperty("display", "none");
else
img.style.setProperty("display", "block");
hide = !hide;
}, 500);
}
MODULARITÉ:
RÉFÉRENCEMENT DE FICHIERS
TypeScript introduit de nouvelles techniques de modularisation devenues nécessaires
par le typage statique et par l'héritage de classes. Parmi ces techniques de
modularisation, le référencement d'un fichier TypeScript externe est peut-être la plus
simple.
Elle consiste à inclure de façon statique en tout début de fichier, un autre fichier
source TypeScript contenant des déclarations nécessaires au compilateur afin qu'il en
déduise entre autres les types et les héritages.
/// <reference path="module.ts"/>
MODULARITÉ: RÉFÉRENCEMENT
DE FICHIERS
Script.ts module.ts
/// <reference path="module.ts"/> interface I {
class Lion extends Animal implements I {
type: string;
shout(): string;
constructor(name: string, type: string) marcher(): string;
{
super(name); }
this.type = type;
}
shout(): string {
return "Rooooaarrr!";
}
marcher(): string {
return "4 pattes";
}
AJOUT DE PACKAGES
On peut rajouter des packages via la commande npm
npm install jquery
On peut aussi rajouter les définitions TypeScript pour JQuery @types/jquery via la
commande
npm install @types/jquery --save-dev
Pour plus de modules: https://www.typescriptlang.org/dt/search
EXERCICE
Ecrire un script TypeScript permettant de synchroniser un input avec un paragraphe
en utilisant une requête Ajax et la bibliothèque JQuery.
CORRECTION
/// <reference path="./node_modules/@types/jquery/JQuery.d.ts" />
$(()=>{
$("input").on("keyup",()=>{
let val:any=$("input").val();
$.get("fic.php",{"text":val},(data)=>{
$('#par').text(data);
})
})
});
