Comprendre TypeScript - Exercice 1

Pré-requis technique NodeJS 18+

• Commençons par installer TypeScript :

npm install -g typescript

• Créez un dossier typescript dans lequel nous allons travailler.

• Initialisez votre projet à l’aide de la commande :

tsc --init

ou pour les PC de l'IUT: npx tsc --init

Cela devrait créer un fichier tsconfig.json destiné au compilateur TypeScript.

• Commentez la ligne avec l'option verbatimModuleSyntax

• Créez ensuite un fichier nommé voiture.ts dans ce dossier. Dans celui-ci écrivez votre première classe : on veut représenter l’objet "voiture" de notre application. On veut donc une classe Voiture avec un champ couleur qui sera privé, et initialisé directement dans le constructeur.

Essayez de compiler votre projet régulièrement, grâce à la commande :

tsc
Vous pouvez aussi laisser le compilateur en tâche de fond, avec :
tsc --watch

• Ajoutez une méthode nommée toString() qui renvoie Voiture + la couleur de la voiture, par exemple "Voiture bleue" ou "Voiture verte". N’oubliez pas que vous pouvez utiliser les "template strings" !

• Créez ensuite un fichier nommé course.ts. Ce fichier contiendra la classe Course qui représente une course de notre application. Cette classe a plusieurs champs :

  • un nom name

  • un tableau de voitures tabVoitures (initialisé avec un tableau vide)

N’oubliez pas d’importer la classe Voiture, et d’assigner un type à vos propriétés !

Le constructeur permettra de recevoir le nom de la course. Créez également une méthode permettant d’ajouter une voiture à la course : ajouteVoiture(voiture: Voiture). Cette méthode ajoutera la voiture reçue en paramètre au tableau de voitures. Ajoutez une méthode toString() qui renvoie le nom de la course suivi de toutes les voitures. Vous pouvez appeler la méthode toString() de chacune des voitures en itérant sur le tableau de voitures, grâce par exemple à l’opérateur map : this.voitures.map(voiture => voiture.toString()).

• Créez un dernier fichier, nommé app.ts. Dans ce fichier, créez deux voitures grâce à leur constructeur (‘verte’ et ‘rouge’), puis une course (‘Lyon’), et ajoutez les voitures à la course. Enfin affichez le résultat de la méthode toString de la course grâce à un console.log().

Il ne reste plus qu’à exécuter notre programme. Une fois compilé, nous avons des fichiers .js qui sont apparus. On peut donc lancer notre programme avec NodeJS :

node app.js

Vous devriez voir apparaître "Lyon Voiture verte, Voiture rouge"