Конвертер JSON в TypeScript
Вставьте ответ API и получите готовые интерфейсы или псевдонимы типов TypeScript с выведенными вложенными типами, необязательными полями и объединениями с null.
Работает в браузереБез регистрацииНичего не загружается
Как пользоваться: JSON в TypeScript
- Вставьте пример JSON, например ответ API, в левое поле или откройте файл
.json. - Задайте имя корневого типа (например,
UserилиApiResponse). - Выберите объявления
interfaceилиtypeи включитеexport,readonlyили все необязательные поля. - Выберите
unknown(безопаснее) илиanyдля значений, тип которых по примеру не определить, например пустых массивов и null. - Скопируйте сгенерированный код или скачайте его как файл
.ts.
Как выводятся типы
- Примитивы: строки, числа и логические значения отображаются в
string,numberиboolean. - Вложенные объекты становятся отдельными именованными интерфейсами в PascalCase, так что
billing_addressпревращается вBillingAddress. - Массивы объектов объединяются в один тип элемента с именем в единственном числе:
usersдаётUser[]. Ключ, отсутствующий в части элементов, становится необязательным (key?:). - Значения null объединяются с другими значениями этого ключа:
string | null. Ключ, который всегдаnull, получает типunknownилиany. - Смешанные массивы становятся массивами объединений, например
(number | string)[]. - Одинаковые структуры объявляются один раз и переиспользуются, а разные структуры с одинаковым именем получают числовой суффикс.
- Ключи, не являющиеся корректными идентификаторами, например
"first-name"или"2fa", берутся в кавычки.
interface или type
Для простых структур объектов они почти взаимозаменяемы. Объявления interface можно расширять и объединять, и они дают чуть более понятные ошибки компилятора. Псевдонимы type также умеют выражать объединения и mapped types. Многие команды используют интерфейсы для моделей API и типы для всего остального; выбирайте то, что ожидает ваша кодовая база или линтер (@typescript-eslint/consistent-type-definitions).
Как получить более точные типы
Типы могут быть полными ровно настолько, насколько полон пример. Вставьте ответ с необязательными полями или массив с несколькими разными элементами, чтобы генератор смог определить необязательные и nullable-ключи. Даты и перечисления приходят в JSON как обычные строки; сужайте их вручную, например status: 'active' | 'disabled'. Для валидации во время выполнения используйте сгенерированные типы вместе с библиотекой схем вроде Zod.
Часто задаваемые вопросы
Загружается ли мой JSON?
Как определяются необязательные свойства?
?. Для одиночного объекта все ключи обязательны, если не отмечено Все необязательные.Что использовать: <code>unknown</code> или <code>any</code>?
unknown безопаснее: TypeScript заставит сузить тип перед использованием значения. any отключает проверку типов для этого значения. Используйте его, только если планируете уточнить типы позже.Почему ISO-дата получает тип <code>string</code>?
new Date() после разбора, поменяйте тип свойства на Date в своей модели.