Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng JSON sa TypeScript Converter

Gumawa ng mga TypeScript interface o type alias mula sa anumang JSON object o array. I-paste ang iyong JSON at makakuha ng mga handa nang gamitin na TypeScript type nang mabilis.

Gumagana offline kapag na-load na
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;
}

Mga karaniwang gamit

  • Lumikha ng TypeScript Type mula sa API ResponseMag-paste ng API JSON response at agad lumikha ng TypeScript interface upang mag-type ng ligtas sa frontend code.
  • TypeScript Type para sa Config at Setting ObjectLumikha ng TypeScript interface mula sa JSON configuration file upang magdagdag ng type safety sa application setting.
  • Lumikha ng TypeScript Type mula sa Database RecordI-convert ang JSON-exported database record o ORM query result sa TypeScript interface para sa data layer typing.
  • Type Mock Data at Test FixtureLumikha ng TypeScript interface mula sa JSON mock data at test fixture upang mag-type sa unit test at Storybook story.
  • Type Third-Party API ResponseLumikha ng TypeScript interface mula sa third-party API response kung saan ang official type ay nawawalan o outdated.

Paano ito Gumagana

Gumagamit ang tool na ito ng hand-written na recursive type inference algorithm nang walang panlabas na library β€” JSON.parse para i-validate at i-parse ang input, pagkatapos ay isang custom na traversal na dinadaanan ang bawat halaga sa JSON tree at naglalabas ng TypeScript interface o type declaration direkta sa browser. Walang ipinapadala sa server.

  1. 1
    Pina-parse at vina-validate ang JSON
    Ipinapasa ang input mo sa JSON.parse. Kapag pumalya, agad ipinapakita ang eksaktong parse error sa ilalim ng input. Ang matagumpay na pag-parse ay nagbibigay ng typed na value tree na nagpapatakbo sa natitirang conversion.
  2. 2
    Recursive na type inference
    Dinadaanan ng recursive na getType function ang bawat node: naka-map ang mga primitive sa string, number, boolean, o null; nagti-trigger ng bagong pinangalanang interface ang mga object; pinagsasama ang mga key ng array ng mga object sa lahat ng elemento kaya nagiging opsyonal ang mga key na nasa ilang item lang at pinagdudugtong ng | ang magkasalungat na uri ng halaga.
  3. 3
    Ligtas-sa-banggaan na pagpapangalan ng interface
    Nakakakuha ang bawat nested na object ng PascalCase na pangalan mula sa JSON key nito (nino-normalize ang snake_case, kebab-case, at mga space). Kung magkakapareho ng pangalan ang dalawang magkaibang istruktura ng object, nagdadagdag ng numerong suffix (Data, Data2, …) sa halip na tahimik na patungan ang naunang definition.
  4. 4
    Nire-render ang output at puwedeng i-download
    Unang inilalabas ang mga nested na interface, pagkatapos ay ang root type, na fino-format bilang export interface o export type depende sa pinili mo. Puwedeng kopyahin sa clipboard o i-download bilang .ts file ang resulta β€” lahat ay binuo gamit ang karaniwang Blob at walang server round-trip.

Mga Kaugnay na Tool

πŸ“‹

JSON Schema sa Form

I-paste ang isang JSON Schema at makakuha ng isang live, gumaganang form β€” teksto, numero, checkbox, dropdown, at mga field ng listahan β€” pagkatapos ay kopyahin ang JSON na ginagawa ng iyong input. Magaling para sa prototyping ng mga API request body. Tumatakbo sa iyong browser.

Subukan
⌨️

Pagsubok ng Bilis ng Pag-type (WPM)

Sukatin ang iyong bilis sa pag-type (WPM) at accuracy sa pamamagitan ng timed, word-count, sipi, customized, at zen na mga pagsusulit. Live WPM, raw speed, consistency, resulta graph, maraming wika, at feedback sa bawat karakter β€” lahat sa iyong browser.

Subukan
πŸ“

Gumagawa ng CSS clamp()

Gumawa ng fluid na CSS clamp() na value para sa responsive na typography at spacing. Itakda ang min/max na laki at viewport range, tingnan ang live preview, at kopyahin ang one-line na CSS.

Subukan

Mga Madalas na Itanong