Comment exécuter du code TypeScript, sous Windows, Mac, ou Linux ?

Vous savez désormais ce qu’est TypeScript et à quoi peut servir TypeScript en pratique. Mais du coup, vous vous posez peut-être cette question, à présent : comment exécuter du code écrit en Typescript, concrètement ? Eh bien c'est justement l'objet de cet article, qui je vais essayer de vous guider pas à pas, afin que vous puissiez exécuter votre premier code TS (que ce soit avec VS Code ou un autre éditeur, et ce, sur Windows, Linux, ou macOS !).

Ici, nous allons donc tout d'abord voir comment installer le nécessaire pour exécuter du code TypeScript, et ensuite voir comment compiler un programme exemple pour voir ce que ça donne ! Si ça vous dit, alors par ici la suite 🙂

Remarque : dans cet article, je vous détaille deux façons de faire les choses, mais il y en aurait bien d'autres (comme avec les Typescript "Playground", qui permettent d'exécuter des bouts de code TS en ligne, par exemple). Aussi j'essayerai de vous détailler au maximum le process, selon si vous travaillez sous Windows, Linux, ou MacOS, afin d'aider un maximum de personnes ici !

Prérequis : Installer Node.js et TypeScript

Alors, pour commencer, nous allons voir comment installer Node.js et le compilateur tsc (tsc permettant de transformer du code TS en JS exécutable, node permettant d'exécuter du code JS "hors navigateur"). Ensuite, dans un second temps, nous verrons comment exécuter du code TypeScript avec VScode (que je vous recommande, au passage, du moins pour débuter !), ou plus basiquement, avec les lignes de commande.

Installation de Node.js

L'installation de NodeJS est simple, mais diffère quelque peu selon le système d'exploitation que vous avez ! Du coup, je vais essayer de vous détailler un maximum les choses ici, pour les différents OS :

• Si vous travaillez sous Windows, il faut préalablement se rendre sur le site de Node (https://nodejs.org/fr) et télécharger l'installateur NodeJS (en version LTS, qui est la dernière version stable, avec un "support au long terme") ; je vous mettrai ci-dessous un aperçu de ce site, en sachant qu'il aura peut-être changé, entre le moment où j'écris ces lignes et le moment où vous les lirez (mais l'idée restera la même, à coup sûr !). Enfin, une fois le téléchargement achevé, il ne vous restera plus qu'à lancer l'exécutable téléchargé, pour que NodeJS s'installe sur votre PC.
• Si vous travaillez sous Linux, il faudra ouvrir un terminal, et taper sudo apt update && sudo apt install nodejs npm dedans, si vous êtes sur Ubuntu ou Debian (pour ceux qui sont sur Fedora, il faudra taper sudo dnf install nodejs).
• Si vous travaillez sous macOS, il vous faudra alors télécharger l'installateur présent sur le site nodejs.org, ou utiliser Homebrew (brew install node, si installé).

Une fois l'installation achevée, il ne vous reste plus qu'à ouvrir un terminal (l'invite de commande cmd, par exemple, sous Windows), et taper les commandes suivantes :

• node -v (ce qui donne, de mon côté : "v18.17.1", signifiant ainsi que NodeJS est bien installé sur l'ordinateur)
• npm -v (ce qui donne, de mon côté : "10.7.0", signifiant que le gestionnaire de package "npm" a bien été installé, en même temps que Node)

Nota : bien entendu, vous aurez certainement des numéros de versions plus récents que les miens, au moment où vous lirez cet article !

Installation de TypeScript

Pour installer TypeScript une fois qu'on a installé Node/npm, c'est encore plus simple ! Car dans tous les cas, que vous travaillez sous Windows, Mac, ou Linux, il vous suffira simplement de suivre les 3 étapes suivantes :

• Ouvrir un terminal
• Taper la commande npm install -g typescript dedans (pour télécharger et installer typescript sur votre ordi, de manière globale)
• Et vérifier que le compilateur TypeScript soit bien installé, en tapant la commande tsc -v (ce qui donne "Version 5.2.2" de mon côté, au moment où j'écris ces lignes)

Voilà ! Vous êtes fin prêt pour compiler/exécuter du code TypeScript à l'avenir ! Maintenant, voyons comment manier node et npm, que ce soit dans VScode (recommandé), ou en ligne de commande.

Remarque : il n'est pas absolument nécessaire d'installer typescript au niveau global ; ce package peut être installé localement dans votre projet, en tapant npm install --save-dev typescript. Par contre, vous ne pourrait pas exécuter tsc directement ; il faudra taper npx tsc au niveau de votre projet, ou alors appeler tsc dans un script du fichier package.json (voir le fichier package.json de cet exemple de code TS, pour mieux comprendre, si besoin).

Méthode #1 : Exécuter du code TypeScript avec VS Code

VS Code est sans conteste l'un des outils les plus utilisés par les développeurs TypeScript, en tout cas pour commencer son apprentissage ! C'est pourquoi je vous le recommande, si vous ne savez pas quelle IDE choisir au début, pour développer en TS.

Installer VScode

Alors, pour installer VScode, il vous suffit d'aller sur le site code.visualstudio.com de Microsoft, et de télécharger ensuite le fichier d'installation correspondant à votre système d'exploitation. Une fois le téléchargement achevé, il restera à :

• si vous êtes sous Windows : exécuter le fichier d'installation (.exe) téléchargé, pour procéder à l'installation de VS Code sur votre ordi (important : pensez à cocher les cases permettant d'ajouter VSCode aux menus contextuels Windows ; ainsi, vous pourrez faire un clic droit sur le bureau, sur un répertoire, ou dans un répertoire, pour ouvrir VS Code à cet endroit précis)
• si vous êtes sous Linux : installer le fichier préalablement téléchargé (.deb ou .rpm), en utilisant la commande sudo dpkg -i fichier.deb (si vous êtes sur Ubuntu, par exemple) ou sudo rpm -i fichier.rpm (si vous êtes sur Fedora).
• si vous êtes sous macOS : télécharger le fichier d'installation (.dmg), et le glisser dans Applications

Créer un projet simple (Hello World en TypeScript !)

Le plus simple selon moi, pour créer un projet, est tout d'abord de créer un répertoire vide sur son disque dur (là où l'on souhaitera mettre ses futurs projets/fichiers TypeScript), puis de lancer VS Code ensuite (en allant rechercher ce répertoire fraîchement créé, en cliquant sur : Fichier > Ouvrir dossier).

Ensuite, depuis VSCode, il vous suffira de créer un nouveau fichier nommé "index.ts", pour commencer l'aventure ! Dedans, vous pourrez par exemple y mettre le code suivant (un classique "Hello World !" :

let message: string = "Hello World, TypeScript !";
console.log(message);

Si vous êtes habitué à JavaScript, vous ne serez pas trop dérouté ! Car mis à part le ":string" à côté de la variable "message", il n'y a rien de particulier ! Au passage, comme vous l'aurez compris, le ":string" permet de caractériser (typer) la variable message, afin qu'elle n'accepte de recevoir qu'un type chaîne de caractères en valeur associée.

Compiler un fichier avec tsc

À présent, nous allons compiler le programme TypeScript, afin de générer un fichier exécutable JavaScript. Pour ce faire, depuis VS Code, il suffit d'ouvrir un nouveau terminal (en cliquant dans le menu : Terminal > Nouveau terminal). Puis, dans ce terminal, taper le code suivant : tsc index.ts (commande identique, que vous soyez sur Windows/Linux/macOS).

Ainsi, un fichier sera automatiquement généré : il s'appellera "index.js", et sera le résultat de la compilation du fichier source "index.ts".

Remarque : en tapant la commande "tsc + nom_du_fichier_a_compiler.ts", on compile manuellement un fichier TypeScript, pour générer son Javascript correspondant. Bien entendu, nous n'allons pas faire ça pour tous les fichiers .ts à compiler à l'avenir ! Ici, je voulais juste vous montrer le fonctionnement de base, avec 1 seul fichier pour bien comprendre comment tout fonctionne.

Exécuter le code issu du compilateur

Nous voici arrivé au moment où nous allons enfin pouvoir exécuter du code TypeScript, ou plus précisément, comme vous l'aurez compris, exécuter un code Javascript issu du fichier TypeScript compilé 🙂

Pour cela, nous allons écrire une nouvelle commande dans le terminal (faites Terminal > Nouveau terminal sous VS Code, si vous l'avez fermé). Cette commande sera : node index.js (identique sur Linux/macOS/Windows)

Si tout s'est bien passé, vous devriez voir le message "Hello World, TypeScript !" s'afficher dans le terminal, comme visible ci-dessous :

Ça y est : vous venez d'exécuter votre premier programme TypeScript ! Félicitation 😉

Bonus : automatiser la compilation de tous les fichiers TypeScript d'un coup !

Pour ne pas avoir à compiler tous les fichiers TS d'un projet un par un, il suffit de créer un fichier de config pour le compilateur tsc, à la racine du projet, et ensuite, de lancer tsc à la racine de votre projet (sans paramètre complémentaire, ici).

Donc, commençons par créer un fichier tsconfig.json à la racine du projet, avec les lignes suivantes à l'intérieur :

{
  "compilerOptions": {
    "target": "es6",
    "outDir": "./dist",
    "rootDir": "./"
  }
}

Pour faire simple, cela va indiquer au compilateur qu'il devra compiler tous les fichiers .ts présents dès la racine (ça c'est rootDir = ./), et stocker tous les fichiers générés .js dans un répertoire nommé "dist" (ça c'est outDir = ./dist). Au passage, ne faites pas attention au paramètre target=es6, qui signifie qu'on travaille en ECMAScript 6 (en javascript/typescript moderne, si vous préférez !).

À noter que ce fichier de config est à créer une fois pour toute, et on n'y touchera jamais ensuite (sauf à vouloir modifier/ajouter/supprimer un paramètre du compilateur en particulier !).

À présent, il ne vous reste plus qu'à taper la commande "tsc" à la racine de votre projet, et tous vos fichiers seront compilés d'un coup d'un seul !

Si on reprend l'exemple précédent : une fois la compilation terminée, un dossier "dist" sera créé dans votre projet, avec un fichier index.js à l'intérieur. Du coup, il ne vous restera plus qu'à taper la commande node ./dist/index.js dans votre terminal, toujours à la racine de votre projet, pour exécuter le fichier javascript fraîchement généré, à partir du fichier typescript ! Voici ce que ça donne, de mon côté :

Sympa, non ?

Méthode #2 : Exécuter du code en ligne de commande (sans VS Code)

Vous n'êtes pas fan des IDE, ou n'aimez tout simplement pas VS Code ? Pas de soucis, car on peut fort bien s'en passer (sauf si on est accro à VScode… hein !).

Alors, pour commencer, nous allons ouvrir un terminal (à noter que cette façon de faire est quasi identique sur chaque OS, que vous ayez un Mac, un PC, ou autre).

Créer un fichier TS

Pour créer un fichier vide, il suffit de :

• Sous Windows, taper la commande echo. > index.ts (si vous utilisez "cmd") ou ni index.ts (si vous utilisez PowerShell). Ainsi, un fichier vide nommé "index.ts" sera créé ; ensuite, vous pourrez éditer ce fichier avec Notepad ou autre, pour y mettre le code qui suit
• Sous Linux ou Mac, taper la commande touch index.ts pour créer un fichier vide "index.ts"; ensuite, éditez le avec la commande nano index.ts ou vim index.ts, en ajoutant le code suivant

Code à mettre dans votre fichier index.ts :

let message: string = "Salut TypeScript !";
console.log(message);

Une fois fait, enregistrez votre fichier et fermez le, pour passer à l'étape compilation !

Compiler le fichier "index.ts"

Comme avec VScode, il suffit de taper sur votre terminal : tsc index.ts (et ce, quelque soit votre OS), pour qu'un fichier index.js soit généré.

Remarque : n'hésitez pas à faire un saut au paragraphe 2.5 plus tard, pour voir comment automatiser la compilation de tous les fichiers ts d'un coup !

Exécuter le fichier "index.js" généré

Enfin il suffit d'écrire la commande node index.js dans le terminal, pour exécuter le fichier index.js généré par le compilateur tsc, à partir du fichier index.ts.

Si tout s'est bien passé, vous devriez voir le texte "Salut TypeScript !" s'inscrire dans votre terminal !

À noter que, là aussi, la démarche et les commandes sont les mêmes, que vous soyez sur Linux, MacOS, ou Windows.

Les alternatives pratiques

Si vous souhaitez exécuter du code TS en ligne directement, sachez qu'il existe des "Playground" pour ce faire (c'est à dire des espaces en ligne, où vous pouvez simuler du code TS). Ainsi, nul besoin d'installer quoi que ce soit !

Voici quelques exemples de sites que j'utilise (ce sont des "interpréteur TS online" gratuits) :

• https://www.typescriptlang.org/play/ (pour du code simple à exécuter, c'est nickel !)
• https://playcode.io/typescript (pour du multi-fichiers, c'est plutôt bien fait !)

Après, il y a pléthore de site sur internet proposant ce type de service (comme onecompiler.com, codesandbox.io, etc). Si cela vous intéresse, n'hésitez pas à taper "ts online" dans Google, pour trouver le site proposant un compilateur TypeScript en ligne qui vous plaira le plus 🙂

Conclusion

Voilà ! J'espère n'avoir rien oublié !

À présent, vous savez exécuter du TypeScript (après avoir installé Node.js et TS, écrit un fichier .ts, compilé ce fichier avec tsc, et exécuté le fichier .js résultant avec la commande node !). Du reste, n'hésitez pas à vous servir de VS Code, car c'est gratuit et il nous facilite vraiment la vie ! Après, si vous y êtes réfractaire, vous pouvez toujours passer par les lignes de commande ; ça marche tout aussi bien, même si ça reste un poil rustique 😉

Du reste, si vous souhaitez m'aider à produire un maximum d'articles sur TypeScript, n'hésitez pas à m'offrir un café pour me soutenir (via le bouton jaune ci-dessous) ! Merci de toute votre aide, par avance !

(*) Mis à jour le 12/04/2025