Générateur de tsconfig.json
tsconfig.json compte largement plus de cent options de compilation et chaque tutoriel TypeScript montre une combinaison différente. Ce générateur s’en tient à celles qui comptent pour la plupart des projets : target, module, moduleResolution, jsx, les flags booléens courants (strict, esModuleInterop, skipLibCheck et compagnie) et les dossiers outDir/rootDir. L’aperçu du tsconfig.json se met à jour en direct à chaque changement ; copiez-le à la racine de votre projet et vous obtenez une configuration propre, sans les options mortes que traînent la plupart des boilerplates.
Comment la configuration est construite
-
1
Choisissez target et module
La version de JavaScript émise par tsc (de ES2015 à ES2023, ou ESNext) et le système de modules (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).
-
2
Réglez moduleResolution et JSX
bundler pour les projets Vite/webpack, node16/nodenext pour Node moderne, node ou classic pour les configurations anciennes. Passez jsx à react-jsx pour du React moderne, ou laissez-le sur none pour omettre la clé.
-
3
Basculez les flags
strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap et forceConsistentCasingInFileNames sous forme de simples cases à cocher.
-
4
Définissez les dossiers
outDir et rootDir, préremplis avec ./dist et ./src. include et exclude sont figés sur src/**/* plus node_modules et dist.
-
5
Copiez le tsconfig généré
L'aperçu JSON se met à jour en direct ; un clic le copie, prêt à être déposé à la racine du projet sous le nom tsconfig.json.
Les options que ce générateur écrit
| Option | Défaut ici | Rôle |
|---|---|---|
target |
ES2022 |
Version de JavaScript du code émis. ES2022 est sûre pour les navigateurs et Node actuels ; ne choisissez un target plus ancien que pour des environnements hérités. |
module |
ESNext |
Syntaxe de modules de la sortie. Utilisez NodeNext/Node16 pour les projets Node en ESM, CommonJS pour du Node hérité. |
moduleResolution |
node |
Comment les imports sont localisés. Préférez bundler avec Vite/webpack/esbuild et node16/nodenext avec Node moderne ; node (node10) est le comportement historique. |
jsx |
omise | Écrite seulement si vous choisissez un mode. react-jsx pour React 17+, preserve quand un bundler transforme le JSX. |
strict |
true |
Active toute la famille de vérifications strictes. À laisser activé sur les nouveaux projets. |
esModuleInterop |
true |
Corrige les imports par défaut des paquets CommonJS. |
skipLibCheck |
true |
Saute la vérification de types des fichiers .d.ts ; compilation bien plus rapide, masque rarement de vrais bugs. |
forceConsistentCasingInFileNames |
true |
Rejette les imports dont la casse diffère du fichier sur disque (la casse classique en passant de macOS à Linux). |
resolveJsonModule |
true |
Permet import data from "./data.json". |
allowJs |
false |
Accepte les fichiers .js dans la compilation ; utile en cours de migration. |
declaration |
false |
Émet des fichiers .d.ts ; à activer pour publier une bibliothèque. |
sourceMap |
false |
Émet des fichiers .js.map pour le débogage. |
outDir / rootDir |
./dist / ./src |
Où va le code compilé et où vivent les sources. |
baseUrl |
"." |
Toujours écrite, de sorte qu’un bloc paths ajouté à la main se résolve depuis la racine du projet. |
La sortie par défaut exacte
Laissez tous les réglages tels quels et voici précisément le fichier obtenu :
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"allowJs": false,
"declaration": false,
"sourceMap": false,
"outDir": "./dist",
"rootDir": "./src",
"baseUrl": "."
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
Choisissez un mode jsx autre que none et une entrée "jsx" est ajoutée à compilerOptions.
Le mode strict : ce qu’il active vraiment
strict: true est un flag parapluie qui active toute la famille stricte, dont noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables et alwaysStrict. Les nouveaux projets devraient démarrer avec tout activé : rattraper la rigueur plus tard est douloureux.
Erreurs courantes
- Mettre
module: "CommonJS"pour un projet Node en ESM. Si votrepackage.jsoncontient"type": "module", utilisezNodeNextà la fois pourmoduleetmoduleResolution. - Utiliser
tsccomme bundler. C’est un compilateur et un vérificateur de types. Utilisez Vite/esbuild/SWC pour les builds ettsc --noEmitpour la vérification. - Tout compiler. Sans liste
include, TypeScript ramasse chaque fichier.tsvisible. La configuration générée écrit toujoursinclude: ["src/**/*"]et exclutnode_modulesetdist: vous êtes couvert. - Avoir besoin de plus que la configuration n’offre. Ce générateur reste volontairement minimal. Des options comme
lib,paths,isolatedModulesounoEmits’ajoutent facilement à la main une fois le fichier de base en place.
Questions fréquentes
Oui pour les monorepos et les projets multi-packages : un fichier de base avec les options communes, que chaque package étend via “extends”. Pour un dépôt à projet unique, un seul tsconfig.json comme celui généré est plus simple.
Introduit dans TypeScript 5.0 pour les projets construits avec Vite, webpack ou esbuild. Il reflète la façon dont les bundlers résolvent réellement les imports, sans les règles d’extensions de fichiers de l’ESM de node16/nodenext. Pour du code exécuté directement par Node, préférez node16 ou nodenext.
Pas via un contrôle dédié. En revanche, le fichier généré fixe toujours baseUrl à “.”, vous pouvez donc coller un bloc paths juste en dessous, par exemple “@/*”: [“src/*”], et il sera résolu depuis la racine du projet.
En général non, et c’est pourquoi ce générateur l’omet : target implique un ensemble de types de bibliothèque correspondant. Ne surchargez lib à la main que pour des cas particuliers, comme des API DOM dans un projet Node ou des types WebWorker.
Aucune inscription n’est nécessaire et rien n’est conservé. Vos sélections servent uniquement à afficher l’aperçu de la configuration ; dans la vue étape par étape, elles figurent aussi dans l’URL de la page, ce qui permet de mettre en favori ou de partager une configuration terminée.
Outils similaires
Référence de la table ASCII
Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.
Référence des caractères HTML
Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.
Compteur de FPS
Mesurez les FPS du navigateur avec requestAnimationFrame : lissage, fréquence d'images min et max, seuil d'alerte et graphique facultatif. Tout se passe en local, sans envoi ni API.
Référence des raccourcis clavier
Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.
Générateur de licence
Générez le texte complet des licences open source avec votre nom et l'année remplis. Couvre les licences MIT, Apache 2.0, GPLv3, BSD-3, MPL-2.0 et CC.
Vérificateur d'algorithme de Luhn
Validez les numéros de carte de crédit, IMEI, NAS et autres numéros protégés par Luhn. Retourne un résultat valide ou invalide et montre chaque étape de doublement et de somme.
Outil disponible dans d’autres langues
- tsconfig.json-Generator [DE]
- tsconfig.json ジェネレーター [JA]
- Gerador de tsconfig.json [PT]
- tsconfig.json-generator [SV]
- Tsconfig.json-generator [NL]
- เครื่องมือสร้างไฟล์ tsconfig.json [TH]
- Generador de tsconfig.json [ES]
- Bộ tạo tsconfig.json [VI]
- Generator tsconfig.json [ID]
- tsconfig.json 생성기 [KO]
- مولد ملف tsconfig.json [AR]
- Generator tsconfig.json [PL]
- tsconfig.json Generator [EN]
- Generatore tsconfig.json [IT]
- tsconfig.json Üretici [TR]
- tsconfig.json 生成器 [ZH]
- Генератор tsconfig.json [RU]