Konwerter JSON do TypeScript
Konwertuj JSON na interfejsy TypeScript i generuj definicje typów
Wejście JSON
Wyjście TypeScript
Czym jest konwerter JSON do TypeScript?
Budujesz aplikację React lub Angular, masz przed sobą odpowiedź API w JSON i musisz zdefiniować dla niej interfejs TypeScript. Pisanie go ręcznie dla głęboko zagnieżdżonej odpowiedzi jest żmudne i podatne na błędy — jeden zły typ i edytor przestaje wykrywać bugi. To narzędzie wyprowadza interfejsy TypeScript bezpośrednio z Twojej struktury JSON, dzięki czemu możesz wkleić odpowiedź i w kilka sekund otrzymać gotowe definicje typów.
Wklej JSON, otrzymaj TypeScript. Narzędzie działa w przeglądarce. Nic nie jest wysyłane na serwer. Wyjście przestrzega standardowej składni TypeScript.
Jak używać tego narzędzia
Wklej JSON
Wklej swój JSON do lewego edytora lub załaduj plik. Użyj Przykładu dla przykładowych danych. Generator wyprowadza typy ze struktury. Użyj reprezentatywnych danych pokazujących wszystkie interesujące Cię pola.
Przejrzyj interfejsy
Prawy panel pokazuje wygenerowane interfejsy. Zagnieżdżone obiekty mają własne interfejsy. Tablice są typowane jako Type[]. Pola opcjonalne mogą używać ? w zależności od implementacji.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz, aby uzyskać TypeScript. Wklej do swojego projektu. Może być konieczne dostosowanie nazw, dodanie typów generycznych lub poprawienie pól opcjonalnych. Aby najpierw zwalidować JSON, użyj Walidatora JSON.
Kiedy JSON do TypeScript jest przydatny
Gdy integrujesz API, często potrzebujesz typów dla ładunku odpowiedzi. Wklejenie tutaj przykładowej odpowiedzi dostarcza interfejsy, które możesz umieścić w swoim projekcie Angular, React lub Node. Pliki konfiguracyjne, ładunki webhook i dokumenty bazy danych korzystają z tego samego traktowania. Ręczne pisanie interfejsów dla złożonych zagnieżdżonych struktur jest podatne na błędy; to narzędzie wyprowadza strukturę z Twojego przykładu. Do generowania opartego na schemacie użyj Generatora schematu JSON i narzędzi takich jak quicktype.
Przykłady JSON do TypeScript
Oto przykład generowania interfejsów TypeScript z obiektu JSON.
Przykład: Rekord abonenta
Wejście JSON:
Wygenerowane wyjście TypeScript:
Ograniczenia
Generator wyprowadza typy z próbki. Jeśli pole może być string | number, ale Twoja próbka ma tylko ciągi znaków, typ będzie string. Jeśli tablice mogą być puste, typ elementu może być unknown. Przejrzyj i zmodyfikuj wyjście. Do generowania opartego na schemacie użyj Generatora schematu JSON i narzędzia takiego jak quicktype.
Często zadawane pytania
Jak automatycznie wygenerować interfejsy TypeScript z JSON?
Wklej JSON do tego narzędzia, a wygeneruje ono interfejsy TypeScript na podstawie struktury. Zagnieżdżone obiekty dostają własne interfejsy, tablice są typowane jako Type[]. Skopiuj wynik do swojego projektu Angular, React lub Node.
Jaka jest różnica między interface a type w TypeScript dla JSON?
Oba działają dobrze. interface jest preferowany, gdy trzeba rozszerzać lub implementować; type jest lepszy dla typów union i mapped types. Dla większości kształtów odpowiedzi API oba działają — generator domyślnie tworzy interface.
Czy moje dane są gdzieś wysyłane?
Nie. Wszystko działa w Twojej przeglądarce — Twój JSON nigdy nie opuszcza Twojego komputera. Bezpieczne w użyciu nawet z produkcyjnymi odpowiedziami API.
Czy mogę generować typy dla innych języków?
To narzędzie generuje tylko TypeScript. Strona ma konwertery dla C#, Java, Python, Go i innych.
A co z polami opcjonalnymi i wyliczeniami?
Generator wnioskuje typy z Twojej próbki. Pola, które mogłyby być opcjonalne, nie będą automatycznie oznaczone jako ? — przejrzyj wynik i dodaj ? tam, gdzie trzeba. Dla wyliczeń, jeśli pole konsekwentnie używa określonych wartości ciągów, możesz zastąpić string typem union jak "aktywny" | "nieaktywny".
Powiązane narzędzia
Dla TypeScript, patrz typescriptlang.org i obiekty TypeScript. Dla JSON, patrz json.org i MDN JSON. Do generowania ze schematu do kodu, patrz quicktype. RFC 8259 (specyfikacja JSON).