Создайте интерфейсы или типы TypeScript по образцу JSON
Работает в вашем браузере. Ничего из того, что вы вводите, никуда не отправляется.Писать интерфейс вручную по ответу JSON утомительно, и легко ошибиться. Вставьте 1 образец и получите интерфейсы или типы TypeScript с учётом вложенных объектов и массивов. Образец остаётся в вашем браузере, так что ответ с настоящими данными никуда не уходит.
Эта страница переведена машинным способом с английского оригинала. Перевод ещё не проверен человеком, поэтому ориентируйтесь на английскую версию. Читать английский оригинал
Вставьте образец ответа JSON в панель JSON или нажмите Показать пример.
Задайте Имя корня и выберите Interface или Type.
Выберите, как типизировать значения null: «| null» или Необязательное, и включите или выключите Export и Readonly.
Нажмите Копировать или значок загрузки, чтобы сохранить файл .ts с именем корневого типа.
Этот конвертер JSON в TypeScript читает образец ваших данных и пишет соответствующие интерфейсы или псевдонимы типов. Каждый вложенный объект получает своё именованное объявление, массивы — типы элементов, а результат обновляется во время ввода, так что можно вставить ответ и через секунду скопировать рабочие типы.
Разработчики пользуются им при подключении нового API: вставляют один ответ со вкладки сети и получают типы для вызова fetch. Он помогает и тогда, когда файл конфигурации или данные вебхука разрослись настолько, что типизировать их вручную невозможно, или когда достались нетипизированные JSON-фикстуры и хочется, чтобы компилятор начал ловить ошибки.
Генератор просматривает каждый элемент массива, а не только первый. Объекты в массиве объединяются в один интерфейс, а ключ, которого нет в некоторых из них, становится необязательным. Поле, в котором встречаются значения разных видов, становится объединением, например string | number. Значения null либо добавляют | null, либо делают свойство необязательным — выбор за вами. Одинаковые структуры используют одно объявление, а ключи вроде pin-code берутся в кавычки.
Всё работает в вашем браузере, и ничего из вставленного никуда не отправляется. Типы описывают только данный образец, поэтому включите пример каждого ожидаемого варианта. Ctrl+Enter копирует результат. Связанные инструменты: JSON Formatter, YAML to JSON, CSV to JSON.
Вставьте JSON в левую панель. Интерфейсы появляются справа по мере ввода. Задайте имя корня, выберите interface или type, затем нажмите Копировать или Ctrl+Enter и вставьте результат в файл .ts.
Здесь всё бесплатно, без регистрации и без ограничения числа преобразований. Преобразование целиком выполняется в браузере, поэтому вставленный JSON никогда не покидает ваше устройство и ни одна копия не попадает на сервер. Ответы API с токенами доступа, адресами почты или данными заказов можно вставлять без опасений.
Если массив содержит несколько объектов, они объединяются в один интерфейс. Ключ, который есть только в части из них, помечается как необязательный вопросительным знаком. Если для null выбран вариант Необязательное, ключ со значением null тоже помечается как необязательный.
Оба описывают одну и ту же структуру. Интерфейсы можно расширять и объединять, и многие команды предпочитают их для объектов. Псевдонимы типов также умеют выражать объединения и сопоставленные типы. Выберите то, что уже используется в вашем коде; инструмент пишет и то и другое.
Тип элемента становится объединением, например (string | number)[]. Пустой массив превращается в unknown[], потому что выводить не из чего; добавьте один пример элемента, чтобы получить точный тип.
Да. Файлы размером в несколько мегабайт преобразуются гораздо быстрее секунды. Глубокая вложенность не проблема: каждый уровень получает своё именованное объявление, а одинаковые структуры переиспользуются, а не повторяются.
Всё ещё не получается? Задайте вопрос об инструменте «JSON в TypeScript» и ответить может любой, кто знает. Учётная запись не нужна.