Jak używać
- Wklej JSON do pola wejściowego, otwórz plik .json lub wypróbuj przykład.
- Ustaw nazwę typu głównego, na przykład Order lub ApiResponse.
- Wybierz deklaracje `interface` lub `type` oraz czy dodać `export` i `readonly`.
- Skopiuj wygenerowany TypeScript lub pobierz go jako types.ts.
Jak to działa
Generator analizuje cały dokument JSON i rejestruje rodzaje wartości znalezione w każdym miejscu. Każdy obiekt JSON staje się osobną nazwaną deklaracją. Nazwa pochodzi od klucza właściwości zapisanego w notacji PascalCase, więc „shipping_address” staje się ShippingAddress. Elementy tablicy otrzymują nazwę od liczby pojedynczej klucza: „items” daje Item, „categories” daje Category, a klucze, które nie wyglądają na liczbę mnogą, otrzymują przyrostek „Item”.
Wszystkie obiekty w jednej tablicy są scalane w jeden interfejs. Jeśli klucz występuje tylko w niektórych z nich, jest oznaczany jako opcjonalny znakiem „?”. Jeśli wartość ma różne typy w różnych miejscach, typ jest unią, np. string | number. null jest zachowywany jako osobny typ, więc pole, które czasami ma wartość null, staje się string | null. Pusta tablica staje się unknown[], ponieważ nie ma z czego wnioskować. Dwa obiekty o dokładnie takich samych właściwościach i typach współdzielą jeden interfejs zamiast tworzyć duplikaty. Klucze, które nie są poprawnymi identyfikatorami, np. „first-name”, są zapisywane w cudzysłowie.
Wynik opisuje tylko wklejoną próbkę. Pole, które w rzeczywistości jest opcjonalne lub może mieć wartość null, będzie wymagane i nie dopuszcza wartości null, jeśli próbka tego nie pokazuje, a daty są zwykłymi ciągami znaków. Przed użyciem sprawdź typy z dokumentacją API.
Przykłady
Typowanie odpowiedzi API
Wklej zamówienie z API swojego sklepu z nazwą główną Order. Otrzymasz interfejsy Order, Customer, Item i Shipping, z note?: string w Item, ponieważ tylko jeden z dwóch elementów ma notatkę.
Konfiguracja tylko do odczytu
Wklej config.json, zaznacz „Ustaw właściwości tylko do odczytu” i wklej wynik do config.d.ts, aby przypadkowe zapisy do konfiguracji były wychwytywane przez kompilator.
Tablica na najwyższym poziomie
Endpoint listy zwraca [{…}, {…}]. Przy nazwie głównej Product wynik zaczyna się od „export type Product = ProductItem[];”, a po nim następuje interfejs ProductItem.
Często zadawane pytania
Dlaczego pole w wyniku jest opcjonalne?
Ponieważ co najmniej jeden obiekt w tej samej tablicy nie ma tego klucza. Jeśli każdy obiekt go ma, pole jest wymagane. Wklej kilka rekordów, aby uzyskać dokładniejsze pola opcjonalne.
Dlaczego data jest typowana jako string?
JSON nie ma typu daty, więc daty są przesyłane jako ciągi znaków. Generator nie odgaduje formatów. Zmień typ samodzielnie, jeśli Twój kod konwertuje je na obiekty Date.
Jaka jest różnica między `interface` a `type`?
Dla kształtów obiektów działają prawie tak samo. Interfejsy można rozszerzać i scalać późniejszymi deklaracjami; aliasów typów nie można ponownie otwierać. Wybierz styl, którego używa już Twoja baza kodu.
Czy potrafi generować walidację w czasie działania, np. schematy Zod?
Nie. Generuje wyłącznie deklaracje TypeScript, które są sprawdzane w czasie kompilacji i nie walidują danych w czasie działania.
Prywatność
Twój JSON jest analizowany wyłącznie w Twojej przeglądarce. Nic nie jest przesyłane, przechowywane ani uwzględniane w analityce.