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.

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

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