Przejdź do głównej treści
LibraTool logoLibraTool

Konwerter JSON do TypeScript za darmo

Generuj interfejsy TypeScript lub aliasy typów z dowolnego obiektu lub tablicy JSON. Wklej swój JSON i natychmiastowo uzyskaj gotowe typy TypeScript.

Działa offline po wczytaniu
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

Typowe zastosowania

  • Generuj Typy TypeScript z Odpowiedzi APIWklej odpowiedź JSON API i natychmiast generuj interfejsy TypeScript, aby bezpiecznie wpisać kod front-end.
  • Typy TypeScript dla Objektów Konfiguracji i UstawieńGeneruj interfejsy TypeScript z plików konfiguracji JSON, aby dodać bezpieczeństwo typu do ustawień aplikacji.
  • Generuj Typy TypeScript z Rekordów Bazy DanychKonwertuj rekordy bazy danych eksportowane do JSON lub wyniki zapytań ORM na interfejsy TypeScript dla typowania warstwy danych.
  • Dane Typu Mock i Fixture TestoweGeneruj interfejsy TypeScript z danych mock JSON i fixture testowych, aby wpisać testy jednostkowe i opowiadania Storybook.
  • Typy Odpowiedzi API Trzeciej StronyGeneruj interfejsy TypeScript z odpowiedzi API trzeciej strony, gdzie oficjalne typy brakuje lub są nieaktualne.

Jak to działa

To narzędzie używa ręcznie napisanego rekurencyjnego algorytmu wnioskowania typów bez żadnych zewnętrznych bibliotek — JSON.parse sprawdza i parsuje dane, a następnie własne przejście po każdej wartości w drzewie JSON emituje deklaracje interface lub type w TypeScript bezpośrednio w przeglądarce. Nic nie jest wysyłane na serwer.

  1. 1
    Parsowanie i walidacja JSON
    Dane trafiają do JSON.parse. Jeśli parsowanie się nie powiedzie, dokładny błąd jest od razu pokazywany pod polem. Udane parsowanie daje drzewo typowanych wartości, które napędza dalszą konwersję.
  2. 2
    Rekurencyjne wnioskowanie typów
    Rekurencyjna funkcja getType przechodzi przez każdy węzeł: typy proste są mapowane na string, number, boolean lub null; obiekty tworzą nowy nazwany interfejs; w tablicach obiektów klucze są scalane ze wszystkich elementów, więc klucze obecne tylko w niektórych elementach stają się opcjonalne, a sprzeczne typy wartości są łączone przez |.
  3. 3
    Nazwy interfejsów odporne na kolizje
    Każdy zagnieżdżony obiekt otrzymuje nazwę w PascalCase utworzoną z jego klucza JSON (snake_case, kebab-case i spacje są normalizowane). Jeśli dwa obiekty o różnej strukturze miałyby tę samą nazwę, dodawany jest przyrostek liczbowy (Data, Data2, …), zamiast po cichu nadpisywać wcześniejszą definicję.
  4. 4
    Renderowanie wyniku i pobieranie
    Najpierw emitowane są zagnieżdżone interfejsy, a następnie typ główny, sformatowany jako export interface lub export type w zależności od wyboru. Wynik można skopiować do schowka lub pobrać jako plik .ts — wszystko za pomocą standardowego obiektu Blob, bez odwołań do serwera.

Powiązane narzędzia

📋

JSON Schema do formularza

Wklej JSON Schema i uzyskaj działający formularz — pola tekstowe, liczbowe, pola wyboru, listy rozwijane i listy — a następnie skopiuj JSON generowany przez Twoje dane wejściowe. Świetny do prototypowania treści żądań API. Działa w Twojej przeglądarce.

Wypróbuj
⌨️

Test szybkości pisania (WPM)

Zmierz swoją prędkość pisania (WPM) i dokładność za pomocą testów czasowych, liczby słów, cytatów, niestandardowych i zen. Żywy WPM, surowa prędkość, spójność, wykres wyników, wiele języków i informacje zwrotne na poziomie znaku — wszystko w przeglądarce.

Wypróbuj
📐

Generator CSS clamp()

Generuj płynną wartość CSS clamp() dla responsywnej typografii i odstępów. Ustaw minimalny/maksymalny rozmiar i zakres widoku, zobacz podgląd na żywo i skopiuj jednowierszowy CSS.

Wypróbuj

Często zadawane pytania