JSON в TypeScript

Новое

Генерируйте интерфейсы TypeScript из примера JSON, с вложенными типами.

Output

Root name

JSON input

TypeScript output

Runs entirely in your browser. Nothing is uploaded.

Преобразование JSON в TypeScript одним кликом

Этот конвертер JSON в TypeScript генерирует готовые к использованию интерфейсы, типы или классы из JSON-примера, чтобы вам больше никогда не приходилось вручную писать тип для ответа API. Вставьте payload слева — и чистый, корректно отформатированный TypeScript мгновенно появится справа. Скопируйте его или скачайте в виде файла .ts.

Это быстрая, бесплатная альтернатива без регистрации: один шаг JSON в TypeScript интерфейс, работающий полностью в вашем браузере, с автоматическим выводом вложенных объектов, массивов и объединений. Никаких ограничений на размер файла, никаких суточных лимитов использования, ничего не покидает ваше устройство.

Интерфейсы, типы или классы — ваш выбор

Используйте переключатель вывода для выбора между interface, псевдонимом type или class. Режим интерфейса используется по умолчанию и выводит export interface Root { … }; режим типа генерирует export type Root = { … } для кодовых баз, предпочитающих псевдонимы; а режим класса объявляет поля в export class. Один и тот же JSON задействует все три режима, так что за несколько секунд вы можете сравнить их на своих данных.

Вы можете переименовать корневой объект, включать или отключать ключевое слово export, и выбор запоминается на следующий раз — превращая инструмент в гибкий генератор TypeScript типов, а не в конвертер одного формата.

Умный вывод для вложенных объектов, массивов и объединений

Движок обходит ваш JSON и строит именованный интерфейс для каждого объекта, именуя вложенные интерфейсы по их ключам и приводя элементы массивов к единственному числу — массив orders становится Order[]. Идентичные формы дедублируются в один интерфейс, а массивы смешанных типов сворачиваются в объединение вроде (string | number)[].

Включите обнаружение перечислений, и повторяющиеся строковые значения будут выводиться как литеральное объединение — колонка статусов с "отправлено" и "в обработке" станет "в обработке" | "отправлено" вместо просто string. Такая точность делает вывод похожим на рукописный код.

Опциональные, null и readonly поля — всё правильно

Реальные данные API бывают непоследовательными, поэтому конвертер обрабатывает их честно. При преобразовании ответа API в TypeScript ключи, встречающиеся лишь в некоторых элементах массива, помечаются как опциональные с помощью ?, а вы решаете, как типизировать null: оставить явным объединением | null или включить null → опциональный, превращая zip: string | null в zip?: string.

Переключатель readonly добавляет модификатор readonly к каждому свойству — идеально для неизменяемых моделей. Совместное использование этих опций позволяет подстроить генерацию под стиль вашего проекта, не исправляя результат вручную.

Сравнение с quicktype, json2ts и MakeTypes

quicktype.io — наиболее функциональный вариант для многоязычной генерации: он поддерживает Python, Go, C#, Kotlin и множество других языков помимо TypeScript. Такой широкий охват иногда приводит к тому, что TypeScript-вывод содержит вспомогательные runtime-функции quicktype и лишний шаблонный код. Кроме того, ваш JSON обрабатывается на их серверах, что важно для конфиденциальных данных. json2ts.com проще и генерирует базовые интерфейсы, но не поддерживает обнаружение перечислений, readonly и опции обработки null.

MakeTypes генерирует TypeScript-классы со встроенным runtime-разбором, что полезно при необходимости встроенной валидации, но значительно увеличивает объём кода. Конвертер UtiloKit генерирует чистые типы с нулевым runtime-следом — только нужные вашему коду интерфейсы или псевдонимы типов, полностью в браузере, без загрузки на сервер и без аккаунта.

Приватность по умолчанию — JSON никогда не покидает браузер

Каждое преобразование выполняется локально в вашей вкладке с использованием JavaScript. JSON никогда не загружается на сервер, не хранится и не передаётся третьим лицам — инструмент работает офлайн и безопасен для конфиденциальных payload, внутренних API и продакшн-данных. Добавьте этот конвертер JSON в TypeScript в закладки и пользуйтесь им всякий раз, когда нужны типы быстро.

Терпимый парсер принимает даже JSON-подобный ввод с // комментариями, завершающими запятыми и строками в одинарных кавычках — можно вставлять объектный литерал JavaScript прямо из редактора и сразу получать корректный результат. Никаких дополнительных шагов.

Frequently asked questions

Как преобразовать JSON в TypeScript?

Вставьте JSON в панель ввода (или нажмите «Пример» для загрузки образца) — соответствующий TypeScript мгновенно появится в панели вывода. Например, {"id": 1, "name": "Иван"} станет export interface Root { id: number; name: string; }. Нажмите «Копировать» или «Скачать .ts», чтобы сразу добавить типы в проект.

Как сгенерировать TypeScript-интерфейс из JSON?

Оставьте вывод в режиме Interface (по умолчанию) — каждый JSON-объект станет отдельным export interface. Укажите корневое имя в соответствующем поле для управления названием верхнего уровня. Например, { "id": 1, "name": "Иван" } с корневым именем User даст export interface User { id: number; name: string; }. Вложенные объекты автоматически превращаются в именованные интерфейсы.

В чём разница между interface и псевдонимом типа?

Оба описывают одну и ту же форму объекта — выберите предпочтительный вариант с помощью переключателя Interface / Type / Class. Режим Interface выводит export interface Root { … }, который можно дополнять через слияние деклараций; режим Type выводит export type Root = { … }, поддерживающий объединения и примитивы; режим Class выводит export class Root { … } с объявленными полями.

Как обрабатывать опциональные или null-поля (? / | null)?

Два переключателя управляют этим. «Опциональный (?) для отсутствующих ключей» помечает как опциональное любое свойство, отсутствующее в некоторых элементах массива объектов. «null → опциональный» переписывает nullable-поле вроде zip: string | null в zip?: string; отключите для сохранения явного объединения | null. Комбинируйте их под стиль null-обработки вашей команды.

Безопасно ли вставлять JSON сюда?

Да. Преобразование на 100% происходит на стороне клиента: JSON разбирается и конвертируется в TypeScript с помощью JavaScript в вашей вкладке браузера, никогда не загружается, не логируется и не отправляется на сервер. Вы можете отключить интернет — инструмент продолжит работать.

Как работает обнаружение строковых перечислений?

Включите «Обнаруживать строковые перечисления» — столбец повторяющихся строк вроде «отправлено» и «в обработке» будет выведен как литеральное объединение "в обработке" | "отправлено" вместо обычного string. Это делает сгенерированные типы значительно точнее и полезнее.

Можно ли генерировать типы из ответа API или Swagger?

Да — вставьте реальный JSON-ответ вашего API, и инструмент выведет готовые интерфейсы, которые можно сразу подключить к fetch- или axios-вызовам для автодополнения и типобезопасности. Для Swagger/OpenAPI-эндпоинта скопируйте тело примера ответа (JSON, а не схему) и конвертируйте его.

Add, subtract, multiply matrices and compute determinant, inverse and transpose for 2×2–4×4 matrices.

Данные и форматы