Generator konfiguracji TypeScript
Generuj plik tsconfig.json dla projektu TypeScript: strict mode, paths, target, module, lib. Szablony dla React, Node, Next.js.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Opcje włączone
przełączniki formularza ustawione na „Tak”
Opcje w JSON
wpisy w compilerOptions gotowej konfiguracji
Target
wersja JavaScript w wyjściu
Rozmiar JSON
waga pliku tsconfig.json do zapisania
Opisy odpowiadają 1:1 kodowi silnika: przełączniki z formularza wpisują wartości do compilerOptions, a wybrany preset dodaje bazowy zestaw opcji (nadpisywany przełącznikami).
| Opcja | Typ pola | Co robi |
|---|---|---|
| strict | checkbox | włącza rodzinę ścisłych sprawdzeń TypeScript: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis i alwaysStrict — domyślne przykłady narzędzia mają strict = true |
| skipLibCheck | checkbox | pomija sprawdzanie typów w plikach deklaracji zależności (.d.ts) — wyraźnie skraca czas kompilacji |
| esModuleInterop | checkbox | zgodne importy modułów CommonJS (domyślny import z pakietów Node) — zalecane razem z „module” |
| resolveJsonModule | checkbox | zezwala na import plików .json jako modułów z typami |
| sourceMap | checkbox | generuje mapy źródłowe (.map) do debugowania kodu po kompilacji |
| declaration | checkbox | produkuje pliki .d.ts oraz declarationMap — kluczowe dla bibliotek publikowanych do npm |
| incremental | checkbox | kompilacja przyrostowa z plikiem .tsbuildinfo — przelicza tylko zmienione pliki |
| noEmit | checkbox | tylko sprawdzanie typów bez generowania JS — typowe dla projektów Vite/Next, gdzie bundle robi bundler |
| module + target | select | system modułów (esnext/commonjs/nodenext) i wersja JS wyjściowa (ES5…ESNext) zapisywana wielkimi literami |
| paths + baseUrl | tekst | linie „alias => ścieżka” stają się mapowaniem paths; gdy baseUrl pusty, silnik sam wstawia „.” |
| include / exclude | tekst | linie stają się listami; puste uzupełniane wzorcami presetu (np. src, node_modules, dist) |
| Preset | moduleResolution | Pozostałe opcje |
|---|---|---|
| Node.js | moduleResolution: Node | lib: ES2020 — kod pod środowisko Node bez DOM |
| React (bundler) | moduleResolution: Bundler | lib: DOM + DOM.Iterable + ES2020, isolatedModules: true |
| Next.js | moduleResolution: Bundler | jak React plus allowJs: true i noEmit: true (kompilację robi Next) |
| Vue / Svelte | moduleResolution: Bundler | lib: DOM + DOM.Iterable + ES2020, isolatedModules: true |
| Biblioteka / pakiet | moduleResolution: Bundler | declaration + declarationMap: true, outDir: dist, lib: ES2020 |
| Wspólna baza wszystkich | strict + skipLibCheck + esModuleInterop | forceConsistentCasingInFileNames: true — nadpisywane przełącznikami z formularza |
Pole „Dodatkowe opcje (JSON)” jest scalane z compilerOptions na końcu, więc może nadpisać wartości z formularza — sprawdzaj wynik po każdej zmianie.
Warto wiedzieć — tsconfig.json w praktyce
Po co strict
Tryb strict zamienia ciche undefined i niejawne any na błędy kompilacji: strictNullChecks wymusza obsługę braku wartości, a noImplicitAny typowania tam, gdzie TS nie domyśla się typu. Nowe projekty niemal zawsze startują ze strict — łatwiej go włączyć na starcie niż dogonić później.
Target a wsparcie przeglądarek
Target decyduje, jak stary JavaScript powstaje z Twojego kodu: ES5 działa wszędzie, ale produkuje więcej kodu; ES2020 (optional chaining, nullish coalescing) obsługuje ~95% przeglądarek. Przy bundlerach (Vite, esbuild) target w tsconfigu często służy głównie do sprawdzania typów — bundle robi bundler.
Aliasy ścieżek
Wpisy @/* => src/* tworzą mapowanie paths, które rozumie kompilator TS i edytory (skok do definicji). Sam runtime ich nie rozumie — Vite wymaga wpisu w resolve.alias, a Node z module innym niż Bundler odpowiednich ścieżek względnych albo loadera.
include / exclude
Zbyt szerokie include (np. cały katalog z testami i skryptami) wydłuża kompilację i potrafi wygenerować błędy z plików, które nie trafiają do builda. skipLibCheck skraca czas sprawdzania, ale ukrywa problemy w typach zależności — w bibliotekach warto go wyłączyć.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator tsconfig.json — konfiguracja TypeScript online
Generator tsconfig.json tworzy plik konfiguracyjny TypeScript dopasowany do Twojego projektu: React, Node.js, Next.js, Vue, Angular. Ustaw opcje kompilatora przez intuicyjny interfejs i pobierz gotowy tsconfig.json z komentarzami wyjaśniającymi każdą opcję.
Czym jest plik tsconfig.json?
tsconfig.json to plik konfiguracyjny kompilatora TypeScript (tsc). Definiuje: które pliki skompilować (include/exclude/files), opcje kompilatora (compilerOptions) — cel ES, moduły, strict mode, ścieżki, references do innych projektów TypeScript (project references). Plik jest wymagany przy pracy z TypeScript w projekcie — bez niego kompilator używa domyślnych ustawień, które często nie pasują do projektu. Generator tworzy tsconfig.json z dobrymi wartościami domyślnymi dla popularnych frameworków.
Najważniejsze opcje compilerOptions
target — do jakiej wersji ECMAScript kompilować (ES5, ES2020, ESNext). Dla nowoczesnych przeglądarek: ES2020+. Dla Node.js 18+: ES2022. module — system modułów: commonjs (Node.js), esm/esnext (bundlery jak Vite/Webpack), node16/nodenext (nowy standard dla Node.js z ESM). strict — włącza komplet rygorystycznych sprawdzeń typu (noImplicitAny, strictNullChecks etc.) — zawsze zalecane! lib — biblioteki typów (DOM, ES2020, WebWorker). moduleResolution — algorytm rozwiązywania modułów: node (classic), bundler (Vite/Webpack), node16 (Node.js ESM). paths — aliasy ścieżek (np. @/components → ./src/components).
Konfiguracja dla popularnych frameworków
React + Vite: target: ES2020, module: ESNext, moduleResolution: bundler, jsx: react-jsx, strict: true. Next.js: extends "@next/typescript" (Next.js dostarcza własny base config), plugins: next. Node.js: target: ES2022, module: node16 lub commonjs, moduleResolution: node16, types: node. Angular: target: ES2022, module: ES2022, experimentalDecorators: true, emitDecoratorMetadata: true. Generator wybiera właściwe ustawienia po wyborze frameworku.
strict mode — co włącza?
Flaga "strict": true włącza zestaw sprawdzeń: noImplicitAny — błąd gdy typ jest niejawnie any, strictNullChecks — null i undefined traktowane jako osobne typy, strictFunctionTypes — rygorystyczne sprawdzanie typów funkcji, strictBindCallApply — sprawdzanie bind/call/apply, strictPropertyInitialization — klasy muszą inicjalizować wszystkie właściwości, noImplicitThis — this musi mieć explicite typ, alwaysStrict — "use strict" w każdym pliku. Strict mode eliminuje całą klasę błędów runtime — zawsze go używaj w nowych projektach.
Najczęściej zadawane pytania
Jak zacząć projekt TypeScript z tsconfig?
1. npm init -y, 2. npm install typescript --save-dev, 3. npx tsc --init (generuje tsconfig.json z domyślnymi ustawieniami i komentarzami), lub użyj naszego generatora dla zaawansowanych opcji. 4. Twórz pliki .ts i kompiluj: npx tsc. Dla projektów React/Vite: npm create vite@latest myapp -- --template react-ts — gotowy projekt z tsconfig.
Jaka jest różnica między moduleResolution: node a bundler?
"node" (classyczny) — emuluje algorytm Node.js CommonJS, szuka pliku lub index.ts. "bundler" (Vite 5+/TS 5.0+) — nowszy tryb, zakłada że bundler obsłuży resolwowanie, pozwala na extensions w importach, obsługuje exports field w package.json. "node16/nodenext" — dla natywnego ESM w Node.js, wymaga rozszerzeń .js w importach. Dla projektów Vite/webpack: używaj "bundler". Dla Node.js z CommonJS: "node". Dla Node.js z ESM: "node16".
Jak skonfigurować aliasy ścieżek (@/...) w TypeScript?
tsconfig.json: "baseUrl": "./src", "paths": {"@/*": ["./*"]}. Dla Vite: też dodaj w vite.config.ts: resolve: { alias: { '@': path.resolve(__dirname, './src') } }. Dla webpack (CRA): craco.config.js lub eject. Uwaga: TypeScript paths to tylko wskazówki dla kompilatora — bundler też musi wiedzieć o aliasach (nie są automatycznie przenoszone).
Co oznacza "Cannot find module" w TypeScript?
Możliwe przyczyny: brak @types/PACKAGE (npm install @types/lodash --save-dev), brak typeRoots w tsconfig, niepoprawny moduleResolution, brak .d.ts deklaracji dla biblioteki (starsze pakiety). Rozwiązanie: sprawdź czy pakiet ma @types/NAZWA, lub stwórz własną deklarację: declare module 'nazwa-pakietu' w pliku .d.ts w projekcie.
Jak sprawdzić typy bez kompilacji (tsc --noEmit)?
npx tsc --noEmit — sprawdza typy i wypisuje błędy bez generowania plików .js. Idealne do CI/CD pipeline: {"scripts": {"typecheck": "tsc --noEmit"}}. Dla watch mode: npx tsc --noEmit --watch. Alternatywnie: ts-prune (nieużywane exporty), tsd (testowanie typów), type-coverage (procent pokrycia typami).