JSON в TypeScript: создание интерфейсов из JSON

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

Вставьте типичное значение JSON в поле Образец JSON. Типы появляются по мере ввода.
Введите имя в поле Имя корневого интерфейса для самого внешнего объекта, например Product.
Снимите отметку Писать export перед каждым объявлением, если типы остаются в том же файле.
Скопируйте Интерфейсы TypeScript или скачайте их как types.ts.

Как определяются типы

Каждый объект JSON становится интерфейсом. Его имя берётся из ключа, в котором он лежит, в PascalCase: ключ first-name даёт FirstName. Элементы массива берут единственное число от ключа массива, поэтому items даёт Item. Когда имя уже занято, перед ним ставится имя родителя.

Строки, числа и логические значения становятся string, number и boolean. null записывается как null в объединении, например number | null. Массив значений становится типом с []; пустой массив становится unknown[], потому что образец не говорит, что в нём хранится.

ключ "first-name" -> свойство "first-name": string;   items -> Item[]

Несколько образцов в одном массиве

Список объектов читается как одна форма. Ключ, который есть в каждом элементе, обязателен; ключ, которого нет в некоторых элементах, записывается со знаком вопроса как необязательный. Ключ, который в разных элементах хранит разные типы, становится объединением: сначала string, затем number, boolean, интерфейс, массив и null.

Образец показывает только те значения, которые в нём есть. Ключ, который настоящий API иногда опускает, может отсутствовать в одном примере, поэтому добавьте второй элемент с ним, если нужно, чтобы тип показывал его как необязательный.

Пример: образец по умолчанию

Образец по умолчанию — один объект с пятью ключами. Его ключ owner содержит объект, поэтому в коде есть интерфейс Owner. Ключ items — массив из двух объектов, поэтому в коде есть интерфейс Item. Ключи sku и price есть в обоих элементах и обязательны; ключ discount равен null в одном элементе и числу в другом, поэтому он number | null; ключ note есть только в одном элементе и необязателен.

Результат содержит три объявления: Root, Owner и Item, и счётчик показывает 3.

Частые вопросы

Почему поле помечено знаком вопроса?

Поле отсутствует хотя бы в одном объекте образца. Такое поле может отсутствовать в настоящих данных, поэтому TypeScript считает его необязательным, а код, который его читает, должен сначала проверить его.

Почему поле показывает объединение, например string | number?

Разные элементы хранят для этого ключа разные типы. Тип перечисляет все типы, встреченные в образце, поэтому код должен проверить, какой из них у него есть, прежде чем использовать значение.

Инструмент проверяет мои настоящие данные API?

Нет. Он пишет типы образца, который вы вставили. Образец с одним элементом не может показать поле, которое появляется только позже, поэтому, если возможно, используйте типичный ответ с несколькими элементами.

Почему некоторые имена свойств записаны в кавычках?

Имя, которое не является простым идентификатором, например first-name или 2fa, в TypeScript должно быть в кавычках. Имена, которые являются допустимыми идентификаторами, записываются без кавычек.

Можно ли использовать результат с JavaScript?

Интерфейсы существуют только в TypeScript. При компиляции они удаляются, поэтому в проекте на JavaScript JSON нужно проверять другим способом или использовать шаг сборки TypeScript.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..

Результат