Générateur de tsconfig.json

Résultats

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. 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. 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. 3

    Basculez les flags

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap et forceConsistentCasingInFileNames sous forme de simples cases à cocher.

  4. 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. 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 votre package.json contient "type": "module", utilisez NodeNext à la fois pour module et moduleResolution.
  • Utiliser tsc comme bundler. C’est un compilateur et un vérificateur de types. Utilisez Vite/esbuild/SWC pour les builds et tsc --noEmit pour la vérification.
  • Tout compiler. Sans liste include, TypeScript ramasse chaque fichier .ts visible. La configuration générée écrit toujours include: ["src/**/*"] et exclut node_modules et dist : vous êtes couvert.
  • Avoir besoin de plus que la configuration n’offre. Ce générateur reste volontairement minimal. Des options comme lib, paths, isolatedModules ou noEmit s’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

Outil disponible dans d’autres langues