Перайсці да асноўнага зместу
LibraTool logoLibraTool

Канвертар JSON у TypeScript — бясплатна

Генеруйце інтэрфейсы або тыпавыя псеўданімы TypeScript з любога аб'екта або масіва JSON. Устаўце ваш JSON і адразу атрымайце гатовыя да выкарыстання тыпы TypeScript.

Працуе афлайн пасля загрузкі
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;
}

Тыповыя выкарыстанні

  • Генеруйце тыпы TypeScript з адказаў APIУстав адказ JSON API і адразу генеруй інтэрфейсы TypeScript для тыпавай бяспекі твайго фронтэнд кода.
  • Тыпы TypeScript для конфіга і аб'ектаў параметраўГенеруйце інтэрфейсы TypeScript з файлаў конфіга JSON, каб дадаць тыпавую бяспеку для параметраў вашага прыкладання.
  • Генеруйце тыпы TypeScript з рэкордаў базы дадзеныхПераўтварыце рэкорды базы дадзеных, экспартаваныя ў JSON, ці вынікі запытаў ORM ў інтэрфейсы TypeScript для тыпавання слоя дадзеных.
  • Тыпавыя макеты дадзеных і прыспособы тэстаўГенеруйце інтэрфейсы TypeScript з макетаў дадзеных JSON і прыспособаў тэстаў, каб тыпаваць вашы модульныя тэсты і гісторыі Storybook.
  • Тыпавыя адказы API трэцяй стараныГенеруйце інтэрфейсы TypeScript з адказаў API трэцяй стараны, дзе афіцыйныя тыпы адсутнічаюць ці ўстарэлыя.

Як гэта працуе

Гэты інструмент выкарыстоўвае ўласнаручна напісаны рэкурсіўны алгарытм вывядзення тыпаў без знешніх бібліятэк — JSON.parse для праверкі і разбору ўводу, потым уласны абыход, які праходзіцца праз кожнае значэнне ў дрэве JSON і вырабляе дэкларацыі TypeScript interface ці type непасрэдна ў браўзеры. Нічога не адпраўляецца на сервер.

  1. 1
    JSON разабраны і правераны
    Ваш увод перадаецца ў JSON.parse. Калі гэта не ўдаецца, дакладная памылка разбору паказваецца неадкладна пад уводам. Паспяховы разбор вырабляе тыпізаванае дрэва значэнняў, якое кіруе астатняй канвертацыяй.
  2. 2
    Рэкурсіўнае вывядзенне тыпаў
    Рэкурсіўная функцыя getType праходзіцца праз кожны вузел: прымітывы супастаўляюцца з string, number, boolean ці null; аб'екты выклікаюць новы названы interface; масівы аб'ектаў маюць свае ключы аб'яднаныя ва ўсіх элементах, так што ключы, прысутныя толькі ў некаторых элементах, становяцца апцыянальнымі, а канфліктуючыя тыпы значэнняў злучаюцца з |.
  3. 3
    Бяспечнае ад калізій наймянаванне interface
    Кожны ўкладзены аб'ект атрымлівае назву ў PascalCase, вывадзеную з яго ключа JSON (snake_case, kebab-case і прабелы нармалізуюцца). Калі два структурна розныя аб'екты дзялілі б адну назву, дадаецца лічбавы суфікс (Data, Data2, …), а не ціха перазапісваецца больш ранняе вызначэнне.
  4. 4
    Вывад рэндэрыцца і даступны для спампоўвання
    Укладзеныя interface выводзяцца першымі, потым каранёвы тып, фарматаваны як export interface ці export type у залежнасці ад вашага выбару. Вынік можна скапіяваць у буфер абмену ці спампаваць як файл .ts — усё пабудавана са стандартным Blob і без зваротнага падарожжа да сервера.

Звязаныя інструменты

📋

JSON Schema у форму

Устаўце JSON Schema і атрымайце жывую рабочую форму — тэкставыя, лічбавыя, сцяжковыя, выпадальныя і спісавыя палі — затым скапіруйце JSON, які вырабляюць вашы ўводы. Выдатна для прататыпавання цел запытаў API. Працуе ў вашым браўзеры.

Паспрабуйце
⌨️

Тэст хуткасці набору (зн./хв.)

Вымерайце хуткасць набору (WPM) і дакладнасць у рэжымах па часе, па колькасці слоў, з цытатамі, са сваім тэкстам і дзэн. Жывы WPM, сырая хуткасць, стабільнасць, графік вынікаў, шмат моў і зваротная сувязь па кожным сімвале — усё ў вашым браўзеры.

Паспрабуйце
📐

Генератар CSS clamp()

Генеруйце гнуткае значэнне CSS clamp() для адаптыўнай тыпаграфікі і водступаў. Усталёўвайце мінімальны/максімальны памер і дыяпазон вокнаперагляду, глядзіце жывы прагляд і капіруйце аднарадковы CSS.

Паспрабуйце

Часта задаюць пытанні