Le langage TypeScript
Syntaxe
* Code toujours placé dans un fichier ".ts"
* Syntaxe similaire à Java
* Instructions terminées par ";"
* Commentaires
* "//" pour une seule ligne
* "/*...*/" pour plusieurs lignes
* Opérateurs et structures de contrôle identiques
* Sensible à la casse
* Possibilité de définir des variables faiblement typées
* Le type peut changer en cours d'exécution
* Pas de type prédéfini à la déclaration
* Conseil: définir des variables fortement typées
* Le type ne peut pas changer en cours d'exécution
* Type déterminé à la déclaration
Variables (1/2)
* Déclaration d'une variable toujours explicite ==> let
* let nom_variable = valeur;
* Portée de la variable limitée au bloc d'instructions
* Bloc d'instructions = zone entre "{" et "}"
* En dehors de tout bloc ==> variable globale
* Dans le bloc d'une fonction ==> variable locale
* Conseil: toujours préciser le type à la déclaration
* let nom_variable : type = valeur;
* Ensuite, le type de la variable ne peut plus changer
* Intérêt: contrôle tout au long du code, ce qui empêche certaines erreurs
Variables (2/2)
* Exemple de manipulation de variables
let a : number = 7;
let b : number = 3;
function doubler(n : number) {
let a : number = 2 * n;
return a;
}
console.log("Double de " + b
+ " = " + doubler(b));
console.log("Valeur de a = " + a);
* Résultat de l'exemple
Double de 3 = 6
Valeur de a = 7
* Modification de la fonction
function doubler(n : number) {
a = 2 * n;
return a;
}
* Résultat avec la modification
Double de 3 = 6
Valeur de a = 6
Types de données
* Quelques types possibles
* Booléen: boolean
* let x : boolean = true;
* Nombre: number
* let x : number = 27.13; (flottant)
* let x : number = 27; (entier)
* Chaîne de caractères: string
* let x : string = "Nawouak";
* Sprite (balise HTML animée): Sprite
* let x : Sprite = new Sprite(balise);
* Fixer le type d'une variable à sa déclaration
let x : number = 5;
...
x = "cinq"; ==> erreur !
Opérateurs
* Opérateurs classiques
* Arithmétique: +, -, *, /, %
* Incrémentation / décrémentation: --, ++
* Affectation: =, +=, -=, *=, /=, %=
* Logique: && (et), || (ou), ! (non)
* Comparaison: ==, <, >, <=, >=, !=
* Chaînes de caractères
* Délimiteurs: ' ou "
* Opérateur de concaténation: +
* Permet de fusionner deux chaînes
* let nom : string = "Nawouak";
chaine = "Bonjour " + nom;
* chaine = "Bonjour ";
chaine += nom;
* chaine = "Bonjour Nawouak"
Chaînes de caractères
* Comment mettre un délimiteur dans une chaîne ?
* "comment mettre "un" entre guillemets ?"
* Plusieurs possibilités
* Alternance des délimiteurs "'" et """
* 'Voila comment mettre "un" entre guillemets ?'
* Rendre les délimiteurs inopérants avec "\"
* "Voila comment mettre \"un\" entre guillemets ?"
Structures de contrôle (1/3)
* Bloc d'instructions délimité par "{" et "}"
* Facultatif si une seule ligne
* if (x == 1) y = 2; ? if (x == 1) { y = 2; }
* Structures conditionnelles
* if (test1) action1
else if (test2) action2
else action3
* switch (variable)
case valeur1: action1
case valeur2: action2
default: action3
* Structures de boucle
* while (test) action
* do action while (test)
* for (départ; test; suivant) action
Structures de contrôle (2/3)
* Exemple
* Un pingouin dans un document HTML, on choisit sa prochaine action
* Code TypeScript
function action(pingouin : Pingouin) {
let choix : number = Math.floor(Math.random()*4);
if (choix == 0) { pingouin.manger(); }
else if (choix == 1) { pingouin.dormir(); }
else if (choix == 2) {
let direction : number = Math.floor(Math.random()*2);
if (direction == 0) { pingouin.reculer(); }
else { pingouin.avancer(); }
}
else { pingouin.danser(); }
}
Structures de contrôle (3/3)
* Exemple: création de 10 pingouins dans l'élément HTML "scene"
* Boucle "for"
let p : Array<Pingouin> = new Array<Pingouin>();
for (let i : number = 0; i < 10; i++)
{ p[i] = new Pingouin(); scene.ajouter(p[i]); }
* Boucle "while"
let p : Array<Pingouin> = new Array<Pingouin>();
let i : number = 0;
while (i < 10)
{ p[i] = new Pingouin(); scene.ajouter(p[i]); i++; }
Tableaux simples (1/2)
* Type d'un tableau = Array<X>
* Où "X" est le type des éléments stockés
* Déclaration d'un tableau
* let tab : Array<string> = new Array<string>();
* "new" est indispensable pour créer un tableau
* Sinon la variable n'est pas un tableau et vaut "null"
* Accès à un élément: opérateur "[]"
* Numérotation des éléments à partir de 0
* tab[i] = élément du tableau "tab" à l'indice "i"
* Remplissage élément par élément
* tab[0] = "lundi"; ...; tab[6] = "dimanche";
Tableaux simples (2/2)
* Remplissage à la déclaration
* let tab : Array<string> = new Array<string>("lundi",
...,
"dimanche");
* Connaître le nombre d'éléments
* let n : number = tab.length;
* Parcours d'un tableau
console.log("Il y a " + tab.length + " jours:");
for (let i : number = 0; i < tab.length; i++)
{ console.log("jour no " + (i+1) + ": " + tab[i]); }
Tableaux associatifs
* Eléments du tableau indexés par des chaînes
* Association d'une clé (chaîne) à un élément
* Tableau simple: association entier-élément
* Remplissage élément par élément
tab["lundi"] = "Monday";
tab["mardi"] = "Tuesday";
...
tab["dimanche"] = "Sunday";
* Parcours des éléments
for (let i in tab)
{ console.log(i + " = " + tab[i]); }
Fonctions (1/3)
* Permettent de factoriser / réutiliser du code
* Portions de code associées à un nom
* Reçoivent des arguments en entrée
* Retournent une valeur en sortie
* function nom(arguments) : type_retour {
action;
return resultat;
}
* Pas de retour: type_retour = void
* Exemple
function produit(a : number, b : number) : number {
let p : number = a * b;
return p;
}
Fonctions (2/3)
* Déclaration
function produit(a : number,
b : number)
: number {
let c : number = a * b;
return c;
}
* Appel
let w : number = produit(u,v);
* Argument = copie
* Modification "a" ==> aucune modification "u"
* Retour = copie
Fonctions (3/3)
* Déclaration
function bouger(p : Pingouin) {
let x : number = Math.random()*100;
let y : number = Math.random()*100;
p.deplacer(x,y);
}
* Appel
bouger(a);
* Argument "objet" = référence
* Modification "p" ==> modification "a"