Generator konfiguracji TypeScript

Generuj plik tsconfig.json dla projektu TypeScript: strict mode, paths, target, module, lib. Szablony dla React, Node, Next.js.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Zestaw ustawień (preset)

Moduł

Wersja docelowa (target)

JSX

Nazwa projektu

Tryb strict Opcja narzędzia

Pomiń sprawdzanie bibliotek (skipLibCheck) Opcja narzędzia

Interoperacyjność modułów ES (esModuleInterop) Opcja narzędzia

Import plików JSON (resolveJsonModule) Opcja narzędzia

Mapy źródłowe (sourceMap) Opcja narzędzia

Pliki deklaracji (.d.ts) Opcja narzędzia

Kompilacja przyrostowa (incremental) Opcja narzędzia

Bez generowania plików wyjściowych (noEmit) Opcja narzędzia

Bazowy URL (baseUrl)

Mapowania ścieżek (paths)

Katalog źródłowy (rootDir)

Katalog wyjściowy (outDir)

Typy (types)

Uwzględnij pliki (include)

Wyklucz pliki (exclude)

Dodatkowe opcje (JSON)

38 znaków

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

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).