JSON do TypeScript

Darmowe narzędzie online JSON do TypeScript. Automatycznie wnioskuje typy danych JSON do standardowych definicji interfejsów TS. Obsługa zagnieżdżonych pod-interfejsów, unii typów tablic, pól opcjonalnych i readonly, wybór wcięcia 2/4 spacji, przetwarzanie lokalne w przeglądarce bez wysyłania.

Powiązane Rekomendacje

O JSON do TypeScript: automatyczna konwersja danych JSON na typy TS

JSON do TypeScript to proces konwersji danych w formacie JSON (obiektów JSON lub tablic JSON) na deklaracje typów TypeScript interface. JSON (JavaScript Object Notation) jako standardowy format danych dla REST API, plików konfiguracyjnych i logów jest wszechobecny w rozwoju frontend i backend, a TypeScript jest nadzbiorem JavaScript, dodającym do kodu statyczne sprawdzanie typów. W rozwoju często trzeba napisać odpowiedni interfejs TS dla JSON zwracanego przez API, ręczne pisanie jest podatne na błędy i czasochłonne — to narzędzie automatyzuje ten proces.

Rdzeniem narzędzia jest automatyczne wnioskowanie struktury obiektu JSON na interfejs TypeScript. Każdy key obiektu JSON staje się nazwą właściwości interfejsu, każdy typ literałowy value jest mapowany na odpowiadający typ TS: ciąg znaków na `string`, liczba na `number`, wartość logiczna na `boolean`, null na `null`, tablica na `T[]`, zagnieżdżony obiekt na niezależny pod-interfejs. Cały proces odbywa się lokalnie w przeglądarce, bez usługi backend, w ciągu kilku sekund generowana jest pełna, użyteczna definicja typu.

Wnioskowanie typów jest rdzeniem konwersji JSON do TypeScript. Sam JSON ma tylko 6 typów podstawowych (null, boolean, number, string, array, object), podczas gdy podstawowy system typów TypeScript obejmuje string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], typy unii (A | B) itd. Funkcja getTsType naszego narzędzia mapuje według typeof i konkretnej formy value: typeof null mapowane na `null`; typeof undefined mapowane na `undefined`; typeof boolean mapowane na `boolean`; typeof number mapowane na `number`; typeof string mapowane na `string`; gdy Array.isArray() zwraca true, przetwarzane jako tablica.

Obsługa zagnieżdżonych obiektów jest kluczową możliwością narzędzia. Gdy JSON zawiera zagnieżdżone obiekty, narzędzie rekurencyjnie generuje niezależne pod-interfejsy, unikając duplikacji typów. Na przykład `address: { street, city }` wygeneruje pod-interfejs `RootAddress`, a główny interfejs będzie się do niego odwoływał przez `address: RootAddress`. Reguła nazewnictwa pod-interfejsów: „nazwa interfejsu nadrzędnego + pierwsza litera nazwy pola wielką literą", co zachowuje jasność semantyczną. Set processedTypes jest używany do deduplikacji, zagnieżdżone obiekty o tej samej strukturze generują interfejs tylko raz.

Wnioskowanie typów tablic ma trzy tryby przetwarzania. Po pierwsze, gdy tablica jest pusta, generowane jest `any[]` jako wartość domyślna (ponieważ typ elementu nie może być wnioskowany). Po drugie, gdy wszystkie elementy mają ten sam typ, generowana jest forma `T[]` (np. `string[]`, `User[]`). Po trzecie, gdy typy elementów się różnią, generowana jest tablica unii `(A | B)[]` (np. `(string | number)[]`). To rozróżnienie sprawia, że generowane typy są dokładne i czytelne, unikając nadmiernego użycia `any[]`.

Pola opcjonalne (?) to ważna funkcja trybu TypeScript strict. Po włączeniu narzędzie skanuje wartość każdego pola, a jeśli jest null lub undefined, dodaje modyfikator `?` w interfejsie: `name?: string` oznacza, że pole może być pominięte. Jest to bardzo przydatne dla opcjonalnych pól zwracanych przez API backend, pozwalając uniknąć błędów czasu wykonywania przy dostępie do pól undefined. Pola readonly podkreślają niezmienność, wygenerowany kod wygląda jak `readonly id: number`, nadaje się do definiowania konfiguracji, migawek stanu, DTO itd.

interface vs type alias to częsty wybór dla użytkowników TypeScript. To narzędzie wybrało generowanie interface, ponieważ interface to standardowy sposób opisu typów obiektów w TypeScript, obsługujący łączenie deklaracji (declaration merging), słowo kluczowe implements, dziedziczenie extends, co lepiej odpowiada standardom kodowania głównych projektów frontend React, Vue, Angular. type alias jest silniejszy w opisie typów unii, typów skrzyżowanych, typów funkcji, ale dla typów obiektów preferowany jest interface.

Konwersja w czasie rzeczywistym to praktyczna funkcja narzędzia. Po wprowadzeniu JSON przez użytkownika przez 400ms następuje debounce i automatyczne uruchomienie konwersji, bez konieczności klikania przycisku. W połączeniu z podświetlaniem składni TypeScript w CodeMirror (przez opcję typescript: true w @codemirror/lang-javascript), użytkownik może natychmiast zobaczyć wygenerowany interfejs, modyfikować dane wejściowe i obserwować zmiany wyjścia. Ta informacja zwrotna w czasie rzeczywistym znacząco poprawia wydajność projektowania typów, szczególnie podczas szybkiego eksperymentowania.

Automatyczna naprawa błędów JSON zwiększa odporność narzędzia. W praktyce JSON wprowadzany przez użytkowników często ma końcowe przecinki, pojedyncze cudzysłowy, brakujące cudzysłowy, komentarze i inne drobne problemy. Wbudowana funkcja tryFixJSON automatycznie próbuje naprawić typowe błędy, gdy JSON.parse się nie powiedzie, a po pomyślnej naprawie powiadamia użytkownika; jeśli nadal nie można sparsować, po prawej stronie wyświetlane jest konkretne miejsce i przyczyna błędu, prowadząc użytkownika do korekty. Ten projekt podnosi praktyczność narzędzia o klasę, eliminując konieczność powtarzania ręcznych korekt z powodu drobnych błędów.

Czysto frontendowe przetwarzanie to kluczowa architektura tego narzędzia. Całe parsowanie JSON, wnioskowanie typów i generowanie interfejsu odbywa się w JavaScript przeglądarki, żadne dane nie są wysyłane do żadnego serwera. Ten projekt ma dwie kluczowe korzyści: po pierwsze, zawartość JSON może zawierać poufne informacje użytkownika (klucze API, tokeny, dane użytkownika), lokalne przetwarzanie całkowicie eliminuje ryzyko wycieku; po drugie, szybkość konwersji jest ograniczona tylko przez CPU urządzenia, JSON o rozmiarze poniżej 1MB jest konwertowany prawie natychmiastowo, bez czekania na round-trip sieciowy. W porównaniu z niektórymi usługami online wymagającymi rejestracji i logowania, zapewnia to lepszą ochronę prywatności i wydajność.

Przypadki użycia

  • Podczas rozwoju frontend szybka konwersja odpowiedzi JSON z REST API lub GraphQL na interfejs TS, unikając ręcznego definiowania typów.
  • Gdy projekty React/Vue/Angular wymagają deklaracji typów dla Props, State, parametrów komponentów — wygeneruj w kilka sekund z przykładowego JSON.
  • W pełnostackowych projektach TypeScript, gdy frontend i backend współdzielą definicje typów, mock JSON backendu może służyć jako źródło prawdy typów dla frontendu.
  • Podczas integracji z API stron trzecich (paczki, pogoda, płatności itd.) szybkie generowanie odpowiednich interfejsów TypeScript, oszczędzając konieczność studiowania dokumentacji.
  • Wnioskowanie definicji typów z mocków, fikstur testowych, plików konfiguracyjnych JSON w celu wzmocnienia bezpieczeństwa typów i podpowiedzi IDE.
  • Konwersja JSON Schema eksportowanych z ORM bazy danych na interfejsy TypeScript do integracji z definicjami DTO backendu Node.js.
  • Podczas nauki TypeScript konwersja istniejącego JSON na przykład interfejsu, aby zrozumieć składnię typów zagnieżdżonych, unii, pól opcjonalnych.
  • Podczas refaktoryzacji kodu konwersja rozproszonych literałów obiektów JS na formalne interfejsy, zwiększając czytelność kodu i bezpieczeństwo typów.

Jak Używać

  1. Wklej zawartość JSON w lewe pole wejściowe lub kliknij przycisk „Prześlij", aby wybrać plik .json/.txt, lub kliknij „Przykład", aby załadować wbudowany przykład.
  2. Kliknij przycisk nazwy interfejsu po prawej stronie paska narzędzi (lub ikonę zębatki), dostosuj nazwę interfejsu głównego (domyślnie Root), włącz pola opcjonalne/readonly.
  3. Narzędzie automatycznie wykona konwersję (debounce 400ms po wprowadzeniu); po prawej stronie przejrzyj wygenerowany kod interfejsu TypeScript, podświetlanie CodeMirror ułatwia czytanie.
  4. Wybierz styl wcięcia (2 lub 4 spacje), dostosuj szerokość lewego/prawego panelu, aby uzyskać optymalne wrażenia z przeglądania.
  5. Kliknij „Kopiuj", aby skopiować kod TS do schowka, lub „Pobierz", aby zapisać jako plik `${interfaceName}.ts` (np. User.ts).
  6. Wklej kod w katalogu `types/` lub `src/types/` swojego projektu, w razie potrzeby użyj poprzez import.

Funkcje

  • Inteligentne wnioskowanie typów: automatycznie rozpoznaje typy null, boolean, number, string, array, object itd. i mapuje je na natywną składnię TS.
  • Automatyczne rozwijanie zagnieżdżonych obiektów: dla zagnieżdżonych obiektów automatycznie tworzy niezależne pod-interfejsy (np. RootAddress), zachowując przejrzystą hierarchię typów i unikając nadmiarowości.
  • Inteligentne przetwarzanie typów tablic: dla elementów tego samego typu generowane jest `T[]`, dla mieszanych typów generowana jest tablica unii `(A | B)[]`, dla pustych tablic `any[]` jako wartość domyślna.
  • Oznaczanie pól opcjonalnych: po włączeniu automatycznie wykrywa pola null/undefined, dodaje modyfikator `?`, generując kod zgodny z trybem TypeScript strict.
  • Obsługa pól readonly: po włączeniu dodaje modyfikator `readonly` do wszystkich pól, odpowiednie dla stanów niezmiennych, konfiguracji, DTO itd.
  • Niestandardowa nazwa interfejsu: nazwa interfejsu głównego konfigurowalna (domyślnie Root), nazwa pobieranego pliku również używa tej nazwy (np. User.ts).
  • Wybór wcięcia 2/4 spacji: przełączanie jednym kliknięciem na pasku narzędzi między stylami 2 spacji (domyślny ESLint) i 4 spacji.
  • Automatyczna konwersja w czasie rzeczywistym: po wprowadzeniu JSON przez 400ms następuje debounce i automatyczna konwersja, bez klikania przycisku; obsługa wklejania, przesyłania pliku, przykładu — trzy sposoby wprowadzania.
  • Automatyczna naprawa błędów JSON: wbudowana funkcja tryFixJSON automatycznie obsługuje końcowe przecinki, pojedyncze cudzysłowy, brakujące cudzysłowy i inne typowe błędy składniowe.
  • Podświetlanie kodu TypeScript: prawe wyjście używa podświetlania CodeMirror + JavaScript (TypeScript), o wysokiej czytelności.
  • Kopiowanie i pobieranie: jednym kliknięciem kopiowanie do schowka lub pobieranie standardowego pliku .ts do bezpośredniego użycia w projektach frontend.
  • Całkowicie lokalne przetwarzanie w przeglądarce: całe parsowanie JSON, wnioskowanie typów i generowanie interfejsu odbywa się w JavaScript przeglądarki, oryginalne dane nie są wysyłane.

Często Zadawane Pytania

Jak przekonwertować JSON na interfejs TypeScript?

Wklej zawartość JSON w lewe pole wejściowe, narzędzie automatycznie wywnioskuje typ każdego pola (string, number, boolean, array, object itd.) i wygeneruje standardową definicję interfejsu TypeScript. Zagnieżdżone obiekty automatycznie utworzą pod-interfejsy, zachowując przejrzystą hierarchię typów. Konwersja następuje automatycznie po 400ms od wprowadzenia, bez konieczności klikania przycisku.

Czy obsługiwane jest generowanie type alias czy interface?

To narzędzie generuje wyłącznie deklaracje TypeScript interface (type alias nie jest obsługiwany). interface to standardowy sposób opisu typów obiektów w TypeScript, obsługujący łączenie deklaracji (declaration merging) i słowo kluczowe implements, preferowany w projektach frontend React, Vue, Angular.

Jak oznaczyć pola opcjonalne?

Po włączeniu w ustawieniach opcji „Pola opcjonalne (?)" narzędzie automatycznie wykryje pola o wartości null lub undefined i doda modyfikator `?` w interfejsie. Na przykład `name?: string` oznacza, że pole może być pominięte. Wygenerowany kod jest zgodny ze specyfikacją trybu ścisłego TypeScript strict.

Jak wygenerować pola readonly?

Po włączeniu w ustawieniach opcji „Pola readonly" wszystkie pola automatycznie otrzymają modyfikator `readonly`, na przykład `readonly id: number`. Wygenerowany interfejs podkreśla niezmienność, nadaje się do definiowania konfiguracji, migawek stanu lub DTO.

Jak obsługiwane są typy tablic?

Narzędzie analizuje typy elementów tablicy. Jeśli wszystkie elementy mają ten sam typ, generowana jest forma `T[]` (np. `string[]`); jeśli typy się różnią, generowana jest tablica unii `(A | B)[]` (np. `(string | number)[]`); jeśli tablica jest pusta, generowane jest `any[]` jako wartość domyślna.

Czy zagnieżdżone obiekty generują wiele interfejsów?

Tak. Każdy zagnieżdżony obiekt generuje niezależny pod-interfejs, reguła nazewnictwa: „nazwa interfejsu nadrzędnego + pierwsza litera nazwy pola wielką literą". Na przykład, jeśli Root zawiera obiekt address, zostaną wygenerowane oba interfejsy: Root i RootAddress. Pod-interfejsy automatycznie się odwołują, unikając duplikowania definicji typów.

Czy można dostosować nazwę interfejsu?

Tak. Klikając przycisk nazwy interfejsu po prawej stronie paska narzędzi (lub w ustawieniach), można dostosować nazwę interfejsu głównego (domyślnie Root). Pobierany plik .ts również zostanie nazwany zgodnie z tą nazwą (np. `User.ts`). Nazwy pod-interfejsów są generowane automatycznie na podstawie nazwy głównej.

Czy pobrany plik .ts można użyć bezpośrednio w projekcie?

Tak. Wygenerowany kod jest zgodny ze standardami kodowania TypeScript, zawiera pełne definicje typów, zagnieżdżone interfejsy, wnioskowanie typów unii itd., i może być bezpośrednio skopiowany do projektów React, Vue, Angular lub Node.js. Nazwa pobieranego pliku to `${interfaceName}.ts`, np. User.ts.

Co zrobić, gdy parsowanie JSON się nie powiedzie?

Jeśli w JSON występują typowe błędy, takie jak końcowe przecinki, brakujące cudzysłowy, pojedyncze cudzysłowy zamiast podwójnych, narzędzie automatycznie wywoła tryFixJSON, aby spróbować naprawić. Po pomyślnej naprawie użytkownik jest powiadamiany; jeśli nie można naprawić, po prawej stronie wyświetlone zostanie konkretne miejsce i przyczyna błędu. Można ponownie sformatować wcięciem 2/4 spacji i spróbować ponownie.

Jakie struktury danych JSON są obsługiwane?

Obsługiwane są wszystkie prawidłowe struktury danych JSON: typy podstawowe (null, boolean, number, string), tablice (jednowymiarowe lub wielowymiarowe), zagnieżdżone obiekty (dowolna głębokość), tablice z mieszanymi typami (generują typy unii). Nieobsługiwane dane wejściowe: JSON zawierający funkcje, Symbol, undefined i inne specjalne wartości JavaScript (nie są one prawidłowym JSON).

Czy można wybrać liczbę spacji wcięcia?

Tak. Po prawej stronie paska narzędzi znajduje się lista rozwijana ustawień wcięcia, obsługująca style z 2 i 4 spacjami. 2 spacje to styl domyślny ESLint/Prettier, 4 spacje nadają się do projektów wymagających bardziej luźnego wcięcia. Wygenerowany kod zachowuje spójne wcięcie dla łatwości czytania i konserwacji.

Czym różni się od JSON Schema, Zod i innych bibliotek typów?

JSON Schema nadaje się do walidacji danych w czasie wykonywania (granice API, walidacja danych wejściowych użytkownika); Zod/yup to przyjazne dla TypeScript biblioteki walidacji w czasie wykonywania, które mogą generować typy TS ze schematu; nasze narzędzie to lekki generator czystych definicji typów, nie wykonujący walidacji w czasie wykonywania, skoncentrowany na scenariuszach statycznych definicji typów frontendu, szybszy i z zerowymi zależnościami.

Rozwiązywanie problemów

Co zrobić, gdy wygenerowany interfejs jest nieprawidłowy?

Typowe przyczyny: błąd parsowania JSON, błąd rozpoznania zagnieżdżonych obiektów, błąd wnioskowania typu tablicy. Rozwiązania: 1) Sprawdź, czy JSON jest prawidłowy (użyj narzędzia do formatowania JSON); 2) Dla zagnieżdżonych obiektów sprawdź poprawność odwołań pod-interfejsów; 3) Dla tablic sprawdź, czy typy elementów się zgadzają; 4) Wygeneruj ponownie lub ręcznie dostosuj wygenerowany kod. Wygenerowany interfejs jest wstępną wersją, szczegóły należy dostosować do rzeczywistego API projektu.

Pobrany plik .ts powoduje błędy kompilacji w projekcie?

Możliwe przyczyny: 1) tsconfig.json nie ma włączonego trybu strict, ale wygenerowane są pola readonly; 2) Nazwa interfejsu koliduje z innymi typami w projekcie; 3) Nazwa pola jest słowem kluczowym TypeScript (np. `class`, `type`). Rozwiązania: dostosuj ustawienie strict w tsconfig, zmień nazwę interfejsu, dodaj cudzysłowy do kolidujących pól (np. `"class": string`).

JSON zawiera zagnieżdżone tablice, wnioskowanie typu jest nieprawidłowe?

To narzędzie rekurencyjnie przetwarza tablice wielowymiarowe (np. `[[1, 2], [3, 4]]`), ostatecznie generując `number[][]`. Jeśli typy elementów zagnieżdżonej tablicy się różnią, narzędzie wygeneruje formę `((A | B)[])[]`. Puste tablice zawsze generują `any[]`, ponieważ typ elementu nie może być wnioskowany.

Wartość null jest mapowana na typ `null`, a nie na pole opcjonalne?

Domyślnie narzędzie mapuje null w JSON na typ `null` w TS (np. `middleName: null`). Jeśli chcesz wygenerować pole opcjonalne (`middleName?: string`), musisz: 1) Włączyć opcję „Pola opcjonalne" (zalecane); 2) Lub zmienić null w JSON na brak pola; 3) Lub po generacji ręcznie zmienić `null` na `string | null` lub `?`.

Nazwa interfejsu i nazwa pobranego pliku nie są zgodne?

W narzędziu obie są tą samą wartością, kontrolowaną przez ustawienie „Nazwa interfejsu" (domyślnie Root). Nazwa pobranego pliku to `${interfaceName}.ts`. Jeśli wydają się niezgodne, sprawdź, czy nie jest otwartych wiele kart, co może powodować desynchronizację ustawień. Zalecamy ponowne wygenerowanie po zmianie ustawień.

Wygenerowany kod zawiera dużo typów `any`?

Możliwe przyczyny: 1) JSON zawiera nierozpoznawalne typy (faktycznie obiekt, ale sparsowany z błędem); 2) Tablica jest pusta i używana jest wartość domyślna any[]; 3) Wartość pola to null i opcja pól opcjonalnych nie jest włączona. Rozwiązania: sprawdź integralność danych JSON, dodaj przykładowe dane dla lepszego wnioskowania, ręcznie określ typ dla zawsze pustych tablic (np. `User[]`).

Chcę połączyć wygenerowany interfejs z istniejącymi typami?

TypeScript interface obsługuje łączenie deklaracji (declaration merging), interfejsy o tej samej nazwie automatycznie łączą swoje właściwości. Wystarczy utworzyć w projekcie interfejs o tej samej nazwie i go wyeksportować, a następnie połączyć: na przykład narzędzie wygenerowało `export interface User { id: number }`, w projekcie piszesz `export interface User { name: string }`, oba automatycznie połączą się w `{ id: number; name: string }`.

Słownik

JSON (JavaScript Object Notation)
Lekki format wymiany danych, oparty na składni obiektów JavaScript, ale niezależny od języka programowania. Obsługuje 6 typów podstawowych: obiekt ({}), tablica ([]), ciąg znaków, liczba, wartość logiczna, null. Szeroko stosowany w REST API, transmisji danych frontend-backend, plikach konfiguracyjnych, logach itd.
TypeScript
Nadzbiór JavaScript opracowany przez Microsoft, dodający do JavaScript statyczne definicje typów, interfejsy, generyki i inne cechy. Kod TypeScript jest kompilowany do czystego JavaScript i uruchamiany w przeglądarce lub Node.js. Preferowany język dla nowoczesnych projektów frontend React, Vue, Angular.
interface (interfejs)
Słowo kluczowe TypeScript do opisu typów obiektów, składnia: `interface Name { prop: type; }`. Obsługuje łączenie deklaracji (interfejsy o tej samej nazwie automatycznie się łączą), implements (klasa implementuje interfejs), extends (dziedziczenie interfejsu). Główny sposób opisu kształtu obiektów w TypeScript.
type alias
Słowo kluczowe TypeScript do tworzenia aliasów typów, składnia: `type Name = ...`. Może być używane do definiowania typów unii (`A | B`), typów skrzyżowanych (`A & B`), typów funkcji itd. Bardziej elastyczne niż interface, ale nie obsługuje łączenia deklaracji. To narzędzie używa interface, a nie type.
Wnioskowanie typów (Type Inference)
Proces, w którym to narzędzie automatycznie określa odpowiedni typ TS na podstawie typeof i konkretnej formy value JSON. Na przykład typeof string mapowane na string, gdy Array.isArray() zwraca true, przetwarzane jako tablica, gdy typeof object zwraca true, generowany jest niezależny pod-interfejs.
Pole opcjonalne (?)
Modyfikator TypeScript wskazujący, że pole może być pominięte. `name?: string` oznacza, że pole name może nie istnieć (wartość undefined). Po włączeniu opcji „Pola opcjonalne" do pól o wartości null lub undefined automatycznie dodawany jest `?`.
Pole readonly (readonly)
Modyfikator TypeScript wskazujący, że pole jest niezmienne. `readonly id: number` oznacza, że pole id nie może zostać ponownie przypisane po utworzeniu obiektu. Po włączeniu opcji „Pola readonly" do wszystkich pól automatycznie dodawany jest `readonly`.
Typ unii (Union Type)
Składnia TypeScript wskazująca, że wartość może być jednym z kilku typów, zapisywana jako `A | B`. Narzędzie używa jej, gdy typy elementów tablicy się różnią, na przykład `(string | number)[]` oznacza, że elementy tablicy mogą być string lub number.
Typ tablicy (Array Type)
Składnia TypeScript dla tablic, występuje w dwóch formach: generyczna `Array<T>` i skrócona `T[]`. Narzędzie konsekwentnie używa formy skróconej. Narzędzie ma trzy tryby generowania typów tablic: jednorodny `T[]`, mieszany `(A | B)[]`, pusta tablica `any[]`.
Zagnieżdżony interfejs (Nested Interface)
Odwoływanie się do innych interfejsów wewnątrz interfejsu w celu utworzenia hierarchii typów. Narzędzie generuje niezależny pod-interfejs dla każdego zagnieżdżonego obiektu, główny interfejs odwołuje się przez nazwę właściwości. Na przykład Root odwołuje się do RootAddress, RootAddress może być niezależnie odwoływany przez inne typy.
Tryb TypeScript strict
Tryb ścisły kompilatora TypeScript, obejmujący kilka podopcji: noImplicitAny, strictNullChecks, strictFunctionTypes itd. Po włączeniu strictNullChecks, null i undefined są niezależnymi typami i nie mogą być przypisywane do zmiennych innych typów. Pola opcjonalne generowane przez to narzędzie są w pełni kompatybilne z trybem strict.
DTO (Data Transfer Object)
Obiekt transferu danych, używany do przesyłania danych między różnymi warstwami (np. API i warstwa Service). W projektach TypeScript zwykle opisywany przez interface, w połączeniu z readonly podkreśla niezmienność. To narzędzie jest powszechnym narzędziem do generowania definicji typów DTO.
Łączenie deklaracji (Declaration Merging)
Cecha interfejsów TypeScript: interfejsy o tej samej nazwie automatycznie łączą swoje właściwości. Często używane do rozszerzania definicji typów bibliotek stron trzecich. Interfejsy generowane przez to narzędzie mogą być łączone z innymi interfejsami o tej samej nazwie w projekcie, ułatwiając stopniowe rozszerzanie typów.
tsconfig.json
Plik konfiguracyjny projektu TypeScript, znajdujący się w katalogu głównym projektu. Zawiera compilerOptions (target, module, strict itd.), include, exclude i inne ustawienia. Pliki .ts generowane przez to narzędzie mogą być używane w dowolnym standardowym projekcie z tsconfig.
tryFixJSON
Wbudowana funkcja naprawy JSON tego narzędzia, która automatycznie obsługuje końcowe przecinki, zastępowanie podwójnych cudzysłowów pojedynczymi, brakujące cudzysłowy w kluczach, komentarze i inne typowe błędy składniowe JSON. Automatycznie wywoływana, gdy JSON.parse się nie powiedzie, po pomyślnej naprawie powiadamia użytkownika i kontynuuje konwersję.

Reguły mapowania typów JSON na typy TypeScript

Pełne reguły, według których funkcja getTsType naszego narzędzia wnioskuje typy TypeScript na podstawie formy value JSON:

Wartość JSONPrzykładTyp TypeScriptReguła określania
nullnullnullJSON null mapowane bezpośrednio na typ TS null
undefinedundefinedundefinedWartość undefined mapowana na TS undefined (tylko w czasie wykonywania)
booleantrue / falsebooleantypeof boolean mapowane na TS boolean
integer1, 100, -9999numberLiczby całkowite i zmiennoprzecinkowe oba mapowane na TS number
float3.14, -0.5, 1e10numberWszystkie literały liczbowe mapowane na number (TS nie rozróżnia int i float)
string"Alice", "Warszawa"stringtypeof string mapowane na TS string
empty array[]any[]Pusta tablica nie pozwala wnioskować typu elementu, wartość domyślna any[]
homogeneous array[1, 2, 3]T[] (np. number[])Elementy tego samego typu generują pojedynczy typ tablicy
mixed array[1, "a"](A | B)[] (np. (number | string)[])Elementy różnych typów generują typ tablicy unii
object{a: 1, b: "x"}SubInterface (np. Root)Zagnieżdżony obiekt generuje niezależny pod-interfejs z odwołaniem

Porównanie interface vs type alias

Powody, dla których to narzędzie generuje interface zamiast type alias, oraz różnice między nimi w projektach TypeScript:

Wymiar możliwościinterfacetype aliasUwaga
Opis typów obiektów✓ (preferowane)✓ (również obsługiwane)Oba obsługiwane, narzędzie generuje interface
Łączenie deklaracji✓ (automatyczne łączenie tej samej nazwy)✗ (powtórzenie deklaracji = błąd)interface obsługuje stopniowe rozszerzanie, type nie
implements/extends✓ (klasa może implements)△ (tylko obiekt type może być implements)interface jest bardziej naturalny w scenariuszach OOP
Typ unii (A | B)type jest bardziej zwięzły dla typów unii
Typ skrzyżowany (A & B)type jest bardziej zwięzły dla typów skrzyżowanych
Typ funkcji△ (wymaga call signature)✓ (definiowany bezpośrednio)type jest bardziej intuicyjny dla typów funkcji
Wydajność (przy wielu typach)Lekko szybszyLekko wolniejszyinterface jest szybszy przy inkrementalnym łączeniu w czasie kompilacji
Wybór narzędzia✓ KonsekwentnieNarzędzie koncentruje się na typach obiektów, interface jest optymalny

Reguły generowania pól opcjonalnych i readonly

Wpływ dwóch opcji przełącznikowych tego narzędzia na wygenerowany kod i optymalne scenariusze użycia:

OpcjaWarunek wyzwalającyWygenerowana składniaOptymalny scenariusz użycia
Pole opcjonalne (?): wyłączone(domyślnie)name: stringWszystkie pola wymagane, typy ścisłe
Pole opcjonalne (?): włączonevalue === null || value === undefinedname?: stringPola opcjonalne, dane z możliwością pominięcia
Pole readonly (readonly): wyłączone(domyślnie)name: stringTypy ogólne, pola mogą być zapisywane
Pole readonly (readonly): włączoneWszystkie pola przetwarzane jednoliciereadonly name: stringStan niezmienny, konfiguracje, DTO, odpowiedzi API
Oba włączoneSpełnione oba warunkireadonly name?: stringMigawki odpowiedzi API, opcjonalne konfiguracje

Privacy & Security

Wszystkie operacje tego narzędzia JSON do TypeScript są wykonywane całkowicie lokalnie w twojej przeglądarce: parsowanie JSON, wnioskowanie typów i generowanie interfejsu są wykonywane przez JavaScript przeglądarki po stronie klienta, bez wysyłania zawartości JSON, przesłanych plików lub wygenerowanego kodu do jakiegokolwiek serwera przez sieć. Przesyłanie plików używa natywnego API przeglądarki FileReader do bezpośredniego odczytu w pamięci, bez pośredniczących usług. Śledzenie przez Cookie nie jest używane, dane wejściowe użytkownika ani dane użytkowania nie są zbierane. Po zamknięciu lub odświeżeniu strony cała zawartość wejściowa i wyjściowa jest automatycznie czyszczona z pamięci. Nadaje się do przetwarzania JSON zawierającego klucze API, tokeny, wrażliwe dane biznesowe.

Authoritative References