Outils et Bonnes Pratiques en Typescript

Salut à tous ! Après avoir navigué dans les eaux profondes des API REST et GraphQL, il est temps d'aborder les outils et les bonnes pratiques qui nous permettent de maintenir notre code propre, lisible et performant.

Linting et Formatage du Code

Le linting et le formatage du code sont essentiels pour maintenir la qualité et la cohérence de notre codebase.

ESLint

ESLint est un outil populaire pour identifier et signaler les motifs de code problématiques. Il peut être configuré pour Typescript et nous aider à éviter les erreurs courantes.

Installation

Installe ESLint et les plugins nécessaires pour Typescript :

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

Configuration

Crée un fichier de configuration .eslintrc.json :

{
  "parser": "@typescript-eslint/parser",
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "quotes": ["error", "single"]
  }
}

Ajoute un script dans ton package.json pour exécuter ESLint :

"scripts": {
    "lint": "eslint 'src/**/*.{ts,tsx}'"
}

Prettier

Prettier est un formateur de code qui garantit un style de code cohérent. Il peut être utilisé avec ESLint pour formater automatiquement notre code.

Installation

Installe Prettier et les plugins nécessaires :

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

Configuration

Crée un fichier de configuration .prettierrc :

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Modifie .eslintrc.json pour intégrer Prettier :

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "prettier/prettier": "error"
  }
}

Ajoute un script dans ton package.json pour exécuter Prettier :

"scripts": {
    "format": "prettier --write 'src/**/*.{ts,tsx}'"
}

Tests Unitaires avec Jest

Les tests unitaires sont essentiels pour garantir que notre code fonctionne comme prévu. Jest est un framework de test populaire pour Typescript.

Installation

Installe Jest et les types d'interface pour Typescript :

npm install jest ts-jest @types/jest --save-dev

Configuration

Crée un fichier de configuration jest.config.js :

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
}

Exemple de Test Unitaire

Crée un fichier de test pour une fonction simple :

// src/utils/math.ts
export function add(a: number, b: number): number {
  return a + b
}

// src/__tests__/math.test.ts
import { add } from '../utils/math'

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3)
})

Ajoute un script dans ton package.json pour exécuter les tests :

"scripts": {
    "test": "jest"
}

Configuration Avancée du Compilateur Typescript

Typescript offre de nombreuses options de configuration pour s'adapter à nos besoins spécifiques. Modifions notre tsconfig.json pour inclure des options avancées.

Options de Compilation

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Intégration avec Visual Studio Code (VSCode)

VSCode est un éditeur de code puissant qui offre de nombreuses extensions pour améliorer notre expérience de développement avec Typescript.

Extensions Recommandées

ESLint

L'extension ESLint pour VSCode aide à afficher les erreurs de linting directement dans l'éditeur.

1. Ouvre VSCode.
2. Va dans l'onglet des extensions (icône de carré avec un contour).
3. Recherche "ESLint" et installe l'extension officielle.

Prettier

L'extension Prettier pour VSCode formate automatiquement ton code à chaque sauvegarde.

1. Ouvre VSCode.
2. Va dans l'onglet des extensions.
3. Recherche "Prettier" et installe l'extension officielle.

Typescript

Assure-toi que l'extension Typescript est installée pour bénéficier de l'autocomplétion, des vérifications de type et d'autres fonctionnalités utiles.

1. Ouvre VSCode.
2. Va dans l'onglet des extensions.
3. Recherche "Typescript" et installe l'extension officielle.

Configuration de VSCode

Pour intégrer ESLint et Prettier, ajoute les configurations suivantes à ton fichier de paramètres utilisateur ou de l'espace de travail (settings.json) :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Débogage avec VSCode

VSCode offre une excellente intégration de débogage pour Typescript. Crée une configuration de débogage en ajoutant un fichier launch.json dans le dossier .vscode :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Typescript",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "program": "${workspaceFolder}/src/index.ts",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

Ajoute une tâche de pré-lancement pour compiler le code Typescript avant le débogage :

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: build - tsconfig.json",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "group": "build",
      "problemMatcher": ["$tsc"]
    }
  ]
}

Conclusion

Les outils et les bonnes pratiques sont essentiels pour maintenir la qualité de notre code Typescript. En utilisant des outils comme ESLint, Prettier, Jest et en intégrant VSCode, nous pouvons garantir que notre code reste propre, lisible et performant.