VELDAT

Типы TypeScript из JSON

Текст обрабатывается в браузере и не отправляется на сервер.

Строит интерфейсы TypeScript по JSON: все элементы массива сводятся в один тип, поле, которого нет у части элементов, становится необязательным, одинаковые объекты получают один тип. Рядом — схема структуры с полями и типами.

Данные

Вставьте данные или откройте файл: дерево и перевод в другие форматы появятся здесь.

Схема появится, когда в поле будут данные

Дальше обычно делают

Что такое типы TypeScript и зачем строить их по JSON

TypeScript — язык программирования, JavaScript с описанием типов, на нём пишут многие веб-интерфейсы и серверы. Тип, или интерфейс, перечисляет поля объекта и что в них лежит: строка, число, список других объектов. Когда код знает форму данных, редактор подсказывает имена полей, а опечатка в имени или число вместо строки видны до запуска программы.

Типы по JSON нужны разработчику, который подключает новый API или разбирает чужую выгрузку: вместо того чтобы переписывать поля из документации, их строят по настоящему ответу. Чем полнее пример, тем точнее результат: в одном элементе массива не видно полей, которые бывают не у всех. Сгенерированные типы — отправная точка. Стоит дать корневому типу понятное имя вместо Root, сверить необязательные поля с документацией и помнить, что поле, которое в примере всегда заполнено, на деле может прийти пустым — тогда к типу добавляют | null.

Как пользоваться

  1. Вставьте JSON в поле слева или откройте файл: ответ API, выгрузку или конфигурацию.

  2. Ниже, в секции «Структура», появится схема: блоки объектов с полями и типами.

  3. В шапке секции откройте «Выгрузить» и скопируйте или скачайте TypeScript.

Пример

Было
{"id": 10482, "customer": {"name": "ООО Ромашка", "inn": "7701234567"}, "items": [{"sku": "A-100", "qty": 10, "price": 450.5}, {"sku": "B-205", "qty": 2, "price": 3900, "discount": 5}], "paid": false}
Стало
export interface Root {
  id: number;
  customer: Customer;
  items: Item[];
  paid: boolean;
}

export interface Customer {
  name: string;
  inn: string;
}

export interface Item {
  sku: string;
  qty: number;
  price: number;
  discount?: number;
}

Вопросы и ответы

Как типы учитывают разные элементы массива?

Все элементы массива сводятся в один тип. Поле, которого нет у части элементов, становится необязательным: discount?: number. Если у поля в разных элементах разные значения, тип — объединение: string | null. Поэтому лучше вставлять ответ API целиком, а не один элемент.

Как называются типы?

Корень — Root, остальные — по ключу: customer — Customer. Тип элемента массива — ключ в единственном числе: items — Item, categories — Category. Если корень — массив, его элемент называется RootItem. Совпавшие имена получают номер: Item2.

Что, если одинаковые объекты лежат в разных местах?

Объекты с теми же полями и типами получают один тип: у billing и shipping с полями city и zip будет общий Billing. Если у объекта есть лишнее поле, это уже другой тип.

Можно ли получить типы из YAML, XML или CSV?

Да. Схема строится по разобранным данным, поэтому типы выгружаются для любого из четырёх форматов. Так же выгружается JSON Schema.

Задача сложнее инструмента

Архитектуру и интеграции с API можно обсудить на консультации: выберите время, и вы получите письменный итог с конкретными шагами.

Записаться на консультацию