#1 Syntaxe TypeScript

Répertoire TP

• Créer un répertoire /typescript dans votre espace esnext (fork à créer).

/typescript

Compilateur TypeScript

• Installer le compilateur TypeScript.

npm install -g typescript

• Vérifier l'installation de TypeScript

tsc -v
Version 2.3.2

Fichier de configuration tsconfig.json

• Exécuter la commande suivante pour générer le fichier de configuration tsconfig.json depuis le répertoire typescript.

tsc --init

• Un fichier tsconfig.json est créé.

• Modifier le paramètre outDir comme suit :

"outDir": "./js"

Les fichiers javascript seront générés dans le répertoire js.

Exemple Meteo

• Créer un fichier meteo.ts.

/typescript
    meteo.ts

• Se positionnez dans le répertoire typescript et lancer le compilateur TypeScript en mode watch.

tsc --watch

Un fichier js/meteo.js est généré. Visualiser le.

/typescript
    /js
        meteo.js
    meteo.ts

• Compléter le fichier meteo.ts comme suit :

console.log("Meteo App")

• Visualiser le fichier js/meteo.js.

• Exécuter le code généré :

node js/meteo.js

Dans la suite de l'exercice, nous compléterons le fichier meteo.ts.

• Créer une classe Meteo.

class Meteo {

}

Visualiser le résultat js/meteo.js.

"use strict";
console.log("Meteo App");
var Meteo = (function () {
    function Meteo() {
    }
    return Meteo;
}());

Reconnaissez-vous le Module Pattern ?

• Ajouter un champ ville de type string :

class Meteo {

    ville:string

}

Visualiser le résultat js/meteo.js.

Il n'y aucun changement.

Sauriez-vous expliquer pourquoi ?

• Supprimer le champ ville. Ajouter le constructeur suivant :

class Meteo {

    constructor(private _ville:string, private _temperature:number){
    }

}

• Créer un objet Meteo

// ...

let nantesCeMatin = new Meteo()

Vous devriez avoir l'erreur de compilation suivante :

meteo.ts(8,21): error TS2554: Expected 2 arguments, but got 0.

Savez-vous pourquoi ?

Visualiser le fichier js/meteo.js :

"use strict";
console.log("Meteo App");
var Meteo = (function () {
    function Meteo(_ville, _temperature) {
        this._ville = _ville;
        this._temperature = _temperature;
    }
    return Meteo;
}());
var nantesCeMatin = new Meteo();

Malgré l'erreur de compilation, le fichier généré contient la mise à jour. Ceci illustre le caractère permissif du compilateur TypeScript.

• Corriger l'erreur de compilation :

let nantesCeMatin = new Meteo('Nantes', 12);

• Ajouter la méthode toString et afficher son résultat dans le console.

class Meteo {
    constructor(private _ville:string, private _temperature:number){
    }

    // A AJOUTER
    toString():string {
        return  `${this._ville} - ${this._temperature}°C`
    }
}
let nantesCeMatin = new Meteo('Nantes', 12);

// A AJOUTER
console.log(nantesCeMatin.toString())

• Visualiser le fichier généré

"use strict";
console.log("Meteo App");
var Meteo = (function () {
    function Meteo(_ville, _temperature) {
        this._ville = _ville;
        this._temperature = _temperature;
    }
    Meteo.prototype.toString = function () {
        return this._ville + " - " + this._temperature + "\u00B0C";
    };
    return Meteo;
}());
var nantesCeMatin = new Meteo('Nantes', 12);
console.log(nantesCeMatin.toString());

• Exécuter le code généré :

node js/meteo.js

Exemple Voyage

• Créer un fichier voyage.ts.

/typescript
    meteo.ts
    voyage.ts

• Créer une classe Sejour avec les propriétés privées suivantes : nom (string) prix (number)

• Ajouter des getters permettant d'accéder aux propriétés privées.

• Créer une classe SejourService qui possède une propriété privée de type Sejour[];

• Dans le constructeur de la classe SejourService, initialiser la propriété Sejour[] avec plusieurs objets de type Sejour.

• Dans la classe SejourService, ajouter une méthode de recherche de séjour par nom :

  • le service prend en paramètre un nom de type string
  • le service a un type retour Sejour.

• Créer une instance de la classe SejourService, invoquer la méthode de recherche créée et afficher le résultat dans la console.