Перейти до основного вмісту
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 для типобезпечності коду front-end.
  • Типи TypeScript для Об'єктів Конфігурації та ПараметрівГенеруйте інтерфейси TypeScript з файлів конфігурації JSON для додання типобезпеки в параметри додатка.
  • Генеруйте Типи TypeScript з Записів Бази ДанихПеретворіть записи бази даних експортовані як JSON або результати запитів ORM у інтерфейси TypeScript для типізації шару даних.
  • Типи Mock-даних та Тестових ФіксельГенеруйте інтерфейси TypeScript з JSON mock-даних та тестових фіксель для типізації ваших модульних тестів та Storybook сторій.
  • Типи Відповідей API Третьої СторониГенеруйте інтерфейси TypeScript з відповідей API третьої сторони, де офіційні типи відсутні або застарілі.

Як це працює

Інструмент використовує власноруч написаний рекурсивний алгоритм виведення типів без жодних зовнішніх бібліотек — JSON.parse для перевірки й розбору введення, а потім власний обхід, що проходить кожне значення в дереві JSON і генерує оголошення interface чи type TypeScript прямо в браузері. Нічого не надсилається на сервер.

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

Схожі інструменти

📋

JSON Schema у форму

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

Спробувати
⌨️

Тест швидкості набору тексту (WPM)

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

Спробувати
📐

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

Генеруйте гнучке значення CSS clamp() для адаптивної типографіки та відступів. Встановіть мінімальний/максимальний розмір та діапазон вікна, перегляньте результат і скопіюйте однорядковий CSS.

Спробувати

Часті запитання