Generator tsconfig.json
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
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
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
Przełącz flagi
strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap i forceConsistentCasingInFileNames jako zwykłe pola wyboru.
-
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
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 wpackage.jsonmasz"type": "module", użyjNodeNextzarówno dlamodule, jak imoduleResolution. - Używanie
tscjako bundlera. To kompilator i weryfikator typów. Do budowania użyj Vite/esbuilda/SWC, atsc --noEmitdo sprawdzania typów. - Kompilowanie wszystkiego. Bez listy
includeTypeScript zbiera każdy widoczny plik.ts. Wygenerowana konfiguracja zawsze zapisujeinclude: ["src/**/*"]i wykluczanode_modulesorazdist, więc jesteś kryty. - Potrzeba czegoś więcej, niż daje konfiguracja. Ten generator celowo pozostaje minimalny. Opcje takie jak
lib,paths,isolatedModulesczynoEmitł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
Tabela ASCII
Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.
Referencja znaków HTML
Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.
Skróty klawiaturowe
Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.
Podgląd Markdown
Pisz w Markdown i obserwuj, jak wyrenderowany HTML aktualizuje się na żywo. Składnia w stylu GitHub z tabelami, listami zadań, ogrodzonymi blokami kodu i automatycznymi odnośnikami.
Formater JavaScript
Formatuj JavaScript, JSX, TypeScript i JSON z konfigurowalnym wcięciem, stylem cudzysłowów, średnikami i przecinkami końcowymi.
Narzędzie odstępów w kodzie Python
Ujednolić wcięcia oraz proste odstępy przy przecinkach i operatorach. To lekka obróbka tekstu, a nie Black, Ruff ani parser Pythona.
Narzędzie jest dostępne w innych językach
- เครื่องมือสร้างไฟล์ tsconfig.json [TH]
- Generador de tsconfig.json [ES]
- 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-generator [NL]
- tsconfig.json Üretici [TR]
- tsconfig.json 生成器 [ZH]
- tsconfig.json Generator [EN]
- Generatore tsconfig.json [IT]
- Генератор tsconfig.json [RU]