TP - Compilation

1. Objectifs

L’objectif de ce premier TP est de maîtriser la compilation et l’exécution du code TypeScript. Nous apprendrons dans un premier temps à compiler notre premier code à la main, puis nous découvrirons les avantages et les fonctionnalités proposées par l’utilisation d’un environnement de développement automatisé.

2. Mise en place

L’ensemble des travaux pratiques seront réalisés sous Linux Ubuntu.

  1. Commencez par créer un dossier dans votre espace personnel

  2. Créez un fichier appelé exemple1.ts (attention à l’extension)

  3. Recopiez-y le code ci-dessous à l’aide d’un éditeur de texte

/**
* X12I030 - Introduction au developpement logiciel
* Premier exemple de TP
* Compilation a la main et decouverte de VisualStudio Code
* NomsDuGroupe - Date
**/

// Returns the nth Fibonacci number.
function fibonacci(n : number) {
      if (n <= 1) return n;

      let previous : number = 0;
      let next : number = 1;
      let sum : number;

    for(let i : number = 2 ; i <= n ; i++) {
            sum = previous;
            previous = next;
            next = sum + previous;
    }

    return next;
}

// Main program
let objective : number = 120;
console.log("Calculons le 120ieme nombre de fibonacci :");
console.log(fibonacci(objective));

3. Compilation et Exécution «à la main»

Contrairement au langage AlgoScript étudié lors du premier semestre, un programme écrit en langage TypeScript doit être compilé avant de pouvoir être exécuté. Nous utilisons l’outil TypeScript compiler (ou tsc) afin de compiler notre fichier exemple1.ts.

  1. Ouvrez un terminal et naviguez jusqu’au dossier du projet.

  2. Entrez la commande suivante : tsc exemple1.ts. En regardant à nouveau dans le dossier (ls) nos avons obtenu un nouveau fichier exemple1.js issu de la compilation. Le langage TypeScript est en réalité compilé en langage JavaScript. Nous pouvons maintenant exécuter ce programme à l’aide du moteur Node.js.

  3. Lancez le programme à l’aide de la commande suivante : node exemple1.js

  4. Vérifiez la bonne exécution du code (affichage et valeurs).

Le compilateur se charge entre autre de vérifier la syntaxe et le typage des algorithmes. Il retournera une erreur si l’on souhaite par exemple affecter la valeur 5 à une variable booléenne.

4. Découverte de VisualStudio

Nous utiliserons dans cette série de TPs l’Environnement de Développement Intégré (EDI ou IDE) nommé VisualStudio Code. Un IDE ajoute de nombreuses fonctionnalités pour faciliter le développement de logiciels, tels que la coloration syntaxique, le formatage du code, l’automatisation de la compilation et des tests, l’intégration du gestionnaire de version, le débogage, le suivi de bugs, etc.

4.1. Lancement de VisualStudio Code

  1. Trouvez et lancez le logiciel VisualStudio Code (VSCode)

  2. Ouvrez le menu File → Open Folder… et naviguez jusqu’au répertoire de votre projet.

  3. Téléchargez et copiez le fichier tsconfig.json vers votre répertoire de projet. Ce fichier indique à VSCode que nous travaillons sur un projet TypeScript et précise les différentes étapes et paramètres de compilation. En outre, il indique que l’on souhaite que tous les fichiers produits par le compilateur soient déposés dans un répertoire appelé build.

Nous obtenons une interface similaire à la figure ci dessous:

  • L’éditeur de code dans la partie centrale

  • Les informations relatives aux erreurs de syntaxes, compilation et exécution dans la section inférieure.

  • La barre latérale gauche inclue les différents modules de l’IDE :

    1. Navigateur de fichier

    2. Recherche (étendue)

    3. Gestionnaire de version (git)

    4. Débogueur

    5. Gestionnaire d’extensions

VSCode Organisation d’une fenêtre Visual Studio Code

4.2. Compilation et exécution automatique

Comme nous l’avons remarqué dans l’exercice précédent, de nombreuses étapes répétitives sont nécessaires pour compiler et exécuter notre programme dans un terminal. L’IDE nous permet d’automatiser ce processus et analyse les erreurs fournies par le compilateur pour les classer et placer dans notre éditeur.

  • Sélectionnez Terminal → Run Build Task… pour lister et utiliser les différentes commandes de compilation. Nous pourrons utiliser par la suite le raccourci CTRL+MAJ+B pour afficher cette liste. La commande tsc:build permet de (re)compiler une seule fois le projet tandis que la commande tsc:watch (ou tsc:espion en français) active le système de compilation automatique à chaque sauvegarde d’un fichier. Les informations de compilation s’affichent dans l’onglet TERMINAL situé en bas de l’écran.

  • Vous pouvez remarquer qu’un répertoire appelé build a été créé par le compilateur. Ce répertoire contient non seulement un fichier .js (identique à celui obtenu par la compilation manuelle précédemment), mais également un fichier .js.map. Ce dernier est utilisé par VSCode lorsque le débogueur est utilisé (voir section suivante). De manière générale, vous n’aurez par la suite pas besoin de regarder le contenu de ces fichiers produits par le compilateur.

  • Ouvrez votre fichier .ts, puis allez dans `Run → Start Without Debugging (CTRL+F5) pour lancer votre programme compilé. Parmi les choix qui s’affichent, choisissez Node.js. Vous voyez ensuite apparaître l’ensemble des information dans l’onglet DEBUG CONSOLE.

Si vous n’avez pas correctement sélectionné Node.js et que l’exécution produit un résultat étrange (par exemple un démarrage de Google Chrome ou d’une deuxième fenêtre de VisualStudio Code), la seule solution est de recréer entièrement votre session VisualStudio Code, de la manière suivante :

  1. Fermer VisualStudio Code,

  2. Renommez votre répertoire de travail,

  3. Ouvrez à nouveau VisualStudio Code dans le répertoire renommé.
Pensez bien à toujours compiler votre projet avant de l’exécuter, au risque de lancer une version antérieure.
Si vous avez plusieurs fichiers .ts et que c’est le mauvais fichier qui s’exécute lorsque vous faites Start Without Debugging, c’est sans doute parce que votre projet possède une Launch configuration qui restreint l’exécution à un fichier précis. Pour résoudre ce problème, faites un clic droit sur le fichier .vscode/launch.json de votre projet, et faites Delete Permanently.
Si aucun fichier .js n’est généré après compilation, mais qu’un fichier .js.map est présent, tentez de supprimer le fichier .js.map puis de relancer la compilation.

4.3. À l’assaut du débogueur

Dans un projet complexe, il est souvent difficile de suivre le déroulement d’un programme pour trouver la source d’un bogue. L’utilisation d’un débogueur permet entre-autres d’exécuter pas à pas un algorithme et surveiller en temps réel la valeur de toutes les variables.

  1. Commençons par placer un point d’arrêt dans notre programme. Cliquez à gauche du numéro de la ligne next = sum + previous; de votre code. Un point rouge apparaît, signalant que l’exécution du programme s’arrêtera en arrivant à cette ligne.

  2. Allez dans le module de débogage de VSCode (barre latérale gauche, icône d’insecte).

  3. Lancez votre programme en mode débogage via le menu Run → Start Debugging (F5). Votre programme se lance et s’arrête au point d’arrêt que nous avons placé (ligne surlignée en jaune). Nous pouvons observer la valeur de toutes les variables i next previous sum dans la première section de la barre de gauche (Variables).

Une barre d’outils est également apparue dans la partie supérieure de l’éditeur:

Debugger

Ces différents boutons permettent d’avancer de manière progressive dans le programme et ainsi suivre le cheminement du logiciel et l’état des variables.

  • Continue (F5) : continue l’exécution du programme jusqu’à sa fin (ou un nouveau point d’arrêt)

  • Step Over (F10) : passe à la ligne (instruction) suivante

  • Step Into (F11) : passe à l’instruction suivante ou rentre à l’intérieur de la fonction surlignée.

  • Step Out (Maj+F11) : sort de la fonction courante et s’arrête à l’instruction supérieure suivante.

Avancez pas à pas l’exécution du programme et observez l’évolution des variables. Vérifiez ainsi le bon déroulement de l’algorithme.

il est également possible d’ajouter une condition à un point d’arrêt et créer des ``espions'', permettant de surveiller la valeur d’une expression plus complexe. N’hésitez pas à vous documenter sur ce formidable outil !

5. Premier développement : Année bissextile

  1. Implémentez dans un nouveau fichier la fonction étudiée en TD retournant true si une année passée en paramètre est bissextile et false sinon.

  2. Créez un simple programme utilisant cette fonction et vérifiez le bon fonctionnement de votre algorithme

  3. Utilisez le débogueur pour observer l’évolution des variables et le chemin emprunté par votre algorithme en fonction des cas.

6. Conclusion

Nous avons maintenant un outil complet de développement, auquel nous ajouterons de nombreuses fonctionnalités dans les TPs suivants (gestion de version, mise en forme, tests automatisés).