TypeScript Partie1
TypeScript Partie1
TypeScript Partie1
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
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.
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.
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.
On peut aussi rajouter les définitions TypeScript pour JQuery @types/jquery via la
commande
npm install @types/jquery --save-dev
$(()=>{
$("input").on("keyup",()=>{
let val:any=$("input").val();
$.get("fic.php",{"text":val},(data)=>{
$('#par').text(data);
})
})
});