tsconfig.json-generator

Resultat

tsconfig.json har långt över hundra kompilatoralternativ och varje TypeScript-tutorial visar en annan kombination. Den här generatorn håller sig till dem som spelar roll i de flesta projekt: target, module, moduleResolution, jsx, de vanliga booleska flaggorna (strict, esModuleInterop, skipLibCheck med flera) och mapparna outDir/rootDir. Förhandsvisningen av tsconfig.json uppdateras live vid varje ändring; kopiera den till projektets rot så har du en ren config utan de döda alternativ som de flesta mallar släpar med sig.

Så byggs konfigurationen

  1. 1

    Välj target och module

    JavaScript-versionen som tsc matar ut (ES2015 till ES2023, eller ESNext) och modulsystemet (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    Ställ in moduleResolution och JSX

    bundler för Vite/webpack-projekt, node16/nodenext för modern Node, node eller classic för äldre uppsättningar. Sätt jsx till react-jsx för modern React, eller låt den stå på none så utelämnas nyckeln.

  3. 3

    Växla flaggorna

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap och forceConsistentCasingInFileNames som enkla kryssrutor.

  4. 4

    Bestäm mapparna

    outDir och rootDir, förifyllda med ./dist och ./src. include och exclude ligger fast på src/**/* plus node_modules och dist.

  5. 5

    Kopiera den genererade tsconfig

    JSON-förhandsvisningen uppdateras live; ett klick kopierar den, redo att läggas i projektets rot som tsconfig.json.

Alternativen som generatorn skriver

Alternativ Standard här Vad det gör
target ES2022 JavaScript-version på den utmatade koden. ES2022 är säkert för dagens webbläsare och Node; välj äldre target bara för legacy-miljöer.
module ESNext Modulsyntax i utdata. Använd NodeNext/Node16 för Node-ESM-projekt, CommonJS för äldre Node.
moduleResolution node Hur importer hittas. Föredra bundler med Vite/webpack/esbuild och node16/nodenext med modern Node; node (node10) är det historiska beteendet.
jsx utelämnas Skrivs bara när du väljer ett läge. react-jsx för React 17+, preserve när en bundler transformerar JSX.
strict true Slår på hela strict-familjen av kontroller. Låt den vara på i nya projekt.
esModuleInterop true Fixar default-importer från CommonJS-paket.
skipLibCheck true Hoppar över typkontroll av .d.ts-filer; mycket snabbare kompilering, döljer sällan riktiga buggar.
forceConsistentCasingInFileNames true Avvisar importer vars skiftläge inte matchar filen på disk (klassiska felet vid flytt från macOS till Linux).
resolveJsonModule true Tillåter import data from "./data.json".
allowJs false Släpper in .js-filer i kompileringen; praktiskt mitt i en migrering.
declaration false Matar ut .d.ts-filer; slå på när du publicerar ett bibliotek.
sourceMap false Matar ut .js.map-filer för felsökning.
outDir / rootDir ./dist / ./src Vart den kompilerade koden hamnar och var källkoden ligger.
baseUrl "." Skrivs alltid, så att ett handtillagt paths-block löses från projektets rot.

Exakt standardutdata

Låt alla kontroller vara orörda så får du exakt den här filen:

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

Väljer du ett jsx-läge annat än none läggs en "jsx"-post till i compilerOptions.

Strict mode: vad det faktiskt slår på

strict: true är en paraplyflagga som aktiverar hela strict-familjen, däribland noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables och alwaysStrict. Nya projekt bör starta med allt på: att skruva åt strictness i efterhand är plågsamt.

Vanliga misstag

  • Att sätta module: "CommonJS" för ett Node-ESM-projekt. Om din package.json säger "type": "module", använd NodeNext för både module och moduleResolution.
  • Att använda tsc som bundler. Det är en kompilator och typkontrollant. Använd Vite/esbuild/SWC för byggen och tsc --noEmit för typkontroller.
  • Att kompilera allt. Utan en include-lista plockar TypeScript upp varje .ts-fil den ser. Den genererade configen skriver alltid include: ["src/**/*"] och exkluderar node_modules och dist, så du är täckt.
  • Att behöva mer än configen erbjuder. Generatorn hålls medvetet minimal. Alternativ som lib, paths, isolatedModules eller noEmit är lätta att lägga till för hand när basfilen väl är på plats.

Vanliga frågor

För monorepos och flerpaketsprojekt, ja: en basfil med de delade alternativen som varje paket utökar via “extends”. För ett repo med ett enda projekt är en enda tsconfig.json som den genererade enklare.

Infördes i TypeScript 5.0 för projekt som byggs med Vite, webpack eller esbuild. Den speglar hur bundlers faktiskt löser importer, utan ESM-filändelsereglerna från node16/nodenext. För kod som körs direkt av Node, välj hellre node16 eller nodenext.

Inte via en egen kontroll. Men den genererade filen sätter alltid baseUrl till “.”, så du kan klistra in ett paths-block direkt under, till exempel “@/*”: [“src/*”], och det löses från projektets rot.

Oftast inte, och därför utelämnar generatorn den: target antyder en matchande uppsättning bibliotekstyper. Åsidosätt lib för hand bara i specialfall, som DOM-API:er i ett Node-projekt eller WebWorker-typer.

Ingen registrering behövs och inget sparas. Dina val används bara för att rendera förhandsvisningen, och i steg-för-steg-vyn följer de även med i sidans URL, vilket gör en färdig config lätt att bokmärka eller dela.

Relaterade verktyg

Verktyget finns på andra språk