JSON → TypeScript

Zamień przykładowy JSON na interfejsy lub typy TypeScript bezpośrednio w przeglądarce.

O narzędziu JSON → TypeScript

Co to jest

JSON → TypeScript czyta przykładowy JSON — odpowiedź API, konfigurację, dane testowe — i pisze deklaracje TypeScript, które go opisują. Zagnieżdżone obiekty stają się osobnymi nazwanymi typami, kształty elementów tablicy są łączone, a pola, które nie zawsze występują, oznaczane jako opcjonalne. Dostajesz typowany punkt wyjścia zamiast pisania wszystkiego ręcznie.

Główne funkcje

  • Deklaracje jako interface lub type, z export lub bez.
  • Zagnieżdżone obiekty wydzielane jako osobne nazwane typy albo zostawiane w miejscu.
  • Elementy tablicy o różnych kształtach łączone w jeden typ; pole, którego brakuje w części elementów, staje się opcjonalne.
  • Własna nazwa typu głównego.
  • Pola readonly, wszystkie pola opcjonalne i przykłady JSDoc z wartości przykładu.

Jak używać

  1. Wklej JSON do edytora, przeciągnij na niego plik lub kliknij „Przykład”.
  2. Wybierz „Interface” lub „Type” i ustaw nazwę typu głównego.
  3. Włącz to, czego potrzebujesz: wydzielanie zagnieżdżonych typów, pola readonly, pola opcjonalne, JSDoc.
  4. Skopiuj TypeScript lub wyślij go do innego narzędzia.

Kiedy się przydaje

  • Otypować odpowiedź API, zanim użyjesz jej we frontendzie.
  • Opisać plik konfiguracyjny wczytywany w trakcie działania.
  • Na podstawie jednego prawdziwego payloadu przygotować szkic typów dla zewnętrznego webhooka.

Prywatność i ograniczenia

Twoje dane

Twój JSON jest konwertowany w przeglądarce i nie trafia na serwer — witryna otrzymuje tylko anonimowe zdarzenie „otwarto narzędzie”, bez treści. Wynik wysłany do innego narzędzia zostaje na tym urządzeniu przez 24 godziny w „Ostatniej aktywności”.

Ograniczenia

  • Typy opisują tylko podany przykład: pola, którego w nim nie ma, nie będzie też w wyniku.
  • Wartość null w przykładzie dostaje typ null — jeśli znasz prawdziwy typ, dopisz go sam.

Najczęstsze pytania

Wybrać „Interface” czy „Type”?

Oba opisują ten sam kształt. Interfejsy można rozszerzać i łączyć, a type przydaje się do unii i aliasów. Jeśli projekt ma przyjętą konwencję, trzymaj się jej.

Jak obsługiwane są tablice obiektów?

Kształty wszystkich elementów są łączone w jeden typ. Pole obecne w jednych elementach i brakujące w innych staje się opcjonalne, więc typ pasuje do każdego elementu.

Dlaczego zamiast typów widzę błąd?

Na wejściu musi być poprawny JSON. Sprawdź go w narzędziu Formatter JSON, które pokazuje wiersz i pozycję błędu.