Co robi narzędzie
Generator JSON na TypeScript odczytuje przykładowy JSON, na przykład odpowiedź API lub plik konfiguracyjny, i pisze interfejsy TypeScript, które go opisują. Zamiast ręcznie wpisywać każde pole, wklejasz jedną prawdziwą odpowiedź i dostajesz typy gotowe do użycia w kodzie, dla wyników fetch, stanu Reduxa czy danych testowych.
Generator sprawdza każdą wartość, nie tylko pierwszą. Liczby stają się number, tekst string, zagnieżdżone obiekty dostają własne interfejsy, a elementy tablicy są łączone, więc pole obecne tylko w niektórych elementach jest oznaczane jako opcjonalne, a pole czasem równe null jest typowane jako dopuszczające null.
Jak używać
- Wklej JSON do pola wejściowego, wgraj plik
.jsonlub kliknij Przykład. - Ustaw nazwę typu głównego i wybierz styl:
interfacelubtype, null jako| nulllub jako pola opcjonalne, właściwościreadonlyoraz czy każda deklaracja ma miećexport. - Skopiuj TypeScript lub pobierz go jako plik
.ts.
Nieprawidłowy JSON jest zgłaszany z wierszem i kolumną błędu, więc możesz od razu poprawić przykład.
Przykład
Ten JSON:
{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }
zamienia się w takie deklaracje:
export interface Root {
id: number;
name: string;
tags: string[];
manager: Manager;
}
export interface Manager {
id: number;
email: null;
}
Wskazówki
- Jeden przykład pokazuje tylko to, co zawiera. Jeśli pole może być napisem lub null, dodaj oba przypadki albo umieść kilka przykładów w tablicy, aby zostały połączone.
- Nazwy pól, które nie są poprawnymi identyfikatorami, takie jak first-name, są zapisywane w cudzysłowie, więc wynik zawsze się kompiluje.
- Wynik to punkt wyjścia. Zawężaj pola tekstowe do unii literałów lub
Date, gdy wiesz więcej niż przykład. - Potrzebujesz Go? Konwerter JSON na Go używa tego samego wnioskowania, by pisać struktury z tagami json.
FAQ
› Jak traktowane są zagnieżdżone obiekty?
Każdy zagnieżdżony obiekt staje się osobnym nazwanym interfejsem, którego nazwa pochodzi od klucza w PascalCase, więc pole address daje interfejs Address. Obiekty o dokładnie tej samej strukturze współdzielą jeden interfejs, a kolidujące nazwy dostają numer, na przykład Address2.
› Jak typowane są tablice?
Wszystkie elementy tablicy są łączone w jeden typ elementu. Tablica obiektów staje się tablicą interfejsu nazwanego liczbą pojedynczą klucza, więc orders daje Order[]. Tablice mieszane stają się unią w rodzaju (string | number)[], a puste tablice typem unknown[].
› Kiedy pole jest oznaczane jako opcjonalne?
Gdy brakuje go w niektórych obiektach tablicy. Pole obecne wszędzie, ale czasem równe null, jest domyślnie zapisywane jako T | null. Przełącz wartości null na opcjonalne, aby usunąć null i oznaczyć pole znakiem zapytania jako opcjonalne.
› Wybrać interface czy type?
Oba opisują te same kształty obiektów. Interfejsy można rozszerzać i scalać, a wiele przewodników stylu zaleca je dla typów obiektowych. Aliasy type przydają się, jeśli chcesz łączyć wynik z uniami lub typami mapowanymi. Wybierz to, czego używa Twój projekt.
› Czy mój JSON jest wysyłany na serwer?
Nie. Typy są wyprowadzane w przeglądarce, więc możesz bezpiecznie wklejać prawdziwe odpowiedzi API.