JSON-inndata

TypeScript-utdata

Hva er JSON til TypeScript?

Du bygger en React- eller Angular-app, har en JSON-API-respons foran deg, og trenger å definere et TypeScript-grensesnitt for den. Å skrive det for hånd for en dypt nestet respons er kjedelig og feilutsatt — én feil type og editoren din slutter å fange bugs. Dette verktøyet utleder TypeScript-grensesnitt direkte fra JSON-strukturen din, slik at du kan lime inn responsen og få bruksklare typedefinisjoner på sekunder.

Lim inn JSON, få TypeScript. Verktøyet kjører i nettleseren din. Ingenting sendes til en server. Utdata følger standard TypeScript-syntaks.

Slik bruker du verktøyet

1

Lim inn JSON

Lim JSON inn i editoren til venstre eller last opp en fil. Bruk Eksempel for testdata. Generatoren utleder typer fra strukturen. Bruk representativ data som viser alle feltene du trenger.

2

Gå gjennom grensesnittene

Høyre panel viser genererte grensesnitt. Nestede objekter får egne grensesnitt. Tabeller typet som Type[]. Valgfrie felt kan bruke ? avhengig av implementasjonen.

3

Kopier eller last ned

Bruk Kopier eller Last ned for å hente TypeScript. Lim det inn i prosjektet ditt. Du kan måtte justere navn, legge til generiske typer eller fikse valgfrie felt. For å validere JSON først, bruk JSON-validator.

Hvor JSON til TypeScript hjelper

Ved API-integrasjon trenger du ofte typer for svarinnholdet. Ved å lime inn et eksempelsvar får du grensesnitt du kan bruke i Angular-, React- eller Node-prosjektet. Konfigurasjonsfiler, webhook-nyttelaster og databasedokumenter drar nytte av det samme. Å skrive grensesnitt for komplekse nestede strukturer for hånd er feilutsatt; verktøyet utleder strukturen fra eksempelet ditt. For skjemabasert generering, bruk JSON-schema-generator og verktøy som quicktype.

Eksempler på JSON til TypeScript

Her er et eksempel på generering av TypeScript-grensesnitt fra et JSON-objekt.

Eksempel: Abonnementspost

JSON-inndata:

JSON-inndata

Generert TypeScript-utdata:

TypeScript-utdata

Begrensninger

Generatoren utleder fra eksempelet. Hvis et felt kan være string | number men eksempelet bare har strenger, blir typen string. Hvis tabeller kan være tomme, kan elementtypen bli unknown. Gå gjennom og rediger utdata. For skjemabasert generering, bruk JSON-schema-generator og et verktøy som quicktype.

Ofte stilte spørsmål

Er valgfrie felt merket?

Det avhenger av implementasjonen. Noen generatorer merker alle felt som påkrevde; andre utleder fra eksempelet. Sjekk utdata og legg til ? der det trengs.

Hva med unionstyper?

Hvis samme nøkkel har ulike typer i ulike objekter, kan generatoren bruke string | number eller lignende union. Eller velge én type. Gå gjennom utdata.

Sendes dataene mine noe sted?

Nei. Generering skjer i nettleseren din.

Kan jeg generere typer for andre språk?

Dette verktøyet produserer bare TypeScript. Nettstedet har konverterere for C#, Java, Python og flere.

Hva med enum?

Hvis et felt har et fast sett med strengverdier, kan generatoren produsere en unionstype som "a" | "b" | "c". For eksplisitte enum, rediger utdata.

Relaterte verktøy

TypeScript — se typescriptlang.org og TypeScript-objekter. JSON — se json.org og MDN JSON. Skjema til kode — se quicktype. RFC 8259 (JSON-spesifikasjon).