JSON til TypeScript-konverter

Indsæt et API-svar, og få TypeScript-interfaces eller type-aliasser klar til brug, med indlejrede typer, valgfrie felter og null-unions udledt for dig.

Kører i din browserIngen tilmeldingIntet uploades

TypeScript

Sådan bruger du JSON til TypeScript

  1. Indsæt et JSON-eksempel, f.eks. et API-svar, i venstre felt, eller åbn en .json-fil.
  2. Angiv navnet på rodtypen (f.eks. User eller ApiResponse).
  3. Vælg interface- eller type-deklarationer, og slå export, readonly eller valgfrie felter overalt til eller fra.
  4. Vælg unknown (sikrere) eller any for værdier, som eksemplet ikke kan afsløre, f.eks. tomme arrays og null-værdier.
  5. Kopiér den genererede kode, eller download den som en .ts-fil.

Sådan udledes typerne

  • Primitiver: strenge, tal og booleans bliver til string, number og boolean.
  • Indlejrede objekter bliver til deres egne navngivne interfaces i PascalCase, så billing_address bliver til BillingAddress.
  • Arrays af objekter flettes til én elementtype, navngivet i ental: users giver User[]. En nøgle, der mangler i nogle elementer, bliver valgfri (key?:).
  • Null-værdier kombineres med de andre værdier, der ses for den nøgle: string | null. En nøgle, der altid kun er null, falder tilbage til unknown eller any.
  • Blandede arrays bliver til union-arrays som (number | string)[].
  • Identiske strukturer deklareres én gang og genbruges, og forskellige strukturer, der ville få samme navn, får et numerisk suffiks.
  • Nøgler, der ikke er gyldige identifikatorer, som "first-name" eller "2fa", sættes i anførselstegn.

interface vs. type

For almindelige objektstrukturer er de to næsten udskiftelige. interface-deklarationer kan udvides og flettes og giver lidt tydeligere compilerfejl. type-aliasser kan også udtrykke unions og mapped types. Mange teams bruger interfaces til API-modeller og typer til alt andet; vælg det, din kodebase eller linter (@typescript-eslint/consistent-type-definitions) forventer.

Få bedre typer ud af dit eksempel

Typerne kan kun blive så komplette som eksemplet. Indsæt et svar, der indeholder valgfrie felter, eller et array med flere forskelligartede elementer, så generatoren kan finde valgfrie og nullable nøgler. Værdier som datoer og enums kommer som almindelige strenge i JSON; indsnævr dem i hånden bagefter, f.eks. status: 'active' | 'disabled'. Til validering under kørsel kan du kombinere de genererede typer med et schema-bibliotek som Zod.

Ofte stillede spørgsmål

Bliver min JSON uploadet?
Nej. Typerne genereres af JavaScript i din browser. API-svar med tokens eller persondata forlader aldrig din enhed.
Hvordan findes valgfrie egenskaber?
Når objekter i samme array har forskellige nøgler, markeres nøgler, der mangler i mindst ét objekt, som valgfrie med ?. Med et enkelt objekt er alle nøgler påkrævede, medmindre du sætter flueben i Alt valgfrit.
Skal jeg bruge <code>unknown</code> eller <code>any</code>?
unknown er sikrere: TypeScript tvinger dig til at indsnævre værdien, før du bruger den. any slår typetjek fra for den værdi. Brug det kun, hvis du har tænkt dig at forfine typerne senere.
Hvorfor er en ISO-dato typet som <code>string</code>?
JSON har ingen datotype, så datoer er strenge under overførslen. Hvis du konverterer dem med new Date() efter parsing, så ændr egenskaben til Date i din model.
Kan den håndtere stor eller dybt indlejret JSON?
Ja. Genereringen er lineær i forhold til inputtets størrelse og kører lokalt, så svar på flere megabyte konverteres på langt under et sekund.

Relaterede værktøjer

JSON Formatter Formatér, minificér og validér JSON med fejl pr. linje/kolonne. JSON Diff Sammenlign to JSON-objekter, og se ændringer pr. sti. YAML til JSON Konvertér YAML-konfigurationer til JSON med flere dokumenter og præcise fejl. cURL-konverter Gør curl-kommandoer til fetch-, Axios-, Python-, Go- eller PHP-kode.