Tsconfig.json-generator

Resultaten

tsconfig.json telt ruim honderd compileropties en elke TypeScript-tutorial toont een andere combinatie. Deze generator beperkt zich tot de opties die er voor de meeste projecten toe doen: target, module, moduleResolution, jsx, de gangbare booleaanse vlaggen (strict, esModuleInterop, skipLibCheck en consorten) en de mappen outDir/rootDir. De preview van tsconfig.json wordt live bijgewerkt bij elke wijziging; kopieer hem naar de root van je project en je hebt een schone configuratie zonder de dode opties die de meeste boilerplates meeslepen.

Hoe de configuratie wordt opgebouwd

  1. 1

    Kies target en module

    De JavaScript-versie die tsc uitstuurt (ES2015 tot en met ES2023, of ESNext) en het modulesysteem (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    Stel moduleResolution en JSX in

    bundler voor Vite/webpack-projecten, node16/nodenext voor modern Node, node of classic voor oudere setups. Zet jsx op react-jsx voor modern React, of laat hem op none staan om de sleutel weg te laten.

  3. 3

    Schakel de vlaggen

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap en forceConsistentCasingInFileNames als simpele checkboxes.

  4. 4

    Bepaal de mappen

    outDir en rootDir, vooraf ingevuld met ./dist en ./src. include en exclude liggen vast op src/**/* plus node_modules en dist.

  5. 5

    Kopieer de gegenereerde tsconfig

    De JSON-preview wordt live bijgewerkt; één klik kopieert hem, klaar om als tsconfig.json in de projectroot te zetten.

De opties die deze generator schrijft

Optie Standaard hier Wat het doet
target ES2022 JavaScript-versie van de uitvoer. ES2022 is veilig voor huidige browsers en Node; kies alleen voor legacy-omgevingen een ouder target.
module ESNext Modulesyntaxis van de uitvoer. Gebruik NodeNext/Node16 voor Node-ESM-projecten, CommonJS voor legacy-Node.
moduleResolution node Hoe imports worden gevonden. Kies liever bundler met Vite/webpack/esbuild en node16/nodenext met modern Node; node (node10) is het oude gedrag.
jsx weggelaten Wordt alleen geschreven als je een modus kiest. react-jsx voor React 17+, preserve wanneer een bundler de JSX transformeert.
strict true Zet de hele strict-familie van controles aan. Laat aan voor nieuwe projecten.
esModuleInterop true Repareert default-imports uit CommonJS-pakketten.
skipLibCheck true Slaat typecontrole van .d.ts-bestanden over; veel snellere compilatie, verbergt zelden echte bugs.
forceConsistentCasingInFileNames true Weigert imports waarvan het hoofdlettergebruik afwijkt van het bestand op schijf (de klassieke breuk bij de overstap van macOS naar Linux).
resolveJsonModule true Maakt import data from "./data.json" mogelijk.
allowJs false Laat .js-bestanden toe in de compilatie; handig midden in een migratie.
declaration false Genereert .d.ts-bestanden; zet aan wanneer je een library publiceert.
sourceMap false Genereert .js.map-bestanden voor debugging.
outDir / rootDir ./dist / ./src Waar de gecompileerde uitvoer terechtkomt en waar de broncode staat.
baseUrl "." Wordt altijd geschreven, zodat een handmatig toegevoegd paths-blok vanaf de projectroot wordt opgelost.

De exacte standaarduitvoer

Laat alle instellingen onaangeroerd en dit is precies het bestand dat je krijgt:

{
    "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"
    ]
}

Kies je een jsx-modus anders dan none, dan wordt er een "jsx"-item aan compilerOptions toegevoegd.

Strict mode: wat het echt aanzet

strict: true is een paraplu-vlag die de hele strict-familie inschakelt, waaronder noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables en alwaysStrict. Nieuwe projecten kunnen het best met alles aan beginnen: strictness achteraf inbouwen is pijnlijk.

Veelgemaakte fouten

  • module: "CommonJS" instellen voor een Node-ESM-project. Staat er "type": "module" in je package.json, gebruik dan NodeNext voor zowel module als moduleResolution.
  • tsc als bundler gebruiken. Het is een compiler en typechecker. Gebruik Vite/esbuild/SWC voor builds en tsc --noEmit voor typecontroles.
  • Alles compileren. Zonder include-lijst pakt TypeScript elk .ts-bestand dat het ziet. De gegenereerde configuratie schrijft altijd include: ["src/**/*"] en sluit node_modules en dist uit, dus je zit goed.
  • Meer nodig hebben dan de configuratie biedt. Deze generator blijft bewust minimaal. Opties als lib, paths, isolatedModules of noEmit voeg je gemakkelijk handmatig toe zodra het basisbestand staat.

Veelgestelde vragen

Voor monorepo’s en projecten met meerdere pakketten: ja. Eén basisbestand met de gedeelde opties, dat elk pakket via “extends” uitbreidt. Voor een repo met één project is één tsconfig.json zoals de gegenereerde eenvoudiger.

Geïntroduceerd in TypeScript 5.0 voor projecten die met Vite, webpack of esbuild bouwen. Het volgt hoe bundlers imports in de praktijk oplossen, zonder de ESM-bestandsextensieregels van node16/nodenext. Voor code die Node rechtstreeks uitvoert, kies je beter node16 of nodenext.

Niet via een eigen invoerveld. Het gegenereerde bestand zet baseUrl wel altijd op “.”, dus je kunt er direct onder een paths-blok plakken, bijvoorbeeld “@/*”: [“src/*”], en dat wordt vanaf de projectroot opgelost.

Meestal niet, en daarom laat deze generator hem weg: target impliceert een bijpassende set librarytypes. Overschrijf lib alleen handmatig voor bijzondere gevallen, zoals DOM-API’s in een Node-project of WebWorker-types.

Je hoeft je niet te registreren en er wordt niets bewaard. Je selecties worden alleen gebruikt om de preview te renderen; in de stap-voor-stapweergave reizen ze ook mee in de pagina-URL, zodat je een afgeronde configuratie makkelijk kunt bookmarken of delen.

Gerelateerde tools

Tool beschikbaar in andere talen