JSON в TypeScript
Вставьте образец JSON, и инструмент выведет интерфейсы TypeScript, соответствующие его структуре. Типы полей определяются по наблюдаемым значениям (string, number, boolean, Array<T>); вложенные объекты получают собственные именованные интерфейсы; а поля, наблюдаемые как null или отсутствующие, становятся необязательными (?) или допускающими null (| null) в зависимости от выбранного стиля.
Как преобразовать JSON в TypeScript
-
1
Вставьте JSON
Достаточно одного образца, но несколько образцов повышают точность вывода допустимости null и объединённых типов.
-
2
Выберите стиль вывода
`interface` (по умолчанию), псевдоним `type` или интерфейс только для чтения, в котором все поля помечены как `readonly`.
-
3
Выберите стратегию для необязательных полей
Пометьте поле как `?` (может отсутствовать) или `| null` (всегда присутствует, но может быть null).
-
4
Скопируйте типы
Вставьте их в файл `.ts`, и вы получите строго типизированный доступ к ответу API.
Пример
Ввод:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
Результат:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
Сопоставление типов
| JSON | TypeScript |
|---|---|
| строка | string |
| целое число / дробное число | number |
| логическое значение | boolean |
| только null | null |
| null + T | T | null (или T?) |
| массив из T | T[] |
| смешанный массив | (T1 | T2)[] |
| объект | Именованный вложенный интерфейс |
| пустой массив | unknown[] (вывести нельзя) |
Необязательное поле против поля, допускающего null
foo?: string, поле может отсутствовать в объекте. Применяется проверка наundefined.foo: string | null, поле всегда присутствует, но может быть явно равно null.foo?: string | null, может отсутствовать ИЛИ быть равным null.
В самом JSON нет undefined, но разные API по-разному сигнализируют об отсутствии поля. Согласуйте со семантикой вашего API.
- REST API обычно опускают отсутствующие поля ->
?:. - GraphQL всегда возвращает каждое запрошенное поле ->
| null. - Некоторые SDK используют оба подхода в разных контекстах.
Объединённые типы против литеральных типов
Если инструмент видит одно и то же строковое поле с небольшим набором значений в разных образцах ("status": "pending", "active", "archived"), он может вывести объединение строковых литералов:
status: "pending" | "active" | "archived";
Включите «выводить объединения строковых литералов», если вам это нужно.
Частые ошибки
- Вывод по одному образцу. Каждое поле становится обязательным; допустимость null наблюдать невозможно. Для более точных типов передайте 5-10 разнообразных образцов.
- Пустые массивы.
"tags": []не даёт информации о типе, генератор выдаётunknown[]. Предоставьте образец хотя бы с одним элементом. - Массивы смешанного типа.
[1, "two", true]даёт(number | string | boolean)[]. Обычно это означает, что JSON стоит переработать, а не типизировать как есть. - Числовые строковые ключи. JSON
{"1": "a", "2": "b"}в TypeScript всё равно является объектом (Record<string, string>), а не массивом. Генератор обрабатывает это правильно.
Часто задаваемые вопросы
Ориентируйтесь на ваш API. REST API, которые опускают null-поля, требуют ?:. GraphQL, который всегда возвращает каждое выбранное поле, требует | null. Если сомневаетесь, T | null с обязательным синтаксисом строже и ловит больше ошибок на этапе компиляции.
Да, если включить эту опцию и предоставить несколько образцов. Поле, у которого в разных образцах наблюдается от 2 до 5 различных строковых значений, выводится как литеральное объединение. При превышении этого порога происходит откат к string.
В большинстве случаев interface, он открыт для расширения, и TypeScript оптимизирует его лучше. Псевдонимы type удобны для объединений, пересечений, кортежей и сопоставленных типов. Для типов, полученных из JSON, подойдёт любой вариант; выбирайте по соглашению проекта.
Да. Каждый вложенный объект становится отдельным интерфейсом, имя которого выводится из ключа (user.address -> Address). Для очень глубоких или повторяющихся структур рассмотрите JSON Schema и специализированный генератор schema-to-TS.
Сопутствующие инструменты
Справочная таблица ASCII
Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.
Справочник сочетаний клавиш
Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.
Справочник символов HTML
Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.
Шпаргалка по Markdown
Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.
Конвертер CMYK в RGB
Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.
Счетчик FPS
Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.
Инструмент доступен на других языках
- JSON ke TypeScript [ID]
- JSONからTypeScriptへ [JA]
- JSON เป็น TypeScript [TH]
- JSON sang TypeScript [VI]
- JSON zu TypeScript [DE]
- JSON에서 TypeScript로 [KO]
- JSON do TypeScript [PL]
- JSON para TypeScript [PT]
- JSON a TypeScript [ES]
- JSON till TypeScript [SV]
- تحويل JSON إلى TypeScript [AR]
- JSON vers TypeScript [FR]
- JSON naar TypeScript [NL]
- JSON'dan TypeScript'e [TR]
- JSON 转 TypeScript [ZH]
- JSON to TypeScript [EN]
- JSON a TypeScript [IT]