Конвертер JSON у TypeScript

Вставте відповідь API й отримайте готові інтерфейси або псевдоніми типів TypeScript із виведеними вкладеними типами, необов'язковими полями й об'єднаннями з null.

Працює в браузеріБез реєстраціїНічого не завантажується

TypeScript

Як користуватися: JSON у TypeScript

  1. Вставте приклад JSON, наприклад відповідь API, у ліве поле або відкрийте файл .json.
  2. Задайте ім'я кореневого типу (наприклад, User або ApiResponse).
  3. Виберіть оголошення interface або type й увімкніть export, readonly чи всі необов'язкові поля.
  4. Виберіть unknown (безпечніше) або any для значень, тип яких із прикладу не визначити, як-от порожні масиви й null.
  5. Скопіюйте згенерований код або завантажте його як файл .ts.

Як виводяться типи

  • Примітиви: рядки, числа й логічні значення відображаються в string, number і boolean.
  • Вкладені об'єкти стають окремими іменованими інтерфейсами в PascalCase, тож billing_address перетворюється на BillingAddress.
  • Масиви об'єктів об'єднуються в один тип елемента з іменем в однині: users дає User[]. Ключ, якого немає в частині елементів, стає необов'язковим (key?:).
  • Значення null об'єднуються з іншими значеннями цього ключа: string | null. Ключ, що завжди null, отримує тип unknown або any.
  • Змішані масиви стають масивами об'єднань, наприклад (number | string)[].
  • Однакові структури оголошуються один раз і перевикористовуються, а різні структури з однаковим іменем отримують числовий суфікс.
  • Ключі, що не є коректними ідентифікаторами, наприклад "first-name" або "2fa", беруться в лапки.

interface чи type

Для простих структур об'єктів вони майже взаємозамінні. Оголошення interface можна розширювати й об'єднувати, і вони дають трохи зрозуміліші помилки компілятора. Псевдоніми type також уміють виражати об'єднання й mapped types. Багато команд використовують інтерфейси для моделей API, а типи — для всього іншого; вибирайте те, чого очікує ваша кодова база чи лінтер (@typescript-eslint/consistent-type-definitions).

Як отримати точніші типи

Типи можуть бути повними рівно настільки, наскільки повний приклад. Вставте відповідь із необов'язковими полями або масив із кількома різними елементами, щоб генератор зміг визначити необов'язкові й nullable-ключі. Дати й переліки надходять у JSON як звичайні рядки; звужуйте їх вручну, наприклад status: 'active' | 'disabled'. Для валідації під час виконання використовуйте згенеровані типи разом із бібліотекою схем на кшталт Zod.

Поширені запитання

Чи завантажується мій JSON?
Ні. Типи генерує JavaScript у вашому браузері. Відповіді API з токенами чи персональними даними ніколи не залишають пристрій.
Як визначаються необов'язкові властивості?
Якщо в об'єктів одного масиву різні ключі, ключі, яких немає хоча б в одному об'єкті, позначаються необов'язковими через ?. Для одиночного об'єкта всі ключі обов'язкові, якщо не позначено Усі необов'язкові.
Що використовувати: <code>unknown</code> чи <code>any</code>?
unknown безпечніший: TypeScript змусить звузити тип перед використанням значення. any вимикає перевірку типів для цього значення. Використовуйте його, лише якщо плануєте уточнити типи пізніше.
Чому ISO-дата отримує тип <code>string</code>?
У JSON немає типу дати, тому дати передаються рядками. Якщо ви перетворюєте їх через new Date() після розбору, змініть тип властивості на Date у своїй моделі.
Чи впорається він із великим або глибоко вкладеним JSON?
Так. Генерація лінійна щодо розміру введення й виконується локально, тому відповіді в кілька мегабайтів конвертуються менш ніж за секунду.

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

JSON-форматер Форматування, мініфікація й валідація JSON із зазначенням рядка/стовпця помилки. JSON Diff Порівняння двох JSON-об'єктів зі списком змін за шляхами. YAML у JSON Конвертація YAML-конфігів у JSON із підтримкою кількох документів і точними помилками. Конвертер cURL Перетворює команди curl на код fetch, Axios, Python, Go чи PHP.