Image de couverture pour Démarrer un projet Node avec Typescript

Démarrer un projet Node avec Typescript

Installation et configuration pas à pas de Typescript, Eslint, Prettier, Jest et Git

article
typescriptjavascriptnode

Avec tous les frameworks prêts à l’emploi comment Next, Nest, Remix, Astro… on peut en oublier comment configurer un simple projet Node avec Typescript. Je vous partage pas à pas la configuration minimale que j’ai mise en place dernièrement.

TLDR : Retrouvez le projet sur github

Création du fichier package.json :

npm init -y

On peut désormais ajouter nos dépendances et scripts.

On veut gérer notre code source en typescript dans src/**/* et générer du code Javascript dans dist/**/* :

├── dist
│   └── index.js
├── src
│   └── index.ts

C’est bien du Javascript qu’on déploie, pas du Typescript.

Nous ajoutons Typescript et les défintions de Type pour Node :

npm i --save-dev typescript @types/node

Créons un fichier de configuration tsconfig.json avec toutes les fonctionnalités supportées par la version Node 18 (LTS à date) :

{
  "compilerOptions": {
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "target": "es2022",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },

  "include": ["src/**/*"],
  "exclude": ["**/*.spec.ts"]
}

Vous pouvez aussi initialiser un fichier de tsconfig.json avec la commande npx tsc --init.

Ajoutons un script dans la section scripts de notre fichier package.json :

"scripts": {
  "build": "tsc",
}

npm run build produit bien des fichiers JS dans le répertoire ./dist

dist
├── index.js

Pour lancer notre application, nous pouvons exécuter notre fichier JS avec Node

node dist

Pour lancer notre application sans passer par la compilation, nous pouvons utiliser TS Node qui permet d’éxécuter directement du code Typescript :

npm i --save-dev ts-node

Exemple

npx ts-node ./src/index.ts

Pour aller plus loin, on veut que le server se relance quand un fichier source change. C’est là que Nodemon rentre en jeu.

npm i --save-dev nodemon

La configuration nodemon.json permet de relancer ts-node dès qu’un fichier .js ou .ts change :

{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "npx ts-node ./src/index.ts"
}

La librairie ESLint permet de trouver et corriger rapidement des problèmes de syntaxe ou non respect de conventions.

Nous ajoutons la librairie et les paquets liés à Typescript :

npm i --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

Nous définissons la configuration .eslintrc avec les règles standards de Typescript :

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {},
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  }
}

La librairie Prettier va nous permettre de formater le code selon des conventions définies et partagées dans le code.

Nous ajoutons la librairie à nos dépendances :

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Les dépendances ESLint ajoutées eslint-config-prettier et eslint-plugin-prettier vont désactiver les règles en conflit avec Prettier

Ajout du fichier .prettierrc :

{
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80
}

Modifions le fichier de configuration .eslintrc pour ajouter les règles Prettier :

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": 2
  },
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  }
}

Jest est le framework de test qui nous simplifie la configuration et écriture des tests.

Nous ajoutons la librairie, les définitions de types pour Typescript et les règles ESLint :

npm i --save-dev jest @types/jest ts-jest eslint-plugin-jest

Ajout du fichier jest.config.ts :

module.exports = {
    transform: {
        '^.+\\.ts?$': 'ts-jest',
    },
    testEnvironment: 'node',
    testRegex: './src/.*\\.(test|spec)?\\.(ts|ts)$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    roots: ['<rootDir>/src'],
};

Modifions le fichier de configuration .eslintrc pour ajouter les règles Jest :

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "jest"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": 2
  },
  "env": {
    "browser": true,
    "node": true,
    "es2022": true,
    "jest/globals": true
  }
}

Ne pas oublier d’ignorer certains fichiers et dossiers avec .gitignore :

# IntelliJ project files
.idea
*.iml
out
gen

# VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets

# Local History for Visual Studio Code
.history/

# Built Visual Studio Code Extensions
*.vsix

# Folders
dist
coverage
node_modules

Retrouvez le projet sur le projet github Node Typescript Starter

Les liens vers les différentes librairies utilisées :

Articles similaires