JSON till TypeScript-konverterare

Klistra in ett API-svar och få färdiga TypeScript-interfaces eller typalias, där nästlade typer, valfria fält och null-unioner härleds åt dig.

Körs i din webbläsareIngen registreringInget laddas upp

TypeScript

Så använder du JSON till TypeScript

  1. Klistra in ett JSON-exempel, till exempel ett API-svar, i vänstra rutan eller öppna en .json-fil.
  2. Ange namnet på rottypen (till exempel User eller ApiResponse).
  3. Välj interface- eller type-deklarationer och slå på eller av export, readonly eller att alla fält är valfria.
  4. Välj unknown (säkrare) eller any för värden som exemplet inte avslöjar, som tomma arrayer och null.
  5. Kopiera den genererade koden eller ladda ner den som en .ts-fil.

Så härleds typerna

  • Primitiva värden: strängar, tal och booleska värden blir string, number och boolean.
  • Nästlade objekt blir egna namngivna interfaces i PascalCase, så billing_address blir BillingAddress.
  • Arrayer med objekt slås ihop till en enda elementtyp med namn i singular: users ger User[]. En nyckel som saknas i vissa element blir valfri (key?:).
  • Null-värden kombineras med övriga värden som setts för nyckeln: string | null. En nyckel som bara någonsin är null faller tillbaka på unknown eller any.
  • Blandade arrayer blir union-arrayer som (number | string)[].
  • Identiska strukturer deklareras en gång och återanvänds, och olika strukturer som skulle få samma namn får ett numeriskt suffix.
  • Nycklar som inte är giltiga identifierare, som "first-name" eller "2fa", omges av citattecken.

interface eller type

För vanliga objektstrukturer är de två nästan utbytbara. interface-deklarationer kan utökas och slås ihop och ger något tydligare kompilatorfel. type-alias kan även uttrycka unioner och mappade typer. Många team använder interfaces för API-modeller och types för allt annat; välj det som din kodbas eller linter (@typescript-eslint/consistent-type-definitions) förväntar sig.

Få bättre typer från ditt exempel

Typerna blir aldrig mer kompletta än exemplet. Klistra in ett svar som innehåller valfria fält, eller en array med flera olika element, så att generatorn kan upptäcka valfria och nullbara nycklar. Värden som datum och enums kommer som vanliga strängar i JSON; snäva in dem för hand efteråt, till exempel status: 'active' | 'disabled'. För validering vid körning kan du kombinera de genererade typerna med ett schemabibliotek som Zod.

Vanliga frågor

Laddas min JSON upp?
Nej. Typerna genereras av JavaScript i din webbläsare. API-svar som innehåller tokens eller personuppgifter lämnar aldrig din enhet.
Hur upptäcks valfria egenskaper?
När objekt i samma array har olika nycklar markeras nycklar som saknas i minst ett objekt som valfria med ?. Med ett enda objekt är alla nycklar obligatoriska, om du inte kryssar i Alla valfria.
Ska jag använda <code>unknown</code> eller <code>any</code>?
unknown är säkrare: TypeScript tvingar dig att snäva in värdet innan du använder det. any stänger av typkontrollen för värdet. Använd det bara om du tänker förfina typerna senare.
Varför får ett ISO-datum typen <code>string</code>?
JSON har ingen datumtyp, så datum skickas som strängar. Om du konverterar dem med new Date() efter parsningen, ändra egenskapen till Date i din modell.
Klarar den stor eller djupt nästlad JSON?
Ja. Genereringen är linjär i förhållande till indatans storlek och körs lokalt, så svar på flera megabyte konverteras på långt under en sekund.

Relaterade verktyg