JSON в TypeScript

Вставьте образец JSON, и инструмент выведет интерфейсы TypeScript, соответствующие его структуре. Типы полей определяются по наблюдаемым значениям (string, number, boolean, Array<T>); вложенные объекты получают собственные именованные интерфейсы; а поля, наблюдаемые как null или отсутствующие, становятся необязательными (?) или допускающими null (| null) в зависимости от выбранного стиля.

Как преобразовать JSON в TypeScript

  1. 1

    Вставьте JSON

    Достаточно одного образца, но несколько образцов повышают точность вывода допустимости null и объединённых типов.

  2. 2

    Выберите стиль вывода

    `interface` (по умолчанию), псевдоним `type` или интерфейс только для чтения, в котором все поля помечены как `readonly`.

  3. 3

    Выберите стратегию для необязательных полей

    Пометьте поле как `?` (может отсутствовать) или `| null` (всегда присутствует, но может быть null).

  4. 4

    Скопируйте типы

    Вставьте их в файл `.ts`, и вы получите строго типизированный доступ к ответу API.

Пример

Ввод:

{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }

Результат:

interface User {
  id: number;
  name: string;
  age: number | null;
  tags: string[];
  address: Address;
}

interface Address {
  city: string;
}

Сопоставление типов

JSON TypeScript
строка string
целое число / дробное число number
логическое значение boolean
только null null
null + T T | null (или T?)
массив из T T[]
смешанный массив (T1 | T2)[]
объект Именованный вложенный интерфейс
пустой массив unknown[] (вывести нельзя)

Необязательное поле против поля, допускающего null

  • foo?: string, поле может отсутствовать в объекте. Применяется проверка на undefined.
  • foo: string | null, поле всегда присутствует, но может быть явно равно null.
  • foo?: string | null, может отсутствовать ИЛИ быть равным null.

В самом JSON нет undefined, но разные API по-разному сигнализируют об отсутствии поля. Согласуйте со семантикой вашего API.

  • REST API обычно опускают отсутствующие поля -> ?:.
  • GraphQL всегда возвращает каждое запрошенное поле -> | null.
  • Некоторые SDK используют оба подхода в разных контекстах.

Объединённые типы против литеральных типов

Если инструмент видит одно и то же строковое поле с небольшим набором значений в разных образцах ("status": "pending", "active", "archived"), он может вывести объединение строковых литералов:

status: "pending" | "active" | "archived";

Включите «выводить объединения строковых литералов», если вам это нужно.

Частые ошибки

  • Вывод по одному образцу. Каждое поле становится обязательным; допустимость null наблюдать невозможно. Для более точных типов передайте 5-10 разнообразных образцов.
  • Пустые массивы. "tags": [] не даёт информации о типе, генератор выдаёт unknown[]. Предоставьте образец хотя бы с одним элементом.
  • Массивы смешанного типа. [1, "two", true] даёт (number | string | boolean)[]. Обычно это означает, что JSON стоит переработать, а не типизировать как есть.
  • Числовые строковые ключи. JSON {"1": "a", "2": "b"} в TypeScript всё равно является объектом (Record<string, string>), а не массивом. Генератор обрабатывает это правильно.

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

Ориентируйтесь на ваш API. REST API, которые опускают null-поля, требуют ?:. GraphQL, который всегда возвращает каждое выбранное поле, требует | null. Если сомневаетесь, T | null с обязательным синтаксисом строже и ловит больше ошибок на этапе компиляции.

Да, если включить эту опцию и предоставить несколько образцов. Поле, у которого в разных образцах наблюдается от 2 до 5 различных строковых значений, выводится как литеральное объединение. При превышении этого порога происходит откат к string.

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

Да. Каждый вложенный объект становится отдельным интерфейсом, имя которого выводится из ключа (user.address -> Address). Для очень глубоких или повторяющихся структур рассмотрите JSON Schema и специализированный генератор schema-to-TS.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 по короткой форме: задайте entry, папку вывода и режим, затем включите TypeScript, Babel, загрузчик CSS, HtmlWebpackPlugin и сервер разработки.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Инструмент доступен на других языках