Konwerter JSON na TypeScript

Wklej odpowiedź API i otrzymaj gotowe interfejsy TypeScript lub aliasy typów z wywnioskowanymi typami zagnieżdżonymi, polami opcjonalnymi i uniami z null.

Działa w przeglądarceBez rejestracjiNic nie jest wysyłane

TypeScript

Jak używać: JSON na TypeScript

  1. Wklej przykładowy JSON, np. odpowiedź API, do lewego pola lub otwórz plik .json.
  2. Ustaw nazwę typu głównego (np. User lub ApiResponse).
  3. Wybierz deklaracje interface lub type i przełączaj export, readonly lub wszystkie pola opcjonalne.
  4. Wybierz unknown (bezpieczniejsze) lub any dla wartości, których próbka nie ujawnia, np. pustych tablic i null.
  5. Skopiuj wygenerowany kod lub pobierz go jako plik .ts.

Jak wnioskowane są typy

  • Typy proste: ciągi, liczby i wartości logiczne mapowane są na string, number i boolean.
  • Zagnieżdżone obiekty stają się osobnymi, nazwanymi interfejsami w PascalCase, więc billing_address staje się BillingAddress.
  • Tablice obiektów są scalane w jeden typ elementu nazwany w liczbie pojedynczej: users daje User[]. Klucz, którego brakuje w niektórych elementach, staje się opcjonalny (key?:).
  • Wartości null łączą się z innymi wartościami widzianymi dla danego klucza: string | null. Klucz, który zawsze jest null, otrzymuje unknown lub any.
  • Tablice mieszane stają się tablicami unii, np. (number | string)[].
  • Identyczne kształty są deklarowane raz i używane ponownie, a różne kształty, które miałyby tę samą nazwę, dostają sufiks liczbowy.
  • Klucze, które nie są poprawnymi identyfikatorami, np. "first-name" lub "2fa", są ujmowane w cudzysłowy.

interface a type

Dla zwykłych kształtów obiektów oba są niemal wymienne. Deklaracje interface można rozszerzać i scalać, a błędy kompilatora są nieco czytelniejsze. Aliasy type mogą też wyrażać unie i typy mapowane. Wiele zespołów używa interfejsów dla modeli API, a typów do wszystkiego innego; wybierz to, czego oczekuje Twój kod lub linter (@typescript-eslint/consistent-type-definitions).

Lepsze typy dzięki lepszej próbce

Typy mogą być tylko tak kompletne jak próbka. Wklej odpowiedź zawierającą pola opcjonalne lub tablicę z kilkoma zróżnicowanymi elementami, aby generator mógł wykryć klucze opcjonalne i nullable. Wartości takie jak daty i enumy przychodzą w JSON jako zwykłe ciągi; zawęź je potem ręcznie, np. status: 'active' | 'disabled'. Do walidacji w czasie wykonania połącz wygenerowane typy z biblioteką schematów, np. Zod.

Najczęściej zadawane pytania

Czy mój JSON jest wysyłany?
Nie. Typy są generowane przez JavaScript w przeglądarce. Odpowiedzi API z tokenami czy danymi osobowymi nigdy nie opuszczają Twojego urządzenia.
Jak wykrywane są właściwości opcjonalne?
Gdy obiekty w tej samej tablicy mają różne klucze, klucze brakujące w co najmniej jednym obiekcie są oznaczane jako opcjonalne przez ?. Przy pojedynczym obiekcie każdy klucz jest wymagany, chyba że zaznaczysz Wszystkie opcjonalne.
Użyć <code>unknown</code> czy <code>any</code>?
unknown jest bezpieczniejsze: TypeScript wymusza zawężenie wartości przed jej użyciem. any wyłącza sprawdzanie typów dla tej wartości. Używaj go tylko, jeśli planujesz później doprecyzować typy.
Dlaczego data ISO ma typ <code>string</code>?
JSON nie ma typu daty, więc daty są przesyłane jako ciągi. Jeśli po parsowaniu konwertujesz je przez new Date(), zmień typ właściwości na Date w swoim modelu.
Czy poradzi sobie z dużym lub głęboko zagnieżdżonym JSON?
Tak. Generowanie jest liniowe względem rozmiaru danych i działa lokalnie, więc wielomegabajtowe odpowiedzi konwertują się w ułamku sekundy.

Powiązane narzędzia

Formater JSON Formatuj, minifikuj i waliduj JSON z błędami linia/kolumna. JSON Diff Porównaj dwa obiekty JSON i wypisz zmiany według ścieżek. YAML na JSON Konwertuj konfiguracje YAML na JSON, z obsługą wielu dokumentów i precyzyjnymi błędami. Konwerter cURL Zamień polecenia curl na kod fetch, Axios, Python, Go lub PHP.