Notice - Aide technique

1. Avant-propos

Avant toute chose, il vous faut préparer un environnement sur votre machine vous permettant d’utiliser le logiciel Visual Studio Code et et le langage TypeScript. Pour cela, rendez vous sur la documentation suivante.

2. Utilisation d’un terminal sous Linux

Un terminal est un outil entièrement textuel pour interagir avec un système d’exploitation.

2.1. Ouverture d’un terminal

Pour ouvrir un terminal sous Linux dans les salles de TP, aller sur l’option de menu :

Applications Outils systèmes Terminal Mate

2.2. Commandes pour le terminal

Faites attention aux majuscules!

Afficher le chemin du dossier courant

pwd

Lister les elements du dossier courant

ls

Naviguer un dossier (marche avant)

cd leDossier

Naviguer un dossier (marche arrière)

cd ..

Compiler un fichier TypeScript (.ts)

tsc leFichier.ts

Executer un fichier JavaScript (.js)

node leFichier.js

3. Utilisation de Visual Studio Code pour TypeScript

Pour les TPs nous allons utiliser l’outil Visual Studio Code pour écrire, compiler et exécuter du code TypeScript.

3.1. Préparation d’un projet TypeScript avec un fichier `tsconfig.json`

Une fois Visual Studio Code ouvert :

Avant toute chose, il est nécessaire d’ouvrir un répertoire de travail avec Visual Studio Code, car sans cela, il ne sera pas capable de compiler et d’exécuter votre code. Faire File → Open Folder et choisissez un répertoire où se trouvera (ou bien où se trouve déjà) votre projet. C’est le répertoire dans lequel vous placerez vos fichiers TypeScript, et dans lequel Visual Studio Code produira les résultats de la compilation.
Ensuite, il est nécessaire de créer un fichier tsconfig.json dans le répertoire de travail, afin d’indiquer à Visual Studio Code que le répertoire contient des fichiers TypeScript qu’il faudra compiler et exécuter. tsconfig.json

3.2. Compilation

Pour compiler tous les fichiers TypeScript de votre répertoire de travail :

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.
Ensuite, deux possibilités :
- La commande tsc:build permet de (re)compiler une seule fois le projet tandis
- la commande tsc:watch (ou tsc:espion en français) active le système de compilation automatique à chaque sauvegarde d’un fichier. Une fois tsc:watch lancé, vous n’avez plus à le relancer jusqu’à la prochaine ouverture de Visual Studio Code.
Les informations de compilation s’affichent dans l’onglet TERMINAL situé en bas de l’écran, et les erreurs de compilation dans l’onglet PROBLEMS.
Vous pouvez remarquer que non seulement un fichier .js a été généré par le compilateur dans le répertoire, 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’avez pas à regarder le contenu de ces fichiers produits par le compilateur.

3.3. Exécution simple

Compilez votre projet (voir section précédente).
Ouvrez le fichier que vous souhaitez exécuter.
Allez dans Debug → 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 informations liées à l’exécution dans l’onglet DEBUG CONSOLE.

Si vous avez fait le mauvais choix lors de l’étape 3 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 :

Fermer VisualStudio Code,
Renommez votre répertoire de travail,
Ouvrez à nouveau VisualStudio Code dans le répertoire renommé.

manière d’annuler ce choix est de renommer le fichier que vous souhaitez exécuter. Vous pouvez bien sûr ensuite le renommer une seconde fois pour lui donner à nouveau son nom de départ.

Si c’est le mauvais fichier .ts 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. Vous pouvez supprimer ce comportement soit via un clic droit sur le fichier .vscode/launch.json de votre projet et en sélectionnant Delete Permanently, soit en configurant vos propres Launch configurations (voir section suivante).

3.4. Exécution avec une Launch Configuration (avancé)

Optionnellement, il est possible de configurer Visual Studio Code pour exécuter seulement certains fichiers à l’aide de Launch configurations. Ces configurations sont stockées dans le fichier .vscode/launch.json.

Pour créer une première Launch configuration:

Ouvrez le fichier .ts que vous souhaitez pouvoir exécuter.
Allez dans Debug → Add Configuration. Cela va créer le fichier .vscode/launch.json (s’il n’existe pas) et l’ouvrir dans un éditeur avec un contenu similaire à :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Lancer MonFichier.ts",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/MonFichier.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

Dans les grandes lignes, cela spécifie :
- D’utiliser l’outil node pour exécuter le programme.
- Que la Launch configuration s’intitule "Lancer MonFichier.ts".
- Que le fichier à exécuter est MonFichier.ts.

Ensuite, pour ajouter de nouvelles Launch configurations:

Ouvrez le fichier .vscode/launch.json.
Dupliquez la Launch configuration existante, et séparez vos Launch configurations à l’aide d’une virgule, et changez les attributs name et program pour pointer vers un autre fichier .ts, ce qui donne :

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Lancer MonFichier.ts",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/MonFichier.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Lancer UnAutreFichier.ts",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/UnAutreFichier.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

Puis, pour utiliser une Launch configuration:

Via la barre tout à gauche, allez dans la vue "Debug and Run" (CTRL+SHIFT+D).
En haut à gauche, via un menu déroulant, choisissez la Launch configuration à utiliser pour les prochaines exécutions :

Puis lancez l’exécution comme d’habitude (Debug → Start Without Debugging). Vous pouvez remarquer que désormais, peu importe quel fichier est ouvert, c’est toujours la Launch configuration qui est utilisée pour lancer l’exécution. C’est très pratique lorsqu’on travaille dans beaucoup de fichiers, et qu’on veut toujours exécuter le même !

Pour finir, on peut noter qu’il est tout de même possible de créer une Launch configuration qui exécute le fichier actuellement ouvert, en utilisant la notation $file ainsi :

{
    "type": "node",
    "request": "launch",
    "name": "Lancer le fichier courant",
    "skipFiles": [
        "<node_internals>/**"
    ],
    "program": "${file}",
    "outFiles": [
        "${workspaceFolder}/**/*.js"
    ]
}

On retrouve ainsi le comportement par défaut de VS Code.