JSON do TypeScript

Wklej próbkę JSON, a narzędzie wywnioskuje interfejsy TypeScript odpowiadające jej strukturze. Typy pól są ustalane na podstawie zaobserwowanych wartości (string, number, boolean, Array<T>); obiekty zagnieżdżone otrzymują własne nazwane interfejsy; a pola zaobserwowane jako null lub brakujące stają się opcjonalne (?) lub dopuszczające null (| null), w zależności od wybranego stylu.

Jak przekonwertować JSON na TypeScript

  1. 1

    Wklej JSON

    Jedna próbka wystarczy, ale kilka próbek poprawia wnioskowanie o dopuszczalności null i typach unii.

  2. 2

    Wybierz styl wyjścia

    `interface` (domyślnie), alias `type` lub interfejs tylko do odczytu, w którym wszystkie pola są oznaczone jako `readonly`.

  3. 3

    Wybierz strategię opcjonalności

    Oznacz pole jako `?` (może nie występować) lub `| null` (zawsze obecne, ale może mieć wartość null).

  4. 4

    Skopiuj typy

    Wklej je do pliku `.ts`, a uzyskasz silnie typowany dostęp do odpowiedzi API.

Przykład

Wejście:

{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }

Wyjście:

interface User {
  id: number;
  name: string;
  age: number | null;
  tags: string[];
  address: Address;
}

interface Address {
  city: string;
}

Mapowanie typów

JSON TypeScript
ciąg znaków string
liczba całkowita / dziesiętna number
wartość logiczna boolean
tylko null null
null + T T | null (lub T?)
tablica typu T T[]
tablica mieszana (T1 | T2)[]
obiekt Nazwany zagnieżdżony interfejs
pusta tablica unknown[] (nie można wywnioskować)

Pole opcjonalne a pole dopuszczające null

  • foo?: string, to pole może nie występować w obiekcie. Obowiązuje sprawdzanie undefined.
  • foo: string | null, to pole jest zawsze obecne, ale może być jawnie równe null.
  • foo?: string | null, może nie występować LUB być równe null.

Sam JSON nie ma undefined, ale różne API sygnalizują brak pola na różne sposoby. Dostosuj to do semantyki swojego API.

  • API REST zwykle pomijają brakujące pola -> ?:.
  • GraphQL zawsze zwraca każde żądane pole -> | null.
  • Niektóre SDK używają obu podejść w różnych kontekstach.

Typy unii a typy literałowe

Jeśli narzędzie zauważy, że to samo pole tekstowe przyjmuje w próbkach jedynie niewielki zbiór wartości ("status": "pending", "active", "archived"), może wygenerować unię literałów tekstowych:

status: "pending" | "active" | "archived";

Włącz „wnioskuj unie literałów tekstowych”, jeśli tego chcesz.

Częste błędy

  • Wnioskowanie z jednej próbki. Każde pole staje się wymagane; nie można zaobserwować dopuszczalności null. Aby uzyskać lepsze typy, podaj 5-10 zróżnicowanych próbek.
  • Puste tablice. "tags": [] nie dostarcza informacji o typie, generator zwraca unknown[]. Podaj próbkę zawierającą co najmniej jeden element.
  • Tablice o mieszanych typach. [1, "two", true] daje (number | string | boolean)[]. Zwykle oznacza to, że JSON należałoby przeprojektować, a nie typować w obecnej postaci.
  • Klucze będące ciągami liczbowymi. JSON {"1": "a", "2": "b"} jest w TypeScript nadal obiektem (Record<string, string>), a nie tablicą. Generator obsługuje to poprawnie.

Najczęściej zadawane pytania

Dostosuj do swojego API. API REST, które pomijają pola null, pasują do ?:. GraphQL, które zawsze zwraca każde wybrane pole, pasuje do | null. W razie wątpliwości T | null ze składnią wymaganą jest bardziej rygorystyczne i wychwytuje więcej błędów podczas kompilacji.

Tak, jeśli to włączysz i podasz kilka próbek. Pole, w którym w próbkach zaobserwowano od 2 do 5 różnych wartości tekstowych, jest zwracane jako unia literałów. Po przekroczeniu tego progu następuje powrót do string.

W większości przypadków interface, jest otwarty na rozszerzanie, a TypeScript lepiej go optymalizuje. Aliasy type są przydatne dla unii, przecięć, krotek i typów mapowanych. Dla typów wywiedzionych z JSON działają oba; wybierz konwencję projektu.

Tak. Każdy zagnieżdżony obiekt staje się osobnym interfejsem, którego nazwa jest wywodzona z klucza (user.address -> Address). W przypadku bardzo głębokich lub powtarzalnych struktur rozważ JSON Schema oraz dedykowany generator schema-to-TS.

Powiązane narzędzia

Narzędzie jest dostępne w innych językach