DT Dev Tools

JSON do TypeScript

Wnioskuj lokalnie interfejsy TypeScript z przykładu JSON. Darmowy generator obsługuje zagnieżdżone obiekty, tablice i unie bez przesyłania Twoich danych.

🔒 Działa całkowicie w Twojej przeglądarce — nic nie jest przesyłane

Advertisement

Co robi JSON do TypeScript

JSON do TypeScript odczytuje przykład JSON i wnioskuje z niego silnie typowane interfejsy TypeScript opisujące jego strukturę. Narzędzie przechodzi przez wartość rekurencyjnie: obiekty stają się nazwanymi interfejsami, wartości proste stają się odpowiednimi typami string, number, boolean lub null, a tablice stają się typami elementów ujętymi w nawiasy kwadratowe. Gdy tablica zawiera elementy różnych typów, generator scala je w unię, dzięki czemu wynik nadal pasuje do oryginalnych danych. To przydatne przy korzystaniu z API bez opublikowanych typów, przy dodawaniu bezpieczeństwa typów do starszego ładunku danych albo przy zamianie szybkiego zestawu testowego w model do ponownego użycia.

Tablice obiektów są obsługiwane starannie. Zamiast typować tylko pierwszy element, narzędzie scala wszystkie obiekty z tablicy w jeden interfejs, zbierając sumę kluczy. Klucze nieobecne w niektórych elementach są oznaczane jako opcjonalne za pomocą znaku zapytania na końcu, co odzwierciedla sposób, w jaki prawdziwe odpowiedzi zawierają pola tylko wtedy, gdy są wypełnione. Zagnieżdżone obiekty są wyodrębniane do własnych nazwanych interfejsów, których nazwy pochodzą od nazwy właściwości, więc wynik wygląda jak ręcznie napisane modele, a nie jeden głęboko wbudowany typ.

Prywatny sposób pracy w przeglądarce

Całe parsowanie i wnioskowanie odbywa się w Twojej przeglądarce za pomocą JavaScriptu po stronie klienta. Narzędzie nie wysyła na serwer Twojego JSON-a, odpowiedzi API, identyfikatorów, tokenów ani przykładów przypominających dane klientów i nie wymaga konta. Taki wyłącznie lokalny model jest ważny, ponieważ dane wklejane do generatora typów są często prawdziwą odpowiedzią produkcyjną przechwyconą podczas debugowania. Praca na własnym komputerze ogranicza ryzyko, a wynik pojawia się natychmiast, bo między wklejeniem a wynikiem nie ma komunikacji sieciowej.

Interfejs trzyma blisko siebie dane wejściowe JSON, nazwę korzenia i wygenerowane interfejsy, dzięki czemu możesz sprawdzić wnioskowanie przed skopiowaniem. Wyniki nadal warto przejrzeć przed zatwierdzeniem w kodzie: pojedynczy przykład nie ujawni każdego pola opcjonalnego, wartości dopuszczającej null ani enuma, które może zwrócić prawdziwe API, dlatego poszerz typy tam, gdzie Twoja znajomość dziedziny podpowiada, że pole może być nieobecne lub przyjmować więcej postaci, niż pokazuje przykład.

Praktyczne wskazówki

Podaj najpełniejszy przykład, jaki masz, najlepiej z wypełnionymi polami opcjonalnymi i tablicą zawierającą więcej niż jeden element, aby logika scalania mogła wykryć unie i opcjonalność. Przed generowaniem zmień nazwę głównego interfejsu tak, aby pasowała do Twojego modelu dziedziny. Po skopiowaniu rozważ zawężenie zbyt ogólnie wywnioskowanych typów: zastąp szerokie pola string unią literałów dla znanych enumów, oznacz identyfikatory jako typy brandowane, jeśli Twój kod ich używa, i sprawdź, czy pole wywnioskowane jako null nie powinno być raczej unią dopuszczającą null. Wnioskowanie w przeglądarce świetnie nadaje się na szybki pierwszy szkic, ale ostateczne typy powinny odzwierciedlać kontrakt, od którego Twoja aplikacja faktycznie zależy.

Jak używać

  1. Wklej JSONDodaj reprezentatywny przykład obiektu lub tablicy JSON.
  2. Nazwij korzeńWybierz nazwę głównego interfejsu, a następnie wygeneruj interfejsy.
  3. Skopiuj interfejsySprawdź wywnioskowany kod TypeScript i skopiuj go lub pobierz.

Najczęściej zadawane pytania

Czy obsługuje zagnieżdżone obiekty i tablice?
Tak. Wnioskowanie przechodzi rekurencyjnie przez zagnieżdżone obiekty i tablice, nazywając interfejsy podrzędne na podstawie kluczy właściwości.
Jak obsługiwane są tablice z elementami mieszanymi?
Typy elementów są scalane w unię, a w tablicach obiektów scalane są wszystkie klucze, więc pola opcjonalne są oznaczane znakiem zapytania.
Czy mój JSON jest przesyłany?
Nie. Wnioskowanie odbywa się w całości w Twojej przeglądarce za pomocą JavaScriptu po stronie klienta.
Advertisement