Конвертер JSON в TypeScript — бесплатно
Генерируйте интерфейсы TypeScript или псевдонимы типов из любого объекта или массива JSON. Вставьте JSON и мгновенно получите готовые типы TypeScript.
export interface User {
id: number;
name: string;
email: string;
isActive: boolean;
score: number;
tags: string[];
address?: null;
}
export interface Root {
user: User;
createdAt: string;
version: number;
}Частые применения
- Генерируйте типы TypeScript из ответов APIВставьте ответ JSON из API и мгновенно генерируйте интерфейсы TypeScript, чтобы сделать код вашего фронтенда типобезопасным.
- Типы TypeScript для объектов конфигурации и настроекГенерируйте интерфейсы TypeScript из файлов конфигурации JSON, чтобы добавить типобезопасность к настройкам приложения.
- Генерируйте типы TypeScript из записей базы данныхКонвертируйте экспортированные в JSON записи базы данных или результаты запросов ORM в интерфейсы TypeScript для типизации слоя данных.
- Типомок данные и тестовые приспособленияГенерируйте интерфейсы TypeScript из мок-данных JSON и тестовых приспособлений, чтобы вводить ваши модульные тесты и истории Storybook.
- Ответы API третьих сторон типомГенерируйте интерфейсы TypeScript из ответов API третьих сторон, где официальные типы отсутствуют или устарели.
Как это работает
Этот инструмент использует написанный вручную рекурсивный алгоритм вывода типов без внешних библиотек — JSON.parse для проверки и разбора ввода, затем пользовательский обход, который проходит по каждому значению в дереве JSON и выдаёт объявления интерфейса или типа TypeScript прямо в браузере. Ничего не отправляется на сервер.
- 1JSON разобран и проверенВаш ввод передаётся в JSON.parse. Если он не удаётся, точная ошибка парсинга появляется прямо под вводом. Успешный разбор производит типизированное дерево значений, которое управляет остальной частью конвертации.
- 2Рекурсивный вывод типовРекурсивная функция getType проходит по каждому узлу: примитивы сопоставляются со string, number, boolean или null; объекты запускают новый именованный интерфейс; у массивов объектов ключи объединяются по всем элементам, так что ключи, присутствующие только в некоторых элементах, становятся опциональными, а конфликтующие типы значений объединяются с |.
- 3Именование интерфейса, безопасное от коллизийКаждый вложенный объект получает имя в PascalCase, выведенное из его JSON-ключа (snake_case, kebab-case и пробелы все нормализуются). Если два структурно различных объекта имели бы одинаковое имя, добавляется числовой суффикс (Data, Data2, …), а не тихая перезапись более раннего определения.
- 4Вывод отрендерен и доступен для скачиванияСначала выводятся вложенные интерфейсы, затем корневой тип, отформатированный как export interface или export type в зависимости от вашего выбора. Результат можно скопировать в буфер обмена или скачать как файл .ts — всё построено со стандартным Blob и без обращения к серверу.
Похожие инструменты
JSON Schema в форму
Вставьте JSON Schema и получите рабочую форму — текстовые, числовые, чекбокс, выпадающие и списочные поля — затем скопируйте JSON, созданный вашими вводами. Отлично для прототипирования тел API-запросов. Работает в браузере.
Тест скорости печати (WPM)
Измеряйте скорость печати (WPM) и точность с помощью тестов на время, на количество слов, с цитатами, со своим текстом и в режиме дзен. Скорость в реальном времени, сырая скорость, стабильность, график результатов, несколько языков и подсветка каждого символа — всё в вашем браузере.
Генератор CSS clamp()
Генерируйте адаптивные значения CSS clamp() для отзывчивой типографики и отступов. Задайте минимальный/максимальный размер и диапазон вьюпорта, предпросматривайте результат и копируйте однострочный CSS.