JSON to TypeScript

Что такое конвертация JSON в TypeScript?

Вставьте JSON-данные — и получите готовые TypeScript-интерфейсы: типизированные контракты, точно описывающие свойства объекта и тип каждого из них. Без них данные из JSON.parse() приходят с типом any — никакой подсказки редактора и никаких проверок компилятора при обращении к свойствам и присваивании значений. Конвертация JSON в TypeScript даёт эту безопасность без ручного написания интерфейсов.

TypeScript покрывает все шесть типов значений JSON: string, number, boolean, null, object и array. Каждый вложенный JSON-объект преобразуется в отдельный именованный интерфейс. Массивы типизируются по первому элементу. Результат соответствует тому, что JSON.parse() возвращает во время выполнения, поэтому интерфейсы отражают реальные данные, а не предположения.

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

Зачем использовать генератор JSON в TypeScript?

Ручное написание TypeScript-интерфейсов вполне оправдано для небольших объектов, но быстро становится неудобным при вложенных структурах или больших ответах API. Представьте ответ API с 50 полями и тремя уровнями вложенности — написание вручную означает десятки интерфейсов, каждый из которых может содержать опечатки или пропущенные nullable-поля. Автоматический генератор создаёт весь набор за миллисекунды и снижает вероятность несоответствия типов между кодом и потребляемыми данными. Помимо точности, он синхронизирует типы с реальным контрактом API. Когда сервис меняет форму ответа, достаточно вставить обновлённый JSON и сгенерировать заново — это намного быстрее, чем искать каждое изменённое свойство в написанном вручную файле интерфейсов.

Сценарии использования JSON to TypeScript

Таблица соответствия типов JSON и TypeScript

Каждое значение JSON соответствует определённому типу TypeScript. В таблице ниже показано, как каждый примитив и структурный тип JSON транслируется. Это соответствие следует стандарту ECMA-404 и встроенным типам TypeScript.

interface vs type в TypeScript

TypeScript предлагает два способа описания формы объектов: объявления interface и псевдонимы type. Оба подходят для представления JSON-структур, но различаются по возможностям расширения и слияния. Большинство генераторов JSON-в-TypeScript выводят именно interface — это идиоматический выбор для форм объектов в TypeScript.

Примеры кода

Ниже приведены примеры генерации TypeScript-интерфейсов из JSON на разных языках и инструментах. Каждый фрагмент производит готовый к запуску вывод.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Часто задаваемые вопросы