JSON to TypeScript

Co je převod JSON na TypeScript?

Vložte JSON payload a získáte zpět TypeScript rozhraní — typované kontrakty, které přesně popisují, jaké vlastnosti objekt má a jaký typ každá z nich obsahuje. Bez nich přicházejí data z JSON.parse() jako any, takže nemáte žádnou pomoc editoru ani žádné kontroly kompilátoru při přístupu k vlastnostem nebo přiřazování. Převod JSON na TypeScript vám tuto bezpečnost poskytne bez ručního psaní rozhraní.

TypeScript pokrývá všech šest typů hodnot JSON: string, number, boolean, null, object a array. Každý vnořený JSON objekt se stane vlastním pojmenovaným rozhraním. Pole jsou typována podle prvního prvku. Výsledek odpovídá tomu, co JSON.parse() skutečně vrací za běhu, takže rozhraní odrážejí reálná data, nikoli domněnky.

Ruční psaní rozhraní pro velký nebo hluboce vnořený JSON je zdlouhavé a náchylné k chybám. Generátor JSON na TypeScript čte strukturu automaticky, zpracovává vnoření rekurzivně a za sekundy vypíše čistý kód rozhraní. Je to zvláště užitečné při zapojování neznámého API, prototypování s testovacími daty nebo migraci JavaScriptového kódu do TypeScriptu. Ušetří vám také ruční sledování názvů vnořených vlastností a jejich typů, takže se můžete soustředit na logiku aplikace, nikoli na typový kód.

Proč používat generátor JSON na TypeScript?

Ruční generování TypeScript rozhraní je praktické pro malé objekty, ale u vnořených struktur nebo velkých API odpovědí se rychle stává nezvladatelným. Představte si API odpověď s 50 poli a třemi úrovněmi vnoření — ruční psaní znamená desítky rozhraní, každé jako potenciální zdroj překlepů nebo přehlédnutých nulovatelných polí. Automatizovaný generátor celou sadu vytvoří v milisekundách a snižuje riziko neshody typů mezi vaším kódem a daty, která zpracovává. Kromě přesnosti udržuje vaše typy synchronizované se skutečným API kontraktem. Když služba změní tvar odpovědi, jednoduše vložte aktualizovaný JSON a znovu vygenerujte — mnohem rychlejší než hledání každé vlastnosti, která se změnila v ručně psaném souboru rozhraní.

Případy použití JSON na TypeScript

Přehled mapování typů JSON na TypeScript

Každá hodnota JSON se mapuje na TypeScript typ. Tabulka níže ukazuje, jak se každý JSON primitiv a strukturní typ překládá. Toto mapování se řídí standardem ECMA-404 JSON a vestavěnými typy TypeScriptu.

TypeScript interface vs type alias

TypeScript nabízí dva způsoby popisu tvarů objektů: deklarace interface a type aliasy. Oba fungují pro reprezentaci JSON struktur, ale liší se v chování při rozšiřování a slučování. Většina generátorů JSON na TypeScript produkuje rozhraní, protože jsou idiomatickou volbou pro tvary objektů v TypeScriptu.

Příklady kódu

Níže jsou příklady generování TypeScript rozhraní z JSON v různých jazycích a nástrojích. Každý úryvek produkuje spustitelný výstup.

// 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;
# }

Časté dotazy