Comment déboguer TypeScript avec VS Code

Même si vous ne développez qu'une petite application ou si vous avez peu d'expérience avec TypeScript, le débogage avec VS Code sera inévitable. Sans parler des projets plus importants. Dans cet article, je vais vous montrer comment configurer votre environnement de développement avec VS Code pour déboguer votre code.

Créer un nouveau projet

Au début, nous créons un petit projet TypeScript. Assurez-vous que VS Code et Node.js sont préinstallés sur votre ordinateur. Vous pouvez également ignorer les étapes suivantes et simplement cloner ce référentiel Github.

Créer des fichiers source

Créez un nouveau dossier de projet appelé «vscode-typescript-debugging». Après cela, créez un dossier “src” et ajoutez un fichier “app.ts” avec le contenu suivant:

Ajoutez un autre fichier appelé “hello.ts” dans le dossier “src”:

C’est tout le code! Cela suffit pour ce tutoriel. Nous ne faisons pas les choses plus compliquées que nécessaire.

Compilateur TypeScript

Après cela, nous devrions compiler le code TypeScript en JavaScript simple. Créez un fichier «tsconfig.json» dans le dossier du projet et ajoutez le contenu suivant:

Ce sont des options très basiques pour le compilateur TypeScript. Si vous avez besoin de plus d'informations sur les options du compilateur, jetez un coup d'œil au manuel officiel. Il est important de définir la propriété sourceMap sur true. Les fichiers de carte source sont nécessaires pour mapper le code TypeScript au code JavaScript ultérieurement dans le débogueur.

Remarque: Si vous avez installé TypeScript globalement avec la commande npm i -g typescript, vous pouvez appeler le compilateur de votre terminal en tapant simplement tsc. Il compile le code TypeScript en fonction des options de «tsconfig.json» et génère les fichiers JS compilés dans le dossier «out».

Scripts NPM

Nous avons également besoin du fichier bien connu «package.json». Exécutez simplement les commandes suivantes dans votre terminal pour le créer et pour ajouter les dépendances requises:

  • npm init --oui
  • npm install typescript --save-dev

Ensuite, nous ajoutons les scripts requis au fichier «package.json», qui ressemble finalement à ceci:

Brève explication des scripts:
start - lance l'application compilée avec noeud
prestart - est appelé automatiquement avant le script de démarrage
build - exécute le compilateur TypeScript

Lancer l'application

Ouvrez votre terminal et lancez la commande suivante:

npm start

Finalement, vous devriez voir «Hello world!» Dans votre terminal et les fichiers JavaScript compilés dans le dossier «out». Bien! Mais qu'en est-il du débogage? Un pas après l'autre!

Débogage

Créez un dossier «.vscode» dans le répertoire du projet et ajoutez un fichier appelé «launch.json» avec les configurations suivantes:

Brève explication des configurations les plus pertinentes:
programme - fichier d'entrée de notre application
preLaunchTask - appelle le script “build” de package.json
sourceMaps - utilise les cartes mères du dossier "out"
smartStep - ignore le code «sans intérêt» dans le débogueur (fichiers JS compilés, par exemple)
internalConsoleOptions - ouvre la console de débogage pendant une session de débogage
outFiles - endroit où le débogueur recherche les fichiers sourceMap

Vous pouvez maintenant ouvrir la vue de débogage (Ctrl-Maj-D) de VS Code. En cliquant à gauche d'un numéro de ligne, vous pouvez ajouter un nouveau point d'arrêt. Appuyez sur le bouton de débogage vert avec la configuration de lancement sélectionnée («Construire le projet») ou appuyez simplement sur la touche F5 de votre clavier pour lancer le débogage.

Bref aperçu:

Points d'arrêt conditionnels

En supposant que vous ayez une boucle for et que vous ne voulez pas interrompre l'exécution à chaque itération, vous pouvez ajouter des points d'arrêt conditionnels. Ici, vous pouvez choisir entre une condition «Expression» ou «Nombre de hits».

Ce point d'arrêt n'interrompt l'exécution que si «name» a la valeur «world».

Expression: Si l'expression est vraie, le point d'arrêt arrête l'exécution.
Nombre de hits: Nombre de hits jusqu'à ce que le point d'arrêt arrête l'exection.

Vous trouverez plus d'informations dans la documentation du code VS.

Conclusion

VS Code offre un environnement de développement très confortable pour TypeScript, quelle que soit la taille du projet. Utiliser le débogueur intégré est beaucoup plus utile et gagner du temps que d'utiliser le bien connu “console.log” à cette fin.

J'espère que vous avez apprécié cet article. Vous pouvez trouver le lien vers le code source associé au projet de démonstration ci-dessous.

Code source associé