JSON na TypeScript
Zamień przykładowy dokument JSON na interfejsy lub aliasy typów TypeScript, z polami opcjonalnymi i unionami wyznaczonymi na podstawie danych.
Działa w całości w Twojej przeglądarce
Typy są wnioskowane z wklejonej próbki, więc opisują tę próbkę, a nie schemat: pole będące w przykładzie ciągiem znaków może być gdzie indziej liczbą. Wszystkie liczby to number, a daty pozostają string. Kolejność właściwości wynika z JSON.parse, który wymienia klucze będące liczbami całkowitymi jako pierwsze.
Jak wygenerować TypeScript z JSON
- Wklej odpowiedź JSON lub plik do pola. Kilka elementów tablicy poprawia wynik, ponieważ pola brakujące w niektórych elementach stają się opcjonalne.
- Ustaw nazwę typu najwyższego poziomu, wybierz
interfacelubtypei zaznacz export, readonly lub wykrywanie pól opcjonalnych według potrzeb. - Skopiuj deklaracje lub pobierz je jako plik
.ts. Przejrzyj nazwy, ponieważ pochodzą z nazw Twoich kluczy.
Wnioskowanie typów z próbki JSON
Typy TypeScript opisują kształt danych, a odpowiedź JSON już zawiera kształt: każdy klucz, rodzaj wartości, która za nim stoi, i sposób zagnieżdżenia obiektów. Konwerter przechodzi po próbce i zapisuje ten kształt jako deklaracje, więc nie musisz ręcznie wypisywać czterdziestu pól, zanim będziesz mógł pewnie wywołać API.
Najważniejsze jest to, co zrobić z tablicami. Każdy element tablicy obiektów jest odczytywany, a ich kształty są scalane: klucz znaleziony w każdym elemencie pozostaje wymagany, klucz znaleziony tylko w niektórych staje się opcjonalny, a wartości różnego rodzaju tworzą unię. Dlatego próbka z kilkoma rekordami daje znacznie lepsze typy niż próbka z jednym. Wartość null traktowana jest inaczej niż brakujący klucz, bo dla kodu czytającego pole znaczą one co innego.
Wywnioskowane typy to punkt wyjścia, a nie umowa. Nie wiedzą, że ciąg zawsze jest jedną z trzech wartości, że liczba to w rzeczywistości całkowity identyfikator ani że pole obecne we wszystkich przykładach może zniknąć na produkcji. Przeczytaj wynik, zmień nazwy, które wyszły niezręcznie, i dopracuj typy, na których ci zależy.
Wskazówki
- Najpierw sprawdź poprawność próbki w narzędziu Formatuj i waliduj JSON, które wskazuje dokładny znak błędu składni.
- Pracujesz raczej z konfiguracją YAML? Zamień ją narzędziem Konwertuj YAML na JSON i wklej wynik tutaj.
- Chcesz zajrzeć do zawartości tokenu, zanim zaczniesz pisać typy? Zdekoduj go w narzędziu Dekoder JWT.
Najczęstsze pytania
Jak narzędzie decyduje, że pole jest opcjonalne?
Gdy masz tablicę obiektów, obiekty są scalane w jeden kształt. Klucz, który występuje w niektórych elementach, ale nie we wszystkich, dostaje ?. Klucz obecny, ale zawierający null w niektórych elementach, nie jest opcjonalny; staje się T | null. Wyłącz wykrywanie opcjonalności, jeśli wolisz, by każdy klucz był wymagany.
Jak nazywane są typy zagnieżdżone?
Każdy zagnieżdżony obiekt dostaje nazwę z klucza w PascalCase, więc billing_address staje się BillingAddress. W przypadku tablicy typ elementu traci końcowe „s”, gdy klucz jest dłuższy niż 3 litery i nie kończy się na ss, us ani is: users daje User, a address daje AddressItem. Jeśli dwa różne kształty chcą tej samej nazwy, drugi jest numerowany, co daje User i User2.
Co dzieje się z obiektami o tym samym kształcie?
Współdzielą jedną deklarację. Jeśli billing i shipping zawierają { street, city }, powstaje jeden interfejs, nazwany od pierwszego miejsca, w którym się pojawia. Dwa obiekty o tych samych kluczach, ale różnych typach wartości, to różne kształty i dostają osobne nazwy.
Dlaczego pusta tablica ma typ unknown[]?
Pusta tablica nie zawiera przykładów, więc nic nie da się wywnioskować o jej elementach. unknown[] to uczciwa odpowiedź; zmień ją ręcznie, gdy poznasz typ elementu. Tablica mieszająca wartości staje się unią, na przykład (string | number)[].
Czy wynik może różnić się od prawdziwego API?
Tak. Próbka pokazuje tylko zawarte w niej wartości. Pole, które w próbce jest zawsze obecne, a na produkcji bywa pominięte, będzie tutaj wymagane, a ciąg przypominający enum będzie zwykłym string. Do ścisłej walidacji użyj schematu; na szybki start użyj tego wyniku i dostosuj go.
Czy mój JSON jest przesyłany?
Nie. Nic, co wkleisz, nie jest nigdzie wysyłane; konwersja odbywa się w Twojej przeglądarce i po załadowaniu strony możesz odłączyć się od sieci.