Tsconfig.json-generator
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
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
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
Schakel de vlaggen
strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap en forceConsistentCasingInFileNames als simpele checkboxes.
-
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
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 jepackage.json, gebruik danNodeNextvoor zowelmodulealsmoduleResolution.tscals bundler gebruiken. Het is een compiler en typechecker. Gebruik Vite/esbuild/SWC voor builds entsc --noEmitvoor typecontroles.- Alles compileren. Zonder
include-lijst pakt TypeScript elk.ts-bestand dat het ziet. De gegenereerde configuratie schrijft altijdinclude: ["src/**/*"]en sluitnode_modulesendistuit, dus je zit goed. - Meer nodig hebben dan de configuratie biedt. Deze generator blijft bewust minimaal. Opties als
lib,paths,isolatedModulesofnoEmitvoeg 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
ASCII-tabelreferentie
Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.
HTML-tekenreferentie
Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.
JSON naar PHP-array
Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.
Luhn-algoritme-checker
Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.
Sneltoetsenoverzicht
Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.
JavaScript-obfuscator
Obfusceer JavaScript met string-array-codering, hernoemen van variabelen, control-flow-flattening en injectie van dode code ter bescherming van de front-end.
Tool beschikbaar in andere talen
- เครื่องมือสร้างไฟล์ tsconfig.json [TH]
- Generador de tsconfig.json [ES]
- Generator tsconfig.json [PL]
- tsconfig.json ジェネレーター [JA]
- Gerador de tsconfig.json [PT]
- tsconfig.json-generator [SV]
- Bộ tạo tsconfig.json [VI]
- مولد ملف tsconfig.json [AR]
- Générateur de tsconfig.json [FR]
- tsconfig.json-Generator [DE]
- Generator tsconfig.json [ID]
- tsconfig.json 생성기 [KO]
- tsconfig.json Üretici [TR]
- tsconfig.json 生成器 [ZH]
- tsconfig.json Generator [EN]
- Generatore tsconfig.json [IT]
- Генератор tsconfig.json [RU]