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 to TypeScript автоматично читає структуру, рекурсивно обробляє вкладеність і видає чистий код інтерфейсів за секунди. Це особливо корисно при підключенні незнайомого API, прототипуванні з тестовими даними або міграції кодової бази з JavaScript на TypeScript. Крім того, він звільняє вас від ручного відстеження назв і типів вкладених властивостей, дозволяючи зосередитись на логіці застосунку, а не на шаблонному коді типів.

Навіщо використовувати генератор JSON to TypeScript?

Генерування TypeScript-інтерфейсів вручну є прийнятним для невеликих об'єктів, але швидко стає незручним для вкладених структур або великих відповідей API. Уявіть відповідь API з 50 полями та трьома рівнями вкладеності — написання вручну означає десятки інтерфейсів, кожен з яких може містити друкарські помилки або пропущені поля, що допускають null. Автоматичний генератор створює повний набір за мілісекунди та зменшує ймовірність невідповідності типів між вашим кодом і даними, які він споживає. Крім точності, він підтримує ваші типи у відповідності з реальним контрактом API. Коли сервіс змінює форму відповіді, просто вставте оновлений JSON і згенеруйте заново — це значно швидше, ніж вручну шукати кожну зміщену властивість у написаному від руки файлі інтерфейсів.

Сценарії використання JSON to TypeScript

Таблиця відповідності типів JSON та TypeScript

Кожне значення JSON відображається на тип TypeScript. У таблиці нижче показано, як кожен JSON-примітив і структурний тип перекладаються. Це відображення відповідає стандарту ECMA-404 JSON та вбудованим типам TypeScript.

interface та type alias у TypeScript

TypeScript пропонує два способи опису форм об'єктів: оголошення interface та псевдоніми type. Обидва підходять для представлення JSON-структур, але відрізняються поведінкою при розширенні та злитті. Більшість генераторів JSON to TypeScript виводять інтерфейси, оскільки вони є ідіоматичним вибором для форм об'єктів у 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;
# }

Часті запитання