JSON в TypeScript
Превратите образец документа JSON в интерфейсы или псевдонимы типов TypeScript; необязательные поля и объединения определяются по вашим данным.
Работает полностью в браузере
Типы выводятся из вставленного образца, поэтому они описывают именно его, а не схему: поле, которое в вашем примере строка, в других данных может оказаться числом. Все числа получают тип number, а даты остаются string. Порядок свойств соответствует JSON.parse, который сначала перечисляет ключи-целые числа.
Как получить TypeScript из JSON
- Вставьте ответ или файл JSON в поле. Результат лучше, если в массиве несколько элементов, потому что поля, отсутствующие в части элементов, становятся необязательными.
- Задайте имя типа верхнего уровня, выберите
interfaceилиtypeи при необходимости включите export, readonly или определение необязательных полей. - Скопируйте объявления или скачайте их файлом
.ts. Проверьте имена, потому что они берутся из названий ключей.
Вывод типов из образца JSON
Типы TypeScript описывают форму данных, а ответ в формате JSON уже содержит эту форму: каждый ключ, вид значения за ним и вложенность объектов. Конвертер обходит образец и записывает эту форму в виде объявлений, и вам не придётся вручную набирать сорок полей, прежде чем уверенно обращаться к API.
Важнее всего то, как обрабатываются массивы. Читается каждый элемент массива объектов, и их формы объединяются: ключ, найденный в каждом элементе, остаётся обязательным, ключ, найденный лишь в части элементов, становится необязательным, а значения разных видов образуют объединение. Поэтому образец из нескольких записей даёт гораздо лучшие типы, чем образец из одной. Значение null обрабатывается иначе, чем отсутствующий ключ, потому что для кода, читающего поле, это разные вещи.
Выведенные типы — отправная точка, а не контракт. Они не могут знать, что строка всегда принимает одно из трёх значений, что число на самом деле целочисленный идентификатор или что поле, присутствовавшее во всех ваших примерах, может исчезнуть в рабочей среде. Прочитайте результат, переименуйте неудачные имена и уточните важные типы.
Советы
- Сначала проверьте корректность образца в инструменте «Форматирование и проверка JSON»: он указывает на точный символ синтаксической ошибки.
- Работаете с конфигурацией YAML? Преобразуйте её в «YAML в JSON» и вставьте результат сюда.
- Нужно заглянуть в полезную нагрузку токена до описания типов? Декодируйте её в инструменте «Декодер JWT».
Вопросы и ответы
Как он решает, что поле необязательное?
Если есть массив объектов, объекты объединяются в одну форму. Ключ, который встречается в части элементов, но не во всех, получает ?. Ключ, который присутствует, но в некоторых элементах содержит null, необязательным не считается: он становится T | null. Отключите определение необязательных полей, если хотите, чтобы все ключи были обязательными.
Как именуются вложенные типы?
Каждый вложенный объект получает имя из своего ключа в PascalCase, поэтому billing_address становится BillingAddress. Для массива тип элемента теряет конечную «s», если ключ длиннее 3 букв и не оканчивается на ss, us или is: users даёт User, а address даёт AddressItem. Если двум разным формам нужно одно имя, вторая нумеруется: получаются User и User2.
Что происходит с объектами одинаковой формы?
Они используют одно объявление. Если billing и shipping оба содержат { street, city }, вы получите один интерфейс, названный по первому месту, где он встретился. Два объекта с одинаковыми ключами, но разными типами значений — это разные формы, и они получают разные имена.
Почему пустой массив получает тип unknown[]?
В пустом массиве нет примеров, поэтому о его элементах ничего нельзя вывести. unknown[] — честный ответ; измените его вручную, когда узнаете тип элементов. Массив со смешанными значениями становится объединением, например (string | number)[].
Может ли результат отличаться от реального API?
Да. Образец показывает только те значения, которые в нём есть. Поле, которое всегда присутствует в вашем образце, но иногда отсутствует в рабочих данных, здесь будет обязательным, а строка, похожая на перечисление, получит обычный тип string. Для строгой проверки используйте схему; для быстрого старта используйте этот результат и доработайте его.
Мой JSON загружается на сервер?
Нет. Ничего из вставленного никуда не отправляется; преобразование выполняется в вашем браузере, и после загрузки страницы можно отключиться от сети.