JSON в TypeScript
Определяйте интерфейсы TypeScript по образцу JSON локально. Бесплатный генератор обрабатывает вложенные объекты, массивы и объединения типов без загрузки ваших данных.
🔒 Работает полностью в вашем браузере — ничего не загружаетсяЧто делает JSON в TypeScript
JSON в TypeScript читает образец JSON и выводит из него строго типизированные интерфейсы TypeScript, описывающие его структуру. Инструмент рекурсивно обходит значение: объекты становятся именованными интерфейсами, примитивные значения — соответствующими типами string, number, boolean или null, а массивы — типами элементов в квадратных скобках. Если массив содержит элементы разных типов, генератор объединяет их в union, чтобы результат по-прежнему соответствовал исходным данным. Это полезно при работе с API без опубликованных типов, при добавлении типобезопасности к устаревшей нагрузке или при превращении быстрого тестового набора в повторно используемую модель.
Массивы объектов обрабатываются аккуратно. Вместо того чтобы типизировать только первый элемент, инструмент сливает все объекты массива в один интерфейс, собирая объединение ключей. Ключи, отсутствующие в некоторых элементах, помечаются как необязательные знаком вопроса в конце, что отражает то, как реальные ответы включают поля только тогда, когда они заполнены. Вложенные объекты выделяются в собственные именованные интерфейсы, названия которых происходят от имени свойства, поэтому результат выглядит как написанные вручную модели, а не один глубоко встроенный тип.
Приватный рабочий процесс в браузере
Весь разбор и вывод типов выполняются в вашем браузере с помощью клиентского JavaScript. Инструмент не загружает ваш JSON, ответы API, идентификаторы, токены или образцы, похожие на данные клиентов, на сервер и не требует учётной записи. Такая исключительно локальная модель важна, потому что данные, вставляемые в генератор типов, часто представляют собой реальный ответ из production, перехваченный при отладке. Работа на вашем компьютере снижает риски и делает результат мгновенным, ведь между вставкой и результатом нет сетевого обмена.
Интерфейс держит рядом входной JSON, имя корня и сгенерированные интерфейсы, чтобы вы могли проверить вывод перед копированием. Результаты всё равно стоит просмотреть, прежде чем добавлять их в код: один образец не способен раскрыть каждое необязательное поле, значение, допускающее null, или enum, которые может вернуть реальное API, поэтому расширяйте типы там, где ваше знание предметной области подсказывает, что поле может отсутствовать или принимать больше форм, чем показывает образец.
Практические советы
Предоставьте самый полный образец из имеющихся, желательно с заполненными необязательными полями и массивом из нескольких элементов, чтобы логика объединения могла обнаружить union и необязательность. Перед генерацией переименуйте корневой интерфейс в соответствии с вашей доменной моделью. После копирования подумайте об уточнении слишком широко выведенных типов: замените общие поля string объединениями литералов для известных enum, пометьте идентификаторы как branded-типы, если ваш код их использует, и убедитесь, что поле, типизированное инструментом как null, не должно быть вместо этого union с null. Вывод в браузере отлично подходит для быстрого первого черновика, но итоговые типы должны отражать контракт, от которого действительно зависит ваше приложение.
Как использовать
- Вставьте JSONДобавьте репрезентативный образец объекта или массива JSON.
- Назовите кореньВыберите имя корневого интерфейса, затем сгенерируйте интерфейсы.
- Скопируйте интерфейсыПросмотрите выведенный TypeScript и скопируйте или скачайте его.