Конвертер 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?
Да. Генерация линейна относительно размера ввода и выполняется локально, поэтому ответы в несколько мегабайт конвертируются меньше чем за секунду.

Похожие инструменты