JSON в TypeScript
Превратите JSON-объект в типизированные интерфейсы TypeScript.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Типизировать ответ API за секунды
Вместо ручного написания интерфейсов под большой JSON вставьте его сюда. Инструмент выводит типы рекурсивно: вложенные объекты — в отдельные интерфейсы, типизированные массивы, необязательные поля помечены «?».
-
Вставьте JSON
Ответ API, файл конфигурации, любой объект.
-
Назовите корень
«Root» по умолчанию или имя на ваш выбор.
-
Скопируйте интерфейсы
Готовы для вставки в ваш .ts-файл.
Пример вывода
| Значение JSON | Выведенный тип |
|---|---|
| "name": "Ada" | name: string |
| "age": 36 | age: number |
| "roles": ["admin"] | roles: string[] |
| "profile": { … } | profile: Profile |
| (ключа нет в одном объекте массива) | field?: type |
Вывод по одному примеру: не забудьте уточнить null (часто в union string | null) и проверить типы потом. Всё локально, ваш JSON не покидает браузер.
Частые вопросы
Как выводятся типы?
Инструмент изучает каждое значение: число становится number, строка string, логическое boolean. Объекты превращаются в интерфейсы, названные по их ключу, а массивы типизируются по элементам (string[], MyType[]…).
Как обнаруживаются необязательные поля?
Когда массив содержит несколько объектов, инструмент объединяет их ключи. Ключ, присутствующий в некоторых объектах, но не во всех, помечается необязательным через «?». Именно это и ожидается для разнородных данных API.
Что происходит со значениями null или пустыми массивами?
Значение null типизируется как null (доработать вручную, часто в union вроде string | null). Пустой массив становится unknown[], так как тип его элемента нельзя определить по одному примеру.
Результат готов к вставке в мой код?
Да: корневой интерфейс называется по вашему выбору («Root» по умолчанию), подынтерфейсы объявлены выше, синтаксис — корректный TypeScript. Переименуйте интерфейсы под вашу предметную область для ясности.