Softonic

JSON till TypeScript

Steg 1 / 2
Nästa

Klistra in ett JSON-exempel så härleder verktyget TypeScript-gränssnitt som motsvarar dess struktur. Fält typas utifrån de observerade värdena (string, number, boolean, Array<T>); nästlade objekt får egna namngivna gränssnitt; och fält som observeras som null eller saknade blir valfria (?) eller nullbara (| null) beroende på vilken stil du föredrar.

Så konverterar du JSON till TypeScript

  1. 1

    Klistra in JSON

    Ett enda exempel räcker, men flera exempel förbättrar härledningen av nullbarhet och uniontyper.

  2. 2

    Välj utdatastil

    `interface` (standard), `type`-alias eller ett skrivskyddat gränssnitt där alla fält är märkta som `readonly`.

  3. 3

    Välj strategi för valfrihet

    Märk fältet som `?` (kan saknas) eller `| null` (alltid närvarande, men kan vara null).

  4. 4

    Kopiera typerna

    Klistra in dem i en `.ts`-fil så får du starkt typad åtkomst till API-svaret.

Exempel

Indata:

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

Utdata:

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

interface Address {
  city: string;
}

Typmappning

JSON TypeScript
sträng string
heltal / decimaltal number
booleskt värde boolean
enbart null null
null + T T | null (eller T?)
array av T T[]
blandad array (T1 | T2)[]
objekt Namngivet nästlat gränssnitt
tom array unknown[] (kan inte härledas)

Valfritt fält kontra nullbart fält

  • foo?: string, fältet kan saknas i objektet. En undefined-kontroll gäller.
  • foo: string | null, fältet är alltid närvarande, men kan uttryckligen vara null.
  • foo?: string | null, kan saknas ELLER vara null.

JSON i sig har inte undefined, men olika API:er signalerar frånvaro på olika sätt. Anpassa efter semantiken hos ditt API.

  • REST-API:er utelämnar vanligtvis saknade fält -> ?:.
  • GraphQL returnerar alltid varje begärt fält -> | null.
  • Vissa SDK:er använder båda i olika sammanhang.

Uniontyper kontra literala typer

Om verktyget ser att samma strängfält bara antar en liten uppsättning värden över exemplen ("status": "pending", "active", "archived") kan det generera en union av strängliteraler:

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

Aktivera “härled unioner av strängliteraler” om du vill ha detta.

Vanliga misstag

  • Härleda från ett enda exempel. Varje fält blir obligatoriskt; nullbarhet kan inte observeras. Ge 5-10 varierade exempel för bättre typer.
  • Tomma arrayer. "tags": [] ger ingen typinformation, generatorn producerar unknown[]. Ange ett exempel med minst ett element.
  • Arrayer med blandade typer. [1, "two", true] ger (number | string | boolean)[]. Vanligtvis betyder det att JSON:en bör designas om i stället för att typas som den är.
  • Numeriska strängnycklar. JSON {"1": "a", "2": "b"} är fortfarande ett objekt i TypeScript (Record<string, string>), inte en array. Generatorn hanterar detta korrekt.

Vanliga frågor

Anpassa efter ditt API. REST-API:er som utelämnar null-fält passar med ?:. GraphQL, som alltid returnerar varje valt fält, passar med | null. När du är osäker är T | null med obligatorisk syntax striktare och fångar fler buggar vid kompilering.

Ja, om du aktiverar det och anger flera exempel. Ett fält som över exemplen observeras med 2-5 olika strängvärden matas ut som en literal union. Över den tröskeln faller det tillbaka till string.

interface i de flesta fall, det är öppet för utökning och TypeScript optimerar det bättre. type-alias är användbara för unioner, snitt, tupler och mappade typer. För typer som härleds från JSON fungerar båda; välj en projektkonvention.

Ja. Varje nästlat objekt blir ett eget gränssnitt, med namn som härleds från nyckeln (user.address -> Address). För mycket djupa eller repetitiva strukturer bör du överväga ett JSON Schema och en särskild schema-to-TS-generator.

Relaterade verktyg

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

YAML till JSON

Omvandla YAML-konfiguration till JSON för verktyg och API:er som bara accepterar JSON. Hanterar ankare, merge-nycklar och nästlade strukturer.

XML-formaterare

Snygga till XML-dokument med konsekvent indrag och fånga formfel med exakta radnummer.

XML till JSON

Omvandla XML-dokument till ren JSON, med bevarade attribut, textnoder och arrayer där det behövs. Tre stilar: kompakt, Badgerfish eller literal.

Verktyget finns på andra språk