Generator TSConfig

Generuj tsconfig.json dla dowolnego projektu TypeScript. Presety dla Node 18/20/22, Next.js, React, bibliotek — z wyjaśnieniem każdej opcji kompilatora.

Comma-separated glob patterns

Comma-separated glob patterns

O tym narzedziu

Plik tsconfig.json kontroluje, jak kompilator TypeScript przetwarza twój kod — jaką wersję JavaScript generować, jakiego systemu modułów używać, jak ścisłe ma być sprawdzanie typów i gdzie szukać plików źródłowych. Prawidłowa konfiguracja tsconfig ma znaczenie. Źle ustawiony target oznacza, że dostarczasz polyfille, których nie potrzebujesz, lub używasz składni, której twoje środowisko nie obsługuje. Złe ustawienia modułów psują importy. Brakujące flagi strict przepuszczają błędy. Ten generator daje ci sprawdzone w boju presety dla najpopularniejszych konfiguracji — Node.js (18, 20, 22), Next.js, React z Vite i biblioteki npm — a potem pozwala dostroić każdą opcję. Wygenerowana konfiguracja jest gotowa do wklejenia do projektu.

Jak uzywac

1. Wybierz preset pasujący do twojego projektu (Node 20, Next.js, React itp.) 2. Dostosuj poszczególne opcje kompilatora według potrzeb — target, module, strictness, paths 3. tsconfig.json aktualizuje się w czasie rzeczywistym podczas zmieniania ustawień 4. Kliknij "Kopiuj", by skopiować konfigurację do schowka, lub "Pobierz", by zapisać plik 5. Wklej do katalogu głównego projektu jako tsconfig.json

Czesto zadawane pytania

Jakiego tsconfig użyć dla Node 18?
Dla Node 18 użyj target: ES2023, module: NodeNext i moduleResolution: NodeNext. To odpowiada natywnej obsłudze JavaScript w Node 18 i systemowi modułów ESM. Preset Node 18 w tym generatorze ustawia wszystkie te opcje automatycznie.
Jaka jest różnica między module NodeNext a ESNext?
NodeNext stosuje zasady rozwiązywania modułów Node.js — respektuje 'exports' w package.json i wymaga rozszerzeń plików w importach. ESNext zakłada, że bundler (jak Vite lub webpack) obsłuży rozwiązywanie modułów. Używaj NodeNext dla aplikacji Node.js, ESNext dla bundlowanych aplikacji frontendowych.
Co robi moduleResolution Bundler?
moduleResolution: Bundler mówi TypeScript, by rozwiązywał importy tak, jak robią to nowoczesne bundlery (Vite, webpack, esbuild) — bez wymaganych rozszerzeń plików, obsługa 'exports' z package.json. Używaj dla projektów frontendowych budowanych bundlerem. Nie używaj dla aplikacji Node.js działających bez bundlera.
Czy powinienem włączyć tryb strict?
Tak, dla każdego nowego projektu. Tryb strict włącza strictNullChecks, noImplicitAny, strictFunctionTypes i inne sprawdzenia, które wyłapują prawdziwe błędy. Wyłączanie strict w starszych bazach kodu jest zrozumiałe, ale nowe projekty powinny zawsze zaczynać z strict: true.
Jaka jest różnica między target a lib?
target kontroluje, jaką składnię JavaScript kompilator generuje (arrow functions, async/await itp.). lib kontroluje, które definicje typów są dostępne (Promise, Map, API DOM itp.). Dla Node.js typowo chcesz lib: ['ES2023'] bez DOM. Dla przeglądarek dodajesz 'DOM' i 'DOM.Iterable'.
Czy potrzebuję skipLibCheck: true?
skipLibCheck: true pomija sprawdzanie typów plików deklaracji .d.ts, co znacząco przyspiesza kompilację. Jest zalecane dla większości projektów, ponieważ pliki deklaracji z node_modules mogą mieć konfliktowe typy, których naprawianie nie jest twoim problemem.
Co robi verbatimModuleSyntax?
verbatimModuleSyntax wymusza używanie 'import type' dla importów tylko typów i zachowuje składnię import/export dokładnie tak, jak napisana. Zastępuje starsze opcje importsNotUsedAsValues i preserveValueImports. To nowoczesny sposób obsługi importów typów w TypeScript 5+.

Powiazane narzedzia