JSON → TypeScript

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

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

Вставьте JSON в поле слева или откройте файл. Типы обновляются сами во время ввода. В поле «Имя типа» задайте имя корневого объявления, например User, а переключатель выбирает запись через interface или type. При синтаксической ошибке место подчёркивается в поле; если JSON «грязный», сначала исправьте его в инструменте «Исправление JSON».

Код обрабатывается в браузере, не отправляется на сервер и не сохраняется после закрытия страницы. Размер — до 2 МБ в UTF-8.

Длительную обработку можно остановить кнопкой «Отменить обработку». Изменение ввода прерывает предыдущий расчёт; для повторного запуска измените данные или нажмите кнопку примера. Если документ слишком сложен, появится сообщение с предложением разделить его на части.

Для вашего удобства рекомендую использовать полноэкранный режим.

Объявление

Создаём типы…

JSON

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле. Файл обрабатывается только в вашем браузере.
{
  "id": 42,
  "name": "basicweb",
  "tags": ["html", "css"],
  "author": { "name": "Денис", "email": null },
  "articles": [
    { "title": "Flexbox", "views": 1200 },
    { "title": "Grid", "views": 950, "draft": true }
  ]
}

TypeScript

Для генерации типов включите JavaScript. Пример: {"id": 1, "tags": ["html"]} даст interface Root { id: number; tags: string[]; }.


Как строятся типы


    
    
  • Строки, числа и логические значения становятся string, number и boolean; значение null — типом null.
    • 
    
  • Вложенный объект получает имя по ключу: author → Author, user_profile → UserProfile. Объекты с одинаковой структурой используют одно имя.
    • 
    
  • Элементы массива объединяются: поле, которого нет хотя бы в одном элементе, становится необязательным (?), разные типы значений дают объединение вроде string | null. Имя элемента — в единственном числе: articles → Article.
    • 
    
  • Пустой массив описывается как unknown[]: по пустому образцу тип элемента неизвестен.
    • 
    
  • Ключи с дефисами и пробелами записываются в кавычках: "user-name": string.
    • 



JSON и созданные типы с именем Articles:


JSON
[
  { "title": "Flexbox", "views": 1200 },
  { "title": "Grid", "views": 950, "draft": true, "author": null }
]


JavaScript
export type Articles = ArticlesItem[];

export interface ArticlesItem {
  title: string;
  views: number;
  draft?: boolean;
  author?: null;
}


Что проверить вручную


Типы строятся по одному образцу данных, поэтому знают только то, что в нём есть. Если поле в примере равно null, его настоящий тип неизвестен — замените null на string | null или другой тип по документации API. Если поле присутствует во всех элементах примера, но в реальных ответах бывает пропущено, добавьте ? вручную. Конкретные значения вроде "admin" не превращаются в литеральные типы — при необходимости сузьте string до объединения допустимых строк.




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


Чем interface отличается от type?


Для описания объектов они почти взаимозаменяемы. interface можно расширять и дополнять повторным объявлением, а type умеет описывать объединения и псевдонимы любых типов. Массив или значение в корне JSON всегда описывается через type.


Почему поле получилось необязательным?


Поле есть не во всех элементах массива из примера. Если в реальных данных оно обязательно, уберите ? или добавьте в пример элемент, где поле заполнено.


Безопасно ли вставлять ответы API?


Да. Типы создаются в вашем браузере, данные не отправляются на сервер и не сохраняются после закрытия вкладки.




Изучить JSON


Синтаксис JSON и его разбор в JavaScript описаны в статьях об объекте JSON и методе JSON.parse().