Jak wygenerować typy TypeScript z JSON
- Wklej przykładowy JSON. Im więcej elementów zawierają jego tablice, tym lepiej wykrywane są pola opcjonalne i unie typów.
- Ustaw nazwę typu głównego i wybierz
interfacelubtype, zexportireadonlylub bez nich. - Skopiuj kod TypeScript do swojego projektu lub pobierz go jako plik
.ts.
Jak typy TypeScript są wnioskowane z JSON
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null obok innych wartości | unia, np. string | null |
"address": {"city": "Paris"} | osobny interface Address |
"users": [{"id": 1}] | User[] – nazwa elementu jest zamieniana na liczbę pojedynczą |
| klucz, którego brakuje w niektórych elementach tablicy | właściwość opcjonalna key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
Przykład
JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} zamienia się w:
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Zmień nazwę Root na coś znaczącego, np. User lub ApiResponse. Zagnieżdżone obiekty o dokładnie takim samym kształcie – na przykład adres rozliczeniowy i adres dostawy – współdzielą jeden interfejs, a klucze, które nie są poprawnymi identyfikatorami, są ujmowane w cudzysłowy, np. "first-name": string.
Najczęściej zadawane pytania
Interface czy type – co wybrać?
W przypadku kształtów obiektów oba działają tak samo. Interfejsy można rozszerzać i scalać, a aliasy typów mogą też opisywać unie. Wiele zespołów używa interfejsów dla obiektów; trzymaj się stylu przyjętego w Twoim projekcie.
Jak wykrywane są pola opcjonalne?
Obiekty w tej samej tablicy są scalane. Klucz, którego brakuje w niektórych z nich, staje się opcjonalny (key?:), a klucz z wartościami różnych typów staje się unią.
Czy wygenerowane typy walidują dane w czasie działania (runtime)?
Nie. Typy TypeScript znikają w czasie wykonywania kodu. Aby sprawdzać przychodzące dane, wygeneruj JSON Schema z tego samego przykładu za pomocą naszego generatora JSON Schema i waliduj dane względem niego przy użyciu biblioteki do obsługi schematów.
Czy mój JSON jest wysyłany na serwer?
Nie. Typy są generowane w Twojej przeglądarce, więc możesz bezpiecznie wklejać prywatne odpowiedzi API.