Zamień przykładowy JSON na gotowe typy TypeScript
Masz odpowiedź JSON z API i potrzebujesz typu TypeScript. Teraz. Bez przepisywania każdego pola ręcznie, bez pominięcia zagnieżdżonego obiektu trzy poziomy w dół, bez zapomnienia, że pole bywa `null`. Wklejasz JSON po lewej, dostajesz czysty `interface` po prawej.
Generator wykrywa zagnieżdżone obiekty i każdemu daje własną nazwaną definicję. Przechodzi tablice, wybiera typ elementu i emituje `User[]` zamiast jednego długiego inline'a. Jeśli klucze bywają null albo brakuje ich w niektórych obiektach, dodaje znacznik `?`. Jeśli tablica zawiera obiekty z lekko różniącymi się polami, łączy je w jeden kształt i oznacza różnice jako opcjonalne.
Cztery formaty wyjściowe: `interface` TypeScript, alias `type` TypeScript, schemat Zod (z `z.infer` dla typu statycznego), albo dokument JSON Schema (do OpenAPI, AJV, testów kontraktowych). Wszystko liczone w przeglądarce, JSON nie opuszcza Twojego komputera.
Jak używać
- Wklej JSON do panelu po lewej. Domyślnie wgrywa się przykład odpowiedzi z API zamówienia, żebyś od razu zobaczył, jak działa generator.
- Wybierz format wyjściowy: interface (codzienny), alias type (gdy chcesz złożyć z uniami albo typami mapowanymi), Zod (gdy potrzebujesz walidacji w runtime), albo JSON Schema (do specyfikacji OpenAPI i testów kontraktowych).
- Ustaw nazwę głównego typu (domyślnie `Root`). Dobre nazwy: `User`, `Order`, `ApiResponse`. Generator użyje Twojej nazwy dla typu najwyższego poziomu i wyprowadzi nazwy potomków z kluczy (np. `customer` zostanie `Customer`).
- Włącz `unknown` zamiast `any` dla bezpieczniejszych typów: puste tablice staną się `unknown[]` zamiast `any[]`, system typów wymusi zawężenie, zanim dotkniesz wartości.
- Oznaczaj jako opcjonalne na podstawie null jeśli Twoje API czasem zwraca `"phone": null`: generator zrobi `phone?: string` zamiast `phone: string | null`. Wyłącz, jeśli chcesz mieć jawne `null` w typie.
- Zamień klucze na camelCase jeśli JSON używa snake_case (`created_at`), a Twój kod TypeScript używa camelCase (`createdAt`). Oryginalna nazwa zostaje w komentarzu, żebyś pamiętał, co przyleciało z serwera.
- Łącz podobne kształty gdy tablica zawiera obiekty z trochę różnymi polami. Bez tego dostajesz rozwlekłą unię, z tym jeden czysty kształt z `?` w miejscu różnic.
- Kliknij `Kopiuj` żeby wrzucić wynik do schowka, albo `Pobierz plik` żeby zapisać jako `.ts` (albo `.json` dla JSON Schema). Wklejasz do projektu, gotowe.
Kiedy się przydaje
Pięć sytuacji, w których to oszczędza 10 minut ręcznego przepisywania:
- Podłączasz nowy endpoint API. Strzelasz do `/api/orders` i dostajesz tłustą odpowiedź JSON. Wklejasz tu, dostajesz interfejsy `Order`, `Customer`, `Item` w trzy sekundy. Wrzucasz je do `types.ts`, Twój kod od razu podpowiada każde pole.
- Migrujesz nietypowany JavaScript do TypeScripta. Stary kod czyta pliki JSON i zakłada kształt. Wklejasz jeden przykład tutaj, dostajesz typy, wrzucasz je na górę pliku: kompilator znajduje każde miejsce, gdzie ktoś dotyka brakującego albo złego pola.
- Budujesz schemat Zod dla formularza. Znasz kształt, którego chcesz (z przykładowego JSON-a), potrzebujesz walidacji w runtime. Przełącz na tryb Zod, dostajesz `z.object({...})` z odpowiednimi walidatorami, wklejasz do biblioteki formularzy (React Hook Form, Formik, TanStack Form).
- Piszesz spec OpenAPI z prawdziwej odpowiedzi. Backend już zwraca JSON, musisz to opisać w OpenAPI. Przełącz na tryb JSON Schema, dostajesz dokument Draft 2020-12 z `$defs`, wklejasz pod sekcję odpowiedzi swojego endpointa. Gotowe.
- Dzielisz się kontraktem z frontendem. Masz payload JSON, musisz powiedzieć drugiej stronie, czego ma się spodziewać. Generujesz interface, wklejasz do wiadomości na Slacku albo do doca, oba zespoły mają jedno źródło prawdy.
Pracujesz z prawdziwym specem? Pełne typy żądań i odpowiedzi wygenerujesz w OpenAPI → TypeScript, a dla SDL skorzystaj z GraphQL → TypeScript.