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
Så använder du JSON till TypeScript
- Klistra in ett JSON-exempel, till exempel ett API-svar, i vänstra rutan eller öppna en
.json-fil. - Ange namnet på rottypen (till exempel
UserellerApiResponse). - Välj
interface- ellertype-deklarationer och slå på eller avexport,readonlyeller att alla fält är valfria. - Välj
unknown(säkrare) elleranyför värden som exemplet inte avslöjar, som tomma arrayer och null. - 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,numberochboolean. - Nästlade objekt blir egna namngivna interfaces i PascalCase, så
billing_addressblirBillingAddress. - Arrayer med objekt slås ihop till en enda elementtyp med namn i singular:
usersgerUser[]. 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 ärnullfaller tillbaka påunknownellerany. - 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?
Hur upptäcks valfria egenskaper?
?. 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>?
new Date() efter parsningen, ändra egenskapen till Date i din modell.