TypeScript et tsconfig.json

Cet article explique TypeScript et tsconfig.json.

En partant du rôle fondamental de TypeScript, nous expliquerons, à l’aide d’exemples concrets, comment tsconfig.json fonctionne au sein d’un projet.

YouTube Video

TypeScript et tsconfig.json

TypeScript est du « JavaScript avec des types ». Cependant, pour utiliser TypeScript efficacement dans des projets concrets, il est essentiel de bien comprendre et configurer intentionnellement tsconfig.json.

Pourquoi avons-nous besoin de TypeScript ?

Premièrement, la principale raison d’utiliser TypeScript est « la capacité de détecter les erreurs avant l’exécution ».

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Ce code ne provoquerait pas d’erreur en JavaScript avant l’exécution, mais en TypeScript cela entraînerait une erreur de type à la compilation.

Cette « détection précoce » améliore considérablement l’efficacité et la qualité du développement.

Comment TypeScript est-il exécuté ?

En principe, TypeScript ne peut pas être exécuté tel quel. Vous devez le convertir en JavaScript à l’aide de tsc (le compilateur TypeScript)..

1npm install -D typescript
2npx tsc --init

• En effectuant cette opération, tsconfig.json est généré, fournissant le fichier central qui définit le comportement du projet TypeScript.

Quel est le rôle de tsconfig.json ?

tsconfig.json est un fichier de configuration qui détermine « quels fichiers », « avec quelles règles » et « comment les convertir ». Bien qu’il puisse sembler complexe au premier abord, seuls quelques paramètres sont vraiment importants.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Avec seulement ces paramètres, un développement TypeScript moderne et sûr est possible.

target : La version de JavaScript à générer

target détermine le niveau de spécification du JavaScript généré.

1"target": "ES2020"

Avec cela, TypeScript produira du JavaScript équivalent à ES2020. Pour les environnements plus anciens, choisissez ES5 ; pour les environnements les plus récents, sélectionnez ES2022, etc.

Lorsque vous spécifiez ESNext

1"target": "ESNext"

• ESNext indique de générer la dernière syntaxe JavaScript disponible telle quelle. TypeScript ne transpile pas la syntaxe et laisse ce soin à l’environnement d’exécution comme Node.js ou les navigateurs.

• Par conséquent, ESNext convient lorsque vous ciblez uniquement la dernière version de Node.js ou lorsque vous utilisez Babel ou un bundler pour transpiler séparément. En revanche, si l’environnement d’exécution ne prend pas en charge la dernière syntaxe, cela peut entraîner des erreurs à l’exécution, donc la prudence est de mise.

module : Spécifier le format de module

module spécifie le format de module.

1"module": "ESNext"

• ESNext est la norme dans les environnements frontend et Node.js modernes.
• Choisissez "CommonJS" uniquement si vous avez besoin de CommonJS.

strict : Maximiser la sécurité des types

strict est un interrupteur pour maximiser la sécurité de TypeScript.

1"strict": true

• L’activer permettra de détecter entièrement les types ambigus et les bugs potentiels.

mode strict et « any » implicite

Lorsque vous activez strict, TypeScript considère comme une erreur les variables dont il ne peut pas déduire le type.

1function printValue(value) {
2	console.log(value);
3}

• Cette variable value n’a pas d’information de type à la déclaration, donc TypeScript ne peut pas déterminer son type. En conséquence, any est utilisé implicitement, ce qui déclenchera un avertissement (erreur) en mode strict.

1function printValue(value: number) {
2	console.log(value);
3}

• En spécifiant explicitement le type comme ceci, TypeScript comprend que « cette variable ne gère que des nombres ». En TypeScript, il est plus important que le type puisse être déterminé de manière unique que de pouvoir omettre le type.

include/exclude : Contrôler les fichiers à compiler

Dans tsconfig.json, vous pouvez spécifier les fichiers à inclure et ceux à exclure de la compilation.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Ainsi, seuls les fichiers sous src seront gérés par TypeScript.
• node_modules spécifié dans exclude sera exclu de la compilation même s’il se trouve sous un chemin inclus par include.

outDir : Spécifier le dossier de sortie

Spécifiez outDir pour gérer l’emplacement de vos fichiers compilés.

1"outDir": "dist"

• Ainsi, tous les résultats compilés seront placés dans le dossier dist. En pratique, séparer le code source des artefacts de build est la norme.

rootDir : Spécifier le dossier source

rootDir spécifie le dossier que TypeScript considère comme la racine du code source.

1"rootDir": "src"

• Ce paramètre permet à TypeScript de conserver la structure des dossiers à partir de src lors de la génération des fichiers. Par exemple, src/index.ts sera généré sous dist/index.js.

• La structure du dossier spécifié dans rootDir sera reproduite dans outDir.

esModuleInterop : Faire le lien entre CommonJS et les modules ES

Voyons maintenant esModuleInterop.

1"esModuleInterop": true

• Si cette option est activée, vous pouvez utiliser les modules CommonJS avec la syntaxe import en toute sécurité.

1import fs from "fs";

• Ce paramètre est presque indispensable lors de l’utilisation de Node.js.

noImplicitAny : Interdire les types « any » implicites

Il est également important de renforcer les contrôles de types dans tsconfig.json.

1"noImplicitAny": true

• Avec cela, vous pouvez interdire les types any implicites. Cela vous permet de détecter de manière fiable les endroits où vous avez oublié de spécifier un type.

Configuration pour détecter le code inutilisé

Les paramètres de détection du code inutilisé permettent également d’améliorer la maintenabilité.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Avec cela, les variables et arguments inutiles seront immédiatement signalés par des avertissements.

lib : Définir les API intégrées disponibles

lib est un paramètre qui spécifie les API standard que TypeScript présume être disponibles.

1"lib": ["ES2020", "DOM"]

• Avec ce paramètre, les types suivants deviennent accessibles :. Avec ES2020, des fonctionnalités modernes comme Promise, Map et Set deviennent disponibles. Avec DOM, les API navigateur comme document, window et HTMLElement deviennent disponibles.

En frontend, incluez DOM ; pour les projets uniquement Node.js, retirez DOM pour éviter l’inclusion de types globaux inutiles.

moduleResolution : Règles de résolution des modules

moduleResolution détermine comment les modules spécifiés dans les instructions import sont résolus.

1"moduleResolution": "Node"

Les deux principales options sont les suivantes :.

• Si vous indiquez Node, les règles de résolution des modules Node.js seront utilisées.
• Classic est l’ancienne méthode spécifique à TypeScript, mais elle est rarement utilisée de nos jours.

Dans les environnements utilisant Node.js ou un bundler, il est préférable de spécifier explicitement Node.

Un tsconfig.json minimal et prêt pour la production

Sur la base de ce que nous avons vu jusqu’à présent, un tsconfig.json minimal prêt pour la production ressemblerait à ceci :.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Cette configuration fournit une base solide aussi bien pour les projets frontend que Node.js.

Résumé : tsconfig.json est un « livre de règles »

tsconfig.json n’est pas juste un fichier de configuration, mais un « livre de règles » qui s’applique à tout le projet. Avec tsconfig.json, des politiques importantes telles que les suivantes sont clairement définies :.

• Le niveau de sécurité des types.
• Les conventions de codage de votre équipe.
• La prévention des bugs futurs.

En comprenant tsconfig.json, vous serez en mesure non seulement d’écrire du TypeScript, mais aussi de concevoir vos projets pour un usage sûr de TypeScript.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video