Softonic

JSON a TypeScript

Passaggio 1 / 2
Avanti

Incolla un campione JSON e lo strumento inferisce le interfacce TypeScript che corrispondono alla sua forma. I campi sono tipizzati in base ai valori osservati (string, number, boolean, Array<T>), gli oggetti annidati ottengono le proprie interfacce nominate, e i campi osservati come null o mancanti diventano opzionali (?) o nullable (| null) a seconda dello stile che preferisci.

Come convertire JSON in TypeScript

  1. 1

    Incolla JSON

    Un singolo campione è sufficiente; più campioni migliorano l'inferenza di nullabilità e unione.

  2. 2

    Scegli lo stile di output

    `interface` (predefinito), alias `type`, o interfaccia di sola lettura con tutti i campi contrassegnati come `readonly`.

  3. 3

    Scegli la strategia opzionale

    Contrassegna i campi `?` (possono essere assenti) o `| null` (sempre presenti, possono essere null).

  4. 4

    Copia i tipi

    Inserisci in un file `.ts` e avrai accesso tipizzato in modo forte alla risposta API.

Esempio

Input:

{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }

Output:

interface User {
  id: number;
  name: string;
  age: number | null;
  tags: string[];
  address: Address;
}

interface Address {
  city: string;
}

Mappatura dei tipi

JSON TypeScript
stringa string
intero / decimale number
booleano boolean
solo null null
null + T T | null (o T?)
array di T T[]
array misto (T1 | T2)[]
oggetto Interfaccia annidata nominata
array vuoto unknown[] (non può essere inferito)

Opzionale vs nullable

  • foo?: string, il campo può essere assente dall’oggetto. Si applica il controllo su undefined.
  • foo: string | null, il campo è sempre presente ma può essere esplicitamente null.
  • foo?: string | null, potrebbe essere assente O null.

Il JSON stesso non ha undefined, ma le API variano su come segnalano l’assenza. Abbina la semantica della tua API:

  • Le API REST tipicamente omettono i campi mancanti -> ?:.
  • GraphQL restituisce sempre ogni campo richiesto -> | null.
  • Alcuni SDK usano entrambi in contesti diversi.

Tipi unione vs tipi letterali

Se lo strumento vede lo stesso campo stringa con un piccolo insieme di valori tra i campioni ("status": "pending", "active", "archived"), può emettere un’unione di stringhe letterali:

status: "pending" | "active" | "archived";

Attiva “deduci unioni di stringhe letterali” se lo desideri.

Errori comuni

  • Inferire da un campione. Ogni campo diventa obbligatorio; la nullabilità non può essere osservata. Passa 5-10 campioni vari per tipi migliori.
  • Array vuoti. "tags": [] non fornisce informazioni di tipo, il generatore emette unknown[]. Fornisci un campione con almeno un elemento.
  • Array di tipi misti. [1, "two", true] produce (number | string | boolean)[]. Di solito significa che il JSON dovrebbe essere riprogettato piuttosto che tipizzato.
  • Chiavi stringa numeriche. JSON {"1": "a", "2": "b"} è comunque un oggetto in TypeScript (Record<string, string>), non un array. Il generatore gestisce questo correttamente.

Domande frequenti

Abbina la tua API. Le API REST che eliminano i campi null vogliono ?:. GraphQL, che restituisce sempre ogni campo selezionato, vuole | null. Quando hai dubbi, T | null con sintassi obbligatoria è più rigoroso e cattura più bug al momento della compilazione.

Sì, se lo abiliti e fornisci più campioni. Un campo osservato con 2-5 valori stringa distinti tra i campioni viene emesso come un’unione letterale. Oltre quella soglia, torna a string.

interface per la maggior parte dei casi, è aperta all’estensione e TypeScript la ottimizza meglio. Gli alias type sono utili per unioni, intersezioni, tuple e tipi mappati. Per i tipi derivati da JSON, entrambi funzionano; scegli una convenzione di progetto.

Sì. Ogni oggetto annidato diventa la propria interfaccia, con nomi derivati dalla chiave (user.address -> Address). Per strutture molto profonde o ripetitive, considera uno schema JSON e un generatore dedicato da schema a TS.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Promemoria Markdown

Riferimento pratico Markdown con anteprime reali ed esempi pronti da copiare per titoli, elenchi, tabelle, codice, link, immagini e sintassi GFM.

Formatter HTML

Formatta HTML localmente nel browser con rientri di due o quattro spazi. L’HTML non viene caricato né validato.

Strumento disponibile in altre lingue