JSON do TypeScript

Czym jest konwersja JSON do TypeScript?

Wklej ładunek JSON i otrzymaj interfejsy TypeScript — typowane kontrakty dokładnie opisujące, jakie właściwości ma obiekt i jakiego typu jest każda z nich. Bez nich dane z JSON.parse() trafiają jako any, pozbawiając Cię podpowiedzi edytora i sprawdzania typów przy dostępie do właściwości lub przypisaniu. Konwersja JSON do TypeScript daje Ci tę gwarancję bez ręcznego pisania interfejsów.

TypeScript obsługuje wszystkie sześć typów wartości JSON: string, number, boolean, null, object i array. Każdy zagnieżdżony obiekt JSON staje się własnym nazwanym interfejsem. Tablice są typowane na podstawie pierwszego elementu. Wynik odpowiada temu, co JSON.parse() faktycznie zwraca w czasie działania, więc interfejsy odzwierciedlają rzeczywiste dane, a nie przypuszczenia.

Ręczne pisanie interfejsów dla dużego lub głęboko zagnieżdżonego JSON jest żmudne i podatne na błędy. Generator JSON do TypeScript odczytuje strukturę automatycznie, obsługuje zagnieżdżanie rekurencyjnie i generuje czysty kod interfejsów w kilka sekund. Jest to szczególnie przydatne przy integrowaniu nieznanego API, prototypowaniu z danymi testowymi lub migracji projektu JavaScript do TypeScript. Eliminuje też konieczność ręcznego śledzenia nazw i typów zagnieżdżonych właściwości, pozwalając skupić się na logice aplikacji zamiast na szablonowym kodzie typów.

Dlaczego warto używać generatora JSON do TypeScript?

Ręczne generowanie interfejsów TypeScript jest praktyczne dla małych obiektów, ale szybko traci sens przy zagnieżdżonych strukturach lub dużych odpowiedziach API. Wyobraź sobie odpowiedź API z 50 polami i trzema poziomami zagnieżdżenia — napisanie jej ręcznie oznacza dziesiątki interfejsów, a każdy z nich to potencjalne źródło literówek lub pominiętych pól nullable. Zautomatyzowany generator tworzy pełny zestaw w milisekundy i zmniejsza ryzyko niezgodności typów między kodem a konsumowanymi danymi. Poza dokładnością, narzędzie pomaga utrzymać typy zsynchronizowane z rzeczywistym kontraktem API. Gdy serwis zmienia kształt odpowiedzi, wystarczy wkleić zaktualizowany JSON i wygenerować interfejsy ponownie — znacznie szybciej niż wyszukiwanie każdej zmienionej właściwości w ręcznie napisanym pliku interfejsów.

Przypadki użycia JSON do TypeScript

Tabela mapowania typów JSON do TypeScript

Każda wartość JSON mapuje się na typ TypeScript. Poniższa tabela pokazuje, jak każdy typ prosty i strukturalny JSON jest tłumaczony. Mapowanie jest zgodne ze standardem JSON ECMA-404 i wbudowanymi typami TypeScript.

interface a type w TypeScript

TypeScript oferuje dwa sposoby opisywania kształtów obiektów: deklaracje interface i aliasy type. Oba działają przy reprezentowaniu struktur JSON, ale różnią się w rozszerzaniu i scalaniu deklaracji. Większość generatorów JSON do TypeScript generuje interfejsy, ponieważ są idiomatycznym wyborem dla kształtów obiektów w TypeScript.

Przykłady kodu

Poniżej znajdują się przykłady generowania interfejsów TypeScript z JSON w różnych językach i narzędziach. Każdy fragment kodu generuje działające wyjście.

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

Często zadawane pytania