Konwerter JSON na interfejs TypeScript i schemat Zod | We.Inc
Wklej JSON i dostań od razu interfejsy TypeScript oraz schemat Zod. Tablice są scalane, więc pola, których brakuje w niektórych elementach, stają się opcjonalne. Nic nie opuszcza Twojej przeglądarki.
Wklej dowolną próbkę JSON, a ten konwerter zapisze interfejsy TypeScript do sprawdzania w czasie kompilacji i schemat Zod do sprawdzania danych w czasie działania. Zagnieżdżone obiekty dostają własne nazwane typy, tablice obiektów są scalane, więc pola nieobecne w niektórych elementach stają się opcjonalne, a konwersja odbywa się lokalnie, więc prywatne dane zostają na Twoim komputerze.
Jak wartości JSON przekładają się na typy
Wartość JSON
TypeScript
Zod
"text"
z.string()
42 lub 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
interfejs z a: number
z.object({ a: z.number() })
Klucz brakujący w niektórych elementach tablicy
key?: type
.optional()
Typy są tylko tak dobre jak próbka, więc wklej odpowiedź, która pokazuje każde oczekiwane pole, najlepiej kilka elementów tablicy. Zmień nazwę typu głównego, przełączaj się między interface a aliasem type i skopiuj dowolny wynik.
Typy czy schemat: czego potrzebujesz?
Typy TypeScript znikają, gdy kod się kompiluje. Pomagają edytorowi i wyłapują błędy w Twoim własnym kodzie, ale nie powiedzą Ci, że API wysłało string tam, gdzie oczekiwałeś liczby.
Schemat Zod to prawdziwy kod, który się wykonuje. Wywołanie parse na przychodzących danych rzuca błąd wskazujący złe pole, a z.infer daje typ TypeScript z tego samego schematu, więc oba nigdy się nie rozjadą. Dla danych spoza Twojej aplikacji schemat to bezpieczniejszy wybór.
Jak czytać to, co zgadł konwerter
Pole, które w próbce miało wartość null, dostaje typ null, bo próbka nie daje innej wskazówki. Zmień je na string | null (lub .nullable() w Zod), gdy wiesz, co zawiera, albo zaznacz opcję, która robi pola null opcjonalnymi.
Pusta tablica staje się unknown[] z tego samego powodu. Daty przychodzą w JSON jako stringi, więc pozostają stringami: w Zod możesz zawęzić je do z.string().datetime() lub podobnego, gdy znasz format.
Nazwy typów pochodzą od kluczy: tablica staff daje Staff, obiekt address daje Address. Jeśli dwa klucze dałyby tę samą nazwę, dodawana jest liczba.
Wklej JSON do pola albo zostaw próbkę, aby zobaczyć, jak działa.
Ustaw nazwę typu głównego. Każdy zagnieżdżony obiekt dostaje nazwę od swojego klucza.
Wybierz interface lub alias type oraz to, czy właściwości mają być readonly.
Skopiuj TypeScript, schemat Zod lub oba. Błędy w JSON są pokazywane z komunikatem parsera.
Wklejaj dwa lub trzy elementy w każdej tablicy, aby wykryć pola opcjonalne.
Usuń wrażliwe wartości, zanim udostępnisz wygenerowane typy: samo narzędzie nigdy niczego nie wysyła.
Trzymaj schematy obok kodu, który pobiera dane, i parsuj na tej granicy, a nie głęboko w komponentach.
Używaj safeParse zamiast parse, gdy chcesz pokazać przyjazny komunikat zamiast rzucać błąd.
Najczęściej zadawane pytania
Używać interface czy aliasu type?
Tutaj oba równie dobrze opisują kształty obiektów. Interfejsy o tej samej nazwie się scalają, co pomaga przy rozszerzaniu typów bibliotek, aliasy type nie mogą się scalać, ale mogą nazywać unie. Wybierz jeden styl dla kodu i się go trzymaj.
Jak uzyskać typ TypeScript ze schematu Zod?
Użyj type User = z.infer<typeof UserSchema>. Wygenerowany wynik Zod zawiera już tę linię pod każdym schematem, więc nie musisz utrzymywać osobnych interfejsów.
Dlaczego pole ma typ null?
Twoja próbka miała tam null, więc nie było z czego wywnioskować nic innego. Zastąp go prawdziwym typem połączonym z null, na przykład string | null, albo z.string().nullable() w schemacie.
Czy mój JSON jest wysyłany na serwer?
Nie. Parsowanie i generowanie działają w JavaScript na tej stronie. Możesz załadować stronę, przejść w tryb offline, a nadal będzie działać.
Jak użyć wyniku
Walidacja odpowiedzi wygenerowanym schematem
safeParse zwraca sukces lub listę problemów zamiast rzucać błąd, co pasuje do kodu fetch, który ma pokazać stan błędu.
Ten sam kształt jako zwykłe interfejsy
Przydatne do typowania propsów lub argumentów funkcji, gdy dane są już zaufane.
Wklej JSON, dostań typy
Wklej przykładową odpowiedź. Konwerter zapisuje obok siebie interfejsy TypeScript i pasujący schemat Zod, scalając każdy element tablicy, więc pola brakujące w niektórych elementach wychodzą jako opcjonalne.