tigtools

JSON til TypeScript

Indsæt et JSON-svar eller en fil, og få TypeScript-deklarationer, du kan sætte direkte ind i din kode.

Kører i din browser Ingen tilmelding

Deklarer som

Sådan bruger du det

  1. Indsæt JSON i inputfeltet, åbn en .json-fil, eller prøv eksemplet.
  2. Angiv navnet på rodtypen, f.eks. Order eller ApiResponse.
  3. Vælg interface- eller typedeklarationer, og om der skal tilføjes export og readonly.
  4. Kopier den genererede TypeScript, eller download den som types.ts.

Sådan fungerer det

Generatoren gennemgår hele JSON-dokumentet og registrerer de værdityper, der findes hvert sted. Hvert JSON-objekt bliver til sin egen navngivne deklaration. Navnet dannes ud fra egenskabsnøglen skrevet i PascalCase, så “shipping_address” bliver til ShippingAddress. Elementer i et array navngives ud fra nøglens ental: “items” giver Item, “categories” giver Category, og nøgler, der ikke ligner flertalsformer, får suffikset “Item”.

Alle objekter i samme array flettes til én interface. Hvis en nøgle kun findes i nogle af dem, markeres den som valgfri med “?”. Hvis en værdi har forskellige typer forskellige steder, bliver typen en union som string | number. null bevares som sin egen type, så et felt, der nogle gange er null, bliver til string | null. Et tomt array bliver til unknown[], fordi der ikke er noget at udlede fra. To objekter med nøjagtig samme egenskaber og typer deler én interface i stedet for at skabe dubletter. Nøgler, der ikke er gyldige identifikatorer, f.eks. “first-name”, sættes i anførselstegn.

Resultatet beskriver kun det eksempel, du indsætter. Et felt, der i virkeligheden er valgfrit eller kan være null, bliver påkrævet og ikke-null, hvis dit eksempel ikke viser det, og datoer kommer som almindelige strenge. Gennemgå typerne i forhold til din API-dokumentation, før du stoler på dem.

Eksempler

Typning af et API-svar

Indsæt en ordre fra din shop-API med rodnavnet Order. Du får interfacene Order, Customer, Item og Shipping, med note?: string på Item, fordi kun det ene af de to elementer har en note.

Skrivebeskyttet konfiguration

Indsæt en config.json, sæt kryds ved “Gør egenskaber skrivebeskyttede”, og indsæt resultatet i config.d.ts, så utilsigtede ændringer af konfigurationen fanges af compileren.

Array på øverste niveau

Et liste-endpoint returnerer [{…}, {…}]. Med rodnavnet Product starter outputtet med “export type Product = ProductItem[];” efterfulgt af ProductItem-interfacet.

Ofte stillede spørgsmål

Hvorfor er et felt valgfrit i resultatet?

Fordi mindst ét objekt i det samme array mangler nøglen. Hvis alle objekter har den, er den påkrævet. Indsæt flere poster for at få mere præcise valgfrie felter.

Hvorfor får en dato typen string?

JSON har ingen dato-type, så datoer sendes som strenge. Generatoren gætter ikke formater. Ændr selv typen, hvis din kode konverterer dem til Date-objekter.

Hvad er forskellen på interface og type?

Til objektformer fungerer de næsten ens. Interfaces kan udvides og flettes ved senere deklarationer; type-aliasser kan ikke genåbnes. Vælg den stil, din kodebase allerede bruger.

Kan den generere runtime-validering som f.eks. Zod-skemaer?

Nej. Den producerer kun TypeScript-deklarationer, som kontrolleres ved kompilering og ikke validerer data under kørsel.

Privatliv

Din JSON analyseres kun i din browser. Intet uploades, gemmes eller medtages i statistik.