Dlaczego warto konwertować JSON na TypeScript?

TypeScript używa typów statycznych, aby wykrywać bugi w czasie kompilacji, a nie w czasie wykonywania. Podczas pracy z API, plikami konfiguracyjnymi lub dowolnym zewnętrznym źródłem danych zwracającym JSON, zazwyczaj trzeba definiować typy lub interfejsy opisujące strukturę tych danych. Ręczne pisanie takich definicji jest żmudne i podatne na błędy, szczególnie w przypadku głęboko zagnieżdżonych obiektów lub dużych tablic o zróżnicowanych strukturach. Automatyzacja konwersji oszczędza czas i zmniejsza ryzyko niezgodności między zdefiniowanymi typami a rzeczywistymi danymi.

Opis narzędzia

Narzędzie przyjmuje dowolne prawidłowe dane JSON — obiekty, tablice lub struktury zagnieżdżone — i natychmiast generuje odpowiadające im aliasy typów lub interfejsy TypeScript. Automatycznie wykrywa zagnieżdżone obiekty, tworzy dla każdego z nich osobne nazwane typy i obsługuje tablice poprzez wnioskowanie typów elementów. Możesz przełączać się między trybem wyjściowym interface a type w zależności od konwencji przyjętych w projekcie.

Przykłady

Wejściowy JSON:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip": "62701"
  },
  "roles": ["admin", "editor"]
}

Wyjście (tryb Interface):

interface RootObject {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
}

interface Address {
  street: string;
  city: string;
  zip: string;
}

Wyjście (tryb Type):

type RootObject = {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
};

type Address = {
  street: string;
  city: string;
  zip: string;
};

Funkcje

  • Wybór między wyjściem interface a aliasem type za pomocą jednej listy rozwijanej
  • Automatyczne wykrywanie i wyodrębnianie typów zagnieżdżonych obiektów
  • Wnioskowanie typów elementów tablic, w tym tablic obiektów
  • Scalanie zróżnicowanych kształtów obiektów w tablicach w jeden zunifikowany typ z opcjonalnymi właściwościami
  • Konwersja w czasie rzeczywistym z podświetlaniem składni w edytorach JSON i TypeScript

Przypadki użycia

  • Szybkie definiowanie typów TypeScript dla danych odpowiedzi API podczas tworzenia frontendu
  • Generowanie definicji typów z plików konfiguracyjnych JSON lub eksportów baz danych
  • Tworzenie szkieletu bezpiecznych typowo modeli danych przy rozpoczynaniu nowego projektu TypeScript

Jak to działa

Narzędzie parsuje prawidłowy JSON i rekurencyjnie przechodzi przez jego strukturę. Dla każdego napotkanego obiektu tworzy nazwany interfejs lub alias typu z polami odpowiadającymi kluczom obiektu. Zagnieżdżone obiekty generują dodatkowe typy, do których odwołania są tworzone po nazwie. Tablice są analizowane w celu określenia typu elementu — jeśli wszystkie elementy są obiektami, ich struktury są scalane w jeden typ, w którym klucze nieobecne w każdym elemencie stają się opcjonalne.

Wskazówki

  • Wklej reprezentatywną próbkę swoich danych JSON. Im bardziej kompletna próbka, tym dokładniejsze będą wygenerowane typy.
  • W przypadku tablic zawierających obiekty o zróżnicowanych strukturach, dołącz wiele obiektów, aby narzędzie mogło wykryć opcjonalne pola.
  • Użyj trybu Type, jeśli Twój projekt preferuje aliasy typów dla kształtów obiektów, lub trybu Interface, jeśli stosujesz konwencję interfejsów.