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

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

Язык:

Имя типа:

Ввод (JSON)

Вывод (typescript)

Генерация интерфейсов TypeScript из JSON

Типизировать ответы API вручную долго, и ошибиться при этом легко. Конвертер анализирует пример JSON и создаёт по одному экспортируемому интерфейсу на каждую форму объекта: вложенные объекты получают собственные именованные интерфейсы, массивы становятся типизированными массивами вроде string[], а числа, строки и логические значения отображаются в number, string и boolean. Результат содержит только объявления типов без какого-либо исполняемого кода, поэтому размер бандла не увеличивается.

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

Вставьте реальный ответ API, с которым вы интегрируетесь, — например, скопированный из вкладки «Сеть» в инструментах разработчика браузера.
Укажите имя типа, отражающее суть корневого объекта, например User или ApiResponse.
Скопируйте интерфейсы в файл types.ts и типизируйте результат запроса, например const user: User = await res.json().

Часто задаваемые вопросы

Генерируются интерфейсы или псевдонимы типов (type)?: Генерируются экспортируемые интерфейсы. Для типизации данных API они ведут себя так же, как объектные псевдонимы типов, и после копирования их можно свободно переименовать или преобразовать.
Как получить необязательные свойства (field?: string)?: Генератор знает только то, что есть в примере. Поместите в массив несколько объектов, в части из которых поле отсутствует, — тогда свойство будет сгенерировано как необязательное. Поле, которое в примере всегда равно null, получит тип null, поэтому, если вы знаете его настоящий тип, подставьте реальное значение.
Проверяют ли интерфейсы данные во время выполнения?: Нет. Типы TypeScript стираются при компиляции, поэтому некорректный ответ не вызовет исключения. Если нужны проверки во время выполнения, сгенерируйте JSON Schema с помощью инструмента JSON Schema и валидируйте данные по ней или используйте библиотеку валидации.

Пример: JSON в TypeScript

Исходный JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": "ada@example.com",
  "roles": ["admin", "editor"],
  "profile": { "bio": "Mathematician", "website": "https://example.com" }
}

Сгенерированный код: TypeScript (User)

export interface User {
    id:      number;
    name:    string;
    email:   string;
    roles:   string[];
    profile: Profile;
}

export interface Profile {
    bio:     string;
    website: string;
}