TypeScript - tsconfig.json : Guide pour les débutants

Salut là, future super star du codage ! ? Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de TypeScript et son fidèle sidekick, le fichier tsconfig.json. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical, et nous allons aborder cela ensemble, étape par étape.

Qu'est-ce que tsconfig.json ?

Avant de plonger dedans, parlons de ce qu'est réellement le fichier tsconfig.json. Imagine que tu construis une maison (ton projet TypeScript). Le fichier tsconfig.json est comme le plan de ta maison. Il indique à TypeScript comment tu veux que ton projet soit construit, quelles fonctionnalités tu veux utiliser, et à quel point tu veux que les règles soient strictes.

Structure de base du fichier tsconfig.json

Maintenant, regardons la structure de base d'un fichier tsconfig.json. Il est écrit en format JSON, ce qui est une manière d'organiser les données compréhensible à la fois par les humains et les ordinateurs.

Voici un exemple simple :

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Décomposons cela :

1. Le fichier entier est entouré d'accolades {}.
2. À l'intérieur, nous avons différents sections comme compilerOptions, include, et exclude.
3. Chaque section contient des paramètres spécifiques.

CompilerOptions

La section compilerOptions est où se passe la magie. C'est comme dire au chef (le compilateur TypeScript) comment tu veux que ton plat (ton code) soit préparé. Regardons quelques options courantes :

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

Explication de chacune de ces options :

• target : Cela indique à TypeScript quelle version de JavaScript compiler. "es5" est largement pris en charge par les navigateurs.
• module : Cela spécifie quel système de modules utiliser. "commonjs" est couramment utilisé pour les projets Node.js.
• strict : Quando mis à true, il active un ensemble d'options de vérification de type strictes.
• outDir : C'est où TypeScript placera les fichiers JavaScript compilés.
• rootDir : C'est où TypeScript doit chercher tes fichiers source.
• sourceMap : Quand true, il génère des fichiers de carte des sources, ce qui est utile pour le débogage.

Include et Exclude

Les sections include et exclude indiquent à TypeScript quels fichiers compiler et quels ignorer :

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

• include : Cela indique à TypeScript de compiler tous les fichiers dans le dossier src et ses sous-dossiers.
• exclude : Cela indique à TypeScript d'ignorer le dossier node_modules et tous les fichiers se terminant par .spec.ts (généralement utilisés pour les fichiers de test).

Scénarios et configurations courants

Maintenant que nous comprenons les bases, regardons quelques scénarios courants que tu pourrais rencontrer et comment configurer tsconfig.json pour eux.

Scénario 1 : Projet React

Si tu travailles sur un projet React, tu pourrais vouloir une configuration comme celle-ci :

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Cette configuration est optimisée pour le développement React. Elle te permet d'utiliser JSX, active la vérification de type stricte, et configure la résolution des modules pour une structure de projet React typique.

Scénario 2 : Projet backend Node.js

Pour un projet backend Node.js, tu pourrais utiliser une configuration comme celle-ci :

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

Cette configuration est adaptée pour un projet backend Node.js. Elle compile vers une version plus récente de JavaScript (ES2018), utilise les modules CommonJS, et configure les répertoires d'entrée et de sortie.

Options utiles de tsconfig.json

Voici un tableau de quelques options utiles de tsconfig.json que tu pourrais vouloir utiliser :

Option	Description
noImplicitAny	Lève une erreur sur les expressions et les déclarations avec un type 'any' implicite
strictNullChecks	Active les vérifications de null strictes
strictFunctionTypes	Active la vérification stricte des types de fonction
strictBindCallApply	Active la vérification stricte des méthodes 'bind', 'call', et 'apply' sur les fonctions
noUnusedLocals	Signale des erreurs sur les variables locales inutilisées
noUnusedParameters	Signale des erreurs sur les paramètres inutilisés
noImplicitReturns	Signale une erreur lorsque toutes les voies de code dans une fonction ne retournent pas une valeur
noFallthroughCasesInSwitch	Signale des erreurs pour les cas de passage en switch

N'oublie pas que tu peux toujours te référer à la documentation officielle de TypeScript pour une liste complète des options et de leurs descriptions.

Conclusion

Et voilà, mon apprenti codeur ! Nous avons parcouru le pays de tsconfig.json, de sa structure de base aux scénarios courants et aux options utiles. souviens-toi, tsconfig.json est comme un couteau suisse pour tes projets TypeScript - il est incroyablement polyvalent et peut être personnalisé pour répondre à tes besoins spécifiques.

Alors que tu continues ton aventure TypeScript, n'ayant pas peur d'expérimenter avec différentes configurations. Chaque projet pourrait exiger un réglage légèrement différent, et c'est normal ! Plus tu joues avec tsconfig.json, plus tu seras à l'aise avec ses pouvoirs.

Continue de coder, continue d'apprendre, et surtout, amuse-toi ! Jusqu'à la prochaine fois, que tes types soient forts et que tes erreurs soient peu nombreuses. Bonne programmation TypeScript ! ??‍??‍?

Credits: Image by storyset