JSON in TypeScript

Cos'è la conversione da JSON a TypeScript?

Incolla un payload JSON e ottieni interfacce TypeScript — contratti tipizzati che descrivono esattamente quali proprietà ha un oggetto e quale tipo contiene ciascuna. Senza di esse, i dati restituiti da JSON.parse() arrivano come any, senza assistenza dell'editor né controlli del compilatore sull'accesso alle proprietà o sull'assegnazione. Convertire JSON in TypeScript ti dà quella sicurezza senza dover scrivere le interfacce a mano.

TypeScript copre tutti e sei i tipi di valore JSON: string, number, boolean, null, object e array. Ogni oggetto JSON annidato diventa un'interfaccia con il proprio nome. Gli array ricevono il tipo in base al primo elemento. Il risultato corrisponde a ciò che JSON.parse() restituisce effettivamente a runtime, quindi le interfacce riflettono dati reali e non supposizioni.

Scrivere manualmente le interfacce per JSON di grandi dimensioni o con molti livelli di annidamento è noioso e soggetto a errori. Un generatore JSON-to-TypeScript legge la struttura automaticamente, gestisce l'annidamento in modo ricorsivo e produce codice di interfaccia pulito in pochi secondi. È particolarmente utile quando si collega un'API sconosciuta, si prototipa con dati fittizi o si migra una codebase JavaScript a TypeScript. Libera anche dal dover tenere traccia manualmente dei nomi e dei tipi delle proprietà annidate, così ci si può concentrare sulla logica dell'applicazione invece che sul codice di tipo standard.

Perché usare un generatore JSON-to-TypeScript?

Generare interfacce TypeScript a mano è pratico per oggetti piccoli, ma diventa difficile rapidamente con strutture annidate o risposte API di grandi dimensioni. Considera una risposta API con 50 campi e tre livelli di annidamento — scriverla a mano significa decine di interfacce, ognuna potenziale fonte di errori di battitura o campi nullable mancanti. Un generatore automatico produce l'insieme completo in pochi millisecondi e riduce il rischio di discrepanze tra il codice e i dati che consuma. Oltre all'accuratezza, mantiene i tipi sincronizzati con il contratto API reale. Quando un servizio cambia la forma della risposta, basta incollare il JSON aggiornato e rigenerare — molto più veloce che cercare ogni proprietà modificata in un file di interfaccia scritto a mano.

Casi d'uso di JSON in TypeScript

Riferimento per la mappatura dei tipi JSON-TypeScript

Ogni valore JSON si mappa a un tipo TypeScript. La tabella seguente mostra come ogni primitiva JSON e tipo strutturale si traduce. Questa mappatura segue lo standard JSON ECMA-404 e i tipi integrati di TypeScript.

interface vs type alias in TypeScript

TypeScript offre due modi per descrivere le forme degli oggetti: dichiarazioni interface e alias type. Entrambi funzionano per rappresentare strutture JSON, ma differiscono nel comportamento di estensione e fusione. La maggior parte dei generatori JSON-to-TypeScript produce interfacce perché sono la scelta idiomatica per le forme degli oggetti in TypeScript.

Esempi di codice

Di seguito alcuni esempi di generazione di interfacce TypeScript da JSON in diversi linguaggi e strumenti. Ogni frammento produce output eseguibile.

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

Domande frequenti