JSON в TypeScript: интерфейсы мгновенно

Преобразуйте JSON в интерфейсы TypeScript из любого образца объекта или массива.

Ваш JSON разбирается и преобразуется полностью в вашем браузере, поэтому остаётся на устройстве и ничего не загружается на сервер.

Создаёт и поддерживает Udit Agarwal

Нужны типы Go, Rust или Python? Попробуйте JSON в код.

Об инструменте JSON в TypeScript

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

Возможности

  • Генерирует именованные интерфейсы TypeScript из любого объекта или массива JSON
  • Превращает вложенные объекты в собственные экспортируемые интерфейсы с именами в PascalCase
  • Объединяет массивы объектов в единый интерфейс, охватывающий каждый ключ
  • Помечает ключи, отсутствующие в некоторых элементах, как необязательные знаком вопроса
  • Выводит примитивные типы, массивы, объединения и null из ваших образцов значений
  • Позволяет переименовать корневой интерфейс под вашу модель
  • Проверяет JSON и точно указывает строку и столбец синтаксических ошибок
  • Копирование результата или скачивание его в виде файла .ts

Как использовать JSON в TypeScript

  1. Вставьте ваш объект или массив JSON в поле ввода.
  2. Задайте имя корневого интерфейса под вашу модель или оставьте его как Root.
  3. Просмотрите сгенерированные интерфейсы TypeScript на панели вывода.
  4. Скопируйте результат или скачайте его в виде файла .ts.

Пример

Ввод

{ "id": 1, "name": "Ада", "tags": ["a", "b"] }

Результат

export interface Root {
  id: number;
  name: string;
  tags: string[];
}

Плоский объект JSON становится единым типизированным интерфейсом.

Частые ошибки и устранение неполадок

  • В выводе показана ошибка Invalid со строкой и столбцом. — В JSON есть синтаксическая проблема, например замыкающая запятая, одинарные кавычки или ключ без кавычек. Исправьте её в указанной строке и столбце, и интерфейсы перегенерируются.
  • Ожидаемое поле помечено как необязательное знаком вопроса. — Этот ключ отсутствует хотя бы в одном элементе вашего образца массива. Включите его в каждый элемент, если он всегда должен быть обязательным.
  • Свойство выводится как тип unknown. — Каждое образцовое значение для этого ключа было null или undefined, поэтому конкретный тип вывести не удалось. Предоставьте образец с реальным значением для этого поля.
  • Вставка голого значения, например числа или строки, даёт только псевдоним типа. — Это ожидаемо. Оберните значение в объект или массив, если вы хотите именованный интерфейс вместо одиночного export type псевдонима.

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

Что такое конвертер JSON в TypeScript?
Это инструмент, который читает образец объекта или массива JSON и генерирует соответствующие интерфейсы TypeScript, выводя тип каждого поля, чтобы вы могли вставить результат прямо в свою кодовую базу.
Как преобразовать JSON в интерфейсы TypeScript?
Вставьте ваш JSON в поле ввода, при желании задайте имя корневого интерфейса, затем скопируйте или скачайте сгенерированные интерфейсы с панели вывода.
Как JSON в TypeScript обрабатывает массивы объектов?
Он объединяет ключи всех элементов в один интерфейс. Любой ключ, отсутствующий в некоторых элементах, помечается необязательным знаком вопроса, чтобы тип охватывал весь массив.
Как вложенные объекты преобразуются в TypeScript?
Каждый вложенный объект становится собственным экспортируемым интерфейсом с именем в PascalCase, а родитель ссылается на него по типу, а не встраивает форму.
Что происходит со значениями null или смешанного типа?
Значения null дают объединение с null, а поля, содержащие более одного примитивного типа, становятся объединением, например string | number.
Отправляется ли куда-либо мой JSON при преобразовании в TypeScript?
Нет. Преобразование JSON в TypeScript выполняется полностью в вашем браузере, поэтому вставленные данные обрабатываются локально и не покидают устройство.

Связанные инструменты

  • JSON в код — Генерируйте типы Go, Rust, Python, Java, Kotlin, C# и TypeScript из JSON.
  • Форматировщик JSON — Форматируйте, минимизируйте и проверяйте JSON с указанием места ошибок.
  • JSON в CSV — Преобразуйте массив плоских объектов JSON в CSV.
  • Просмотрщик JSON — Текстовый и древовидный просмотр со сворачиванием/разворачиванием и путями узлов.
  • Просмотр дерева JSON — Изучайте JSON в виде сворачиваемого типизированного дерева.
  • YAML ↔ JSON — Преобразуйте YAML в JSON и обратно.
  • Генератор тестовых данных — Генерируйте фиктивные данные JSON: имена, e-mail, UUID, даты и другое.

Другие инструменты: JSON

  • JSON в CSV — Преобразуйте массив плоских объектов JSON в CSV.
  • Экранирование JSON — Экранируйте текст в строку JSON или разэкранируйте строку JSON в обычный текст.
  • JSON в код — Генерируйте типы Go, Rust, Python, Java, Kotlin, C# и TypeScript из JSON.
  • JSON Diff — Сравнение двух документов JSON со структурным различием.
  • Генератор и валидатор JSON Schema — Генерация JSON Schema из образца или проверка документа.
  • JSON Flatten — Сплющивайте вложенный JSON в ключи с точечной нотацией или разворачивайте обратно.
  • JSON в Zod — Сгенерируйте схему Zod из образца JSON — строки, числа, массивы и вложенные объекты.
  • JSON в Pydantic — Сгенерируйте классы моделей Pydantic v2 из образца JSON с типами и алиасами.
  • JSONPath Evaluator — Проверьте выражение JSONPath на вашем JSON и смотрите совпадения вживую.
  • JSON в TOON — Преобразуйте JSON в TOON и обратно, чтобы упаковать данные в меньше токенов LLM.
  • jq Playground — Вставьте JSON, напишите фильтр jq и мгновенно увидите результат — настоящий движок jq в браузере.
  • TypeScript в тестовый JSON — Сгенерируйте реалистичный тестовый JSON из интерфейса TypeScript.

Все инструменты: JSON (29) · Все инструменты