MyDevTools
RU

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

Генерация интерфейсов и type-алиасов TypeScript по образцу JSON: вложенные типы, объединение элементов массива, опциональные поля, export.

Введённые данные и файлы остаются в браузере

JSON

Вставьте пример JSON — интерфейсы TypeScript создаются по мере ввода.

В редакторе Tab делает отступ. Чтобы выйти из редактора, нажмите Esc, затем Tab.

TypeScript

TypeScript-интерфейсы появятся здесь...

На этой странице

Вставьте образец JSON — ответ API, конфиг, тестовую фикстуру — и получите объявления TypeScript прямо по мере ввода. Вложенные объекты становятся отдельными именованными интерфейсами, так что результат можно сразу положить в файл .ts.

Подробное описание функциональности

Типы выводятся по значениям: string, number, boolean, null, массивы — T[], смешанные массивы — объединения вроде (number | string | null)[], пустой массив — unknown[]. Каждый вложенный объект получает интерфейс с именем по пути в PascalCase (shipping_address внутри Order → OrderShippingAddress). Все объекты массива сливаются в один тип элемента: ключ, которого нет в части элементов, становится опциональным, а ключ с разными типами значений получает объединение.

Опции: Имя корневого типа задаёт имя верхнего типа (по умолчанию Root); Ключевое слово export добавляет export к каждому объявлению; Опциональные поля (?) — включено по умолчанию — помечает ключи со значением null как опциональные; Использовать type alias выводит type X = { … }; вместо interface X { … }. Если корень — массив, создаётся алиас вроде export type Users = UsersItem[];. Ключи, которые не являются идентификаторами, берутся в кавычки ("order-id": string;), совпадающие имена типов получают числовой суффикс.

Результат пересобирается при каждой правке (после короткой паузы), по кнопке Конвертировать и по Ctrl+Enter; для некорректного JSON показывается ошибка парсера. Итог выводится в редактор только для чтения — его можно Копировать или Скачать .ts как types.ts. Всё работает локально: образец не загружается и не сохраняется.

Практические примеры

Объект из API: {"id":7,"user_name":"ann","tags":["a"],"manager":null} с именем User и export даёт export interface User { id: number; user_name: string; tags: string[]; manager?: null; }.

Массив разных объектов: [{"id":1,"email":"[email protected]"},{"id":2,"phone":"555"}] с именем Users даёт export interface UsersItem { id: number; email?: string; phone?: string; } и export type Users = UsersItem[];.

type-алиасы и ключи в кавычках: {"order-id":"A1","items":[{"sku":"x","qty":2}],"shipping_address":{"city":"Omsk"}} с именем Order и type alias даёт type OrderItemsItem = { sku: string; qty: number; };, type OrderShippingAddress = { city: string; }; и type Order = { "order-id": string; items: OrderItemsItem[]; shipping_address: OrderShippingAddress; };.

Как использовать этот инструмент

  1. Вставьте JSON

    Поместите образец JSON в редактор JSON. Поле TypeScript обновится автоматически.

  2. Настройте опции

    Задайте Имя корневого типа и при необходимости переключите Ключевое слово export, Опциональные поля (?) и Использовать type alias.

  3. Заберите типы

    Нажмите Копировать, чтобы скопировать объявления, или Скачать .ts, чтобы сохранить их как types.ts.

Советы и лучшие практики

  • Образец знает только свои значения: поле, равное null в образце, получит тип null — замените его на настоящий (например, string | null) вручную.
  • Чтобы тип элемента массива получился точным, дайте несколько элементов с разными необязательными полями.
  • Все числа становятся number, даты в формате ISO остаются string.
  • Отключите «Опциональные поля (?)», если null всегда приходит явно и ключ manager: null должен быть обязательным.
  • Имена свойств сохраняют исходное написание; в PascalCase переводятся только имена типов.