Come convertire JSON in interfacce TypeScript

Scrivere tipi TypeScript a mano per una risposta JSON che hai gia e ripetitivo e facile da fare sottilmente male al primo colpo, soprattutto quando un campo e opzionale o un valore e annidato tre livelli di profondita.

Utilizzo del generatore JSON a TypeScript

Incolla un documento, o piu registri in un array, dai un nome al tipo radice, scegli interfacce o alias di tipo, e premi Genera tipi. L inferenza di tipo e condivisa con il generatore di schema su questo sito, quindi le due pagine concordano su cosa il tuo documento contiene realmente e differiscono solo in come scrivono la risposta.

Dato

[
  {"user": {"name": "a"}, "tags": [], "meta": {}},
  {"user": {"name": "b"}, "tags": ["x"], "meta": {}, "extra": true}
]

l uscita e:

export interface RootItem {
  user: User
  tags: string[]
  meta: Record<string, unknown>
  extra?: boolean
}

export interface User {
  name: string
}

export type Root = RootItem[]

Perche gli oggetti annidati ottengono il proprio tipo nominato

Un tipo inline a tre livelli di profondita e illeggibile, e nulla altro nel file puo riferirsi ad esso. I nomi vengono dalla chiave che contiene l oggetto, singolarizzata in un array (RootItem da Root), e un nome ripetuto riceve un numero allegato perche l uscita compili sempre senza una collisione.

Cosa promette davvero la marca opzionale

extra?: boolean significa che la chiave mancava in almeno un registro nel tuo campione, esattamente la stessa regola che il generatore di schema usa per required. Non significa che il campo e garantitamente opzionale in tutta la tua API, solo che il tuo campione non puo dimostrare che e sempre presente. Leggi la marca come una prova dai tuoi dati, non come una garanzia dal sistema sorgente.

Valori vuoti

Un oggetto vuoto diventa Record<string, unknown> invece di un interfaccia vuota, perche un interfaccia vuota accetta qualsiasi cosa e non dice nulla di utile sulla forma. Un array vuoto diventa unknown[], perche non c e niente al suo interno da cui dedurre un tipo di elemento, e inventarne uno sarebbe un intuito camuffato da fatto.

Perche ogni numero e solo number

TypeScript non ha un tipo intero separato, quindi un campo che e sempre un numero intero nel tuo campione e comunque digitato number, lo stesso di uno che contiene decimali. Questo rispecchia come TypeScript stesso modella i numeri, quindi i tipi generati compilano e si comportano esattamente come tipi scritti a mano.