Generator tsconfig.json

Wyniki

tsconfig.json ma grubo ponad sto opcji kompilatora, a każdy poradnik TypeScript pokazuje inną kombinację. Ten generator trzyma się tych, które liczą się w większości projektów: target, module, moduleResolution, jsx, popularne flagi logiczne (strict, esModuleInterop, skipLibCheck i spółka) oraz katalogi outDir/rootDir. Podgląd tsconfig.json aktualizuje się na żywo przy każdej zmianie; skopiuj go do katalogu głównego projektu, a dostaniesz czystą konfigurację bez martwych opcji, jakie dorzuca większość boilerplate.

Jak budowana jest konfiguracja

  1. 1

    Wybierz target i module

    Wersja JavaScriptu, którą emituje tsc (od ES2015 do ES2023 lub ESNext), oraz system modułów (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    Ustaw moduleResolution i JSX

    bundler dla projektów z Vite/webpackiem, node16/nodenext dla nowoczesnego Node, node lub classic dla starszych konfiguracji. Ustaw jsx na react-jsx dla nowoczesnego Reacta albo zostaw none, by pominąć ten klucz.

  3. 3

    Przełącz flagi

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap i forceConsistentCasingInFileNames jako zwykłe pola wyboru.

  4. 4

    Ustal katalogi

    outDir i rootDir, wstępnie ustawione na ./dist i ./src. include i exclude są stałe: src/**/* oraz node_modules i dist.

  5. 5

    Skopiuj wygenerowany tsconfig

    Podgląd JSON aktualizuje się na żywo; jedno kliknięcie kopiuje go, gotowego do wrzucenia do katalogu głównego projektu jako tsconfig.json.

Opcje, które zapisuje ten generator

Opcja Domyślnie tutaj Co robi
target ES2022 Wersja JavaScriptu w emitowanym kodzie. ES2022 jest bezpieczna dla obecnych przeglądarek i Node; starszy target wybieraj tylko dla środowisk legacy.
module ESNext Składnia modułów w wyniku. Użyj NodeNext/Node16 dla projektów Node z ESM, CommonJS dla starego Node.
moduleResolution node Sposób lokalizowania importów. Preferuj bundler z Vite/webpackiem/esbuildem i node16/nodenext z nowoczesnym Node; node (node10) to zachowanie historyczne.
jsx pomijana Zapisywana tylko po wybraniu trybu. react-jsx dla Reacta 17+, preserve, gdy JSX transformuje bundler.
strict true Włącza całą rodzinę ścisłych sprawdzeń. W nowych projektach zostaw włączone.
esModuleInterop true Naprawia domyślne importy z pakietów CommonJS.
skipLibCheck true Pomija sprawdzanie typów w plikach .d.ts; dużo szybsza kompilacja, rzadko ukrywa realne błędy.
forceConsistentCasingInFileNames true Odrzuca importy o innej wielkości liter niż plik na dysku (klasyczna awaria przy przejściu z macOS na Linux).
resolveJsonModule true Pozwala na import data from "./data.json".
allowJs false Dopuszcza pliki .js w kompilacji; przydatne w trakcie migracji.
declaration false Emituje pliki .d.ts; włącz przy publikowaniu biblioteki.
sourceMap false Emituje pliki .js.map do debugowania.
outDir / rootDir ./dist / ./src Dokąd trafia skompilowany kod i gdzie leżą źródła.
baseUrl "." Zawsze zapisywana, dzięki czemu ręcznie dodany blok paths rozwiązuje się od katalogu głównego projektu.

Dokładny domyślny wynik

Zostaw wszystkie kontrolki bez zmian, a dostaniesz dokładnie ten plik:

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

Wybierz tryb jsx inny niż none, a do compilerOptions zostanie dopisany wpis "jsx".

Tryb strict: co naprawdę włącza

strict: true to flaga parasolowa, która włącza całą rodzinę strict, w tym noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables i alwaysStrict. Nowe projekty powinny startować ze wszystkim włączonym: dokładanie rygoru później jest bolesne.

Częste błędy

  • Ustawienie module: "CommonJS" dla projektu Node z ESM. Jeśli w package.json masz "type": "module", użyj NodeNext zarówno dla module, jak i moduleResolution.
  • Używanie tsc jako bundlera. To kompilator i weryfikator typów. Do budowania użyj Vite/esbuilda/SWC, a tsc --noEmit do sprawdzania typów.
  • Kompilowanie wszystkiego. Bez listy include TypeScript zbiera każdy widoczny plik .ts. Wygenerowana konfiguracja zawsze zapisuje include: ["src/**/*"] i wyklucza node_modules oraz dist, więc jesteś kryty.
  • Potrzeba czegoś więcej, niż daje konfiguracja. Ten generator celowo pozostaje minimalny. Opcje takie jak lib, paths, isolatedModules czy noEmit łatwo dopisać ręcznie, gdy plik bazowy już jest.

Najczęściej zadawane pytania

W monorepo i projektach wielopakietowych tak: jeden plik bazowy ze wspólnymi opcjami, a każdy pakiet rozszerza go przez “extends”. Dla repozytorium z jednym projektem prostszy jest pojedynczy tsconfig.json, taki jak wygenerowany.

Wprowadzone w TypeScript 5.0 dla projektów budowanych Vite, webpackiem lub esbuildem. Odzwierciedla to, jak bundlery naprawdę rozwiązują importy, bez reguł rozszerzeń plików ESM z node16/nodenext. Dla kodu uruchamianego bezpośrednio przez Node wybierz node16 albo nodenext.

Nie ma do tego osobnej kontrolki. Wygenerowany plik zawsze ustawia jednak baseUrl na “.”, więc możesz wkleić blok paths tuż pod spodem, na przykład “@/*”: [“src/*”], i będzie rozwiązywany od katalogu głównego projektu.

Zwykle nie i dlatego ten generator to pomija: target implikuje pasujący zestaw typów bibliotek. Nadpisuj lib ręcznie tylko w szczególnych przypadkach, jak API DOM w projekcie Node albo typy WebWorker.

Rejestracja nie jest potrzebna i nic nie jest zapisywane. Twoje wybory służą wyłącznie do wyrenderowania podglądu konfiguracji, a w widoku krok po kroku wędrują też w adresie URL strony, dzięki czemu gotową konfigurację łatwo dodać do zakładek lub udostępnić.

Powiązane narzędzia

Narzędzie jest dostępne w innych językach