Към основното съдържание
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) и точността си с тестове по време, брой думи, цитати, персонализирани и в дзен режим. WPM в реално време, суровата скорост, последователност, графика на резултатите, множество езици и обратна връзка за всеки знак — всичко в браузъра ви.

Опитайте
📐

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

Генерирайте течна CSS clamp() стойност за адаптивна типография и разстояния. Задайте минимален/максимален размер и диапазон на изгледния прозорец, вижте жив преглед и копирайте CSS на един ред.

Опитайте

Често задавани въпроси