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

Initialiser NPM

Création du fichier package.json :

npm init -y

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

Structure du projet

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.

Typescript

Ajout de la dépendance

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

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

Configuration

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.

Build

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

TS-Node et Nodemon

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"
}

ESLint

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

Ajout des dépendances

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

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

Configuration

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
  }
}

Prettier

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

Ajout des dépendances

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

configuration

Ajout du fichier .prettierrc :

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

Mise à jour de la configuration Eslint

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
  }
}

Tests unitaires avec Jest

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

Ajout des dépendances

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 

configuration

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'],
};

Mise à jour de la configuration Eslint

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
  }
}

Git

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

Pour aller plus loin

Retrouvez le projet sur le projet github Node Typescript Starter

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

• Typescript
• TS Node
• Nodemon
• Eslint
• Prettier
• Jest