Comment utiliser TypeScript avec Node.js

mrahdev

RAHMANI Mohammad

Posted on February 2, 2023

Comment utiliser TypeScript avec Node.js

Après ma formation CDA (Concepteur Développeur d’Applications), j’ai pu trouver du temps pour travailler sur mes projets personnels. Je me suis notamment concentré sur le langage TypeScript car j’ai vraiment envie de l’apprendre. J’ai déjà travaillé avec sur mon projet de stage mais j’ai besoin d’enrichir mes compétences sur ce langage.
Pour cela, j’ai créé un projet NodeJS avec un fichier au format « .ts ». Sur le package.json , j'ai ajouté l'entrée "start" avec la valeur "node index.ts" pour lancer mon projet :

"scripts": {
    "start": "node index.ts"
  },
Enter fullscreen mode Exit fullscreen mode

J’ai rencontré un problème parce que mon projet ne s'est pas lancé. J'ai compris que j’avais oublié que NodeJS ne fonctionnait pas avec TypeScript . NodeJS est un outil pour exécuter JavaScript et non TypeScript. J'ai alors recherché sur le internet pour trouver une solution, pour réussir à exécuter TypeScript avec NodeJS et j’ai trouvé quelques solutions. Dans ce poste j'ai mis à disposition une liste de ces solutions, j’espère que ça vous aidera.

1- typescript (tsc)

La première solution est d’utiliser le package typescript , vous devez installer ce package avec la commande suivante :

npm i -D typescript

Enter fullscreen mode Exit fullscreen mode

Vous pouvez également utiliser cette autre commande, pour configurer le compilateur. Par exemple, choisir la version ECMAScript ou le directory pour la sortie des fichiers .js :

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

Ou sinon vous pouvez utiliser cet exemple dans le fichier « tsconfig.json » :

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "noImplicitAny": true
  },
  "include": ["**/*"]
}
Enter fullscreen mode Exit fullscreen mode

Et enfin avec la commande suivante, vous pouvez convertir vos fichiers .ts en .js

tsc -p .
Enter fullscreen mode Exit fullscreen mode

Si vous avez fait attention à la dernière commande, elle s’arrête après son exécution. Cela signifie que pour chaque changement, on force l'exécution de cette commande pour convertir nos fichiers .ts en .js . Il existe cependant une meilleure solution qui consiste à ajouter le flag —watch à la fin de la commande, pour que la compilation ne s’arrête pas et que chaque changement soit automatiquement converti lorsque vous enregistrez vos fichiers .ts .

npx tsc -p . --watch
Enter fullscreen mode Exit fullscreen mode

Pour terminer, vous devez ajouter l’entrée suivante sur la propriété scripts dans le fichier package.json et exécuter la commande npm start dans votre terminal :

"scripts": {
    "start": "node dist/index.js"
  },
Enter fullscreen mode Exit fullscreen mode

🌐 Plus de détails : Docs

2- nodemon

La deuxième solution est d’utiliser l’outil nodemon. Pour cela vous devez installer les packages suivants :

npm i -D nodemon @types/node ts-node typescript
Enter fullscreen mode Exit fullscreen mode

Ensuite, ajouter l’entrée suivante sur la propriété scripts dans le fichier package.json et exécuter la commande npm start dans votre terminal :

"scripts": {
    "start": "nodemon index.ts"
  },
Enter fullscreen mode Exit fullscreen mode

Avec nodemon vous n’avez pas besoin d’arrêter votre projet. Il redémarre automatiquement lorsque que vous enregistrez vos changements.

🌐 Plus de détails : GitHub

3- tsx

La troisième solution est d’utiliser tsx . Pour cela vous devez installer ce package avec la commande suivante :

npm i -D tsx
Enter fullscreen mode Exit fullscreen mode

Puis ajouter l’entrée suivante sur la propriété "scripts" dans le fichier package.json et exécuter la commande npm start dans votre terminal :

"scripts": {
    "start": "tsx watch index.ts"
  },
Enter fullscreen mode Exit fullscreen mode

🌐 Plus de détails : GitHub

4- tsc-node-env

La dernière solution que j’ai trouvée, est d’utiliser le package “tsc-node-env” . Pour cela vous devez installer les packages suivants :

npm i -D ts-node-dev @types/node typescript
Enter fullscreen mode Exit fullscreen mode

Pour la surveillance de vos changements, vous devez ajouter l’entrée suivante pour la propriété “scripts” dans le fichier package.json et exécuter la commande npm start dans votre terminal :

"scripts": {
    "start": "tsnd --respawn index.ts"
  },
Enter fullscreen mode Exit fullscreen mode

🌐 Plus de détails : GitHub

💖 💪 🙅 🚩
mrahdev
RAHMANI Mohammad

Posted on February 2, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Comment utiliser TypeScript avec Node.js
beginners Comment utiliser TypeScript avec Node.js

February 2, 2023