acento.io
Udviklerværktøj

JSON til TypeScript

Indsæt et JSON-objekt og få præcise TypeScript-interfaces med automatisk registrering af valgfrie felter — alt kører lokalt i din browser.

Af Carlos Suárez , Systemingeniør
Sidst opdateret:

Hvad dette Json To Typescript gør

Denne danske version af værktøjet analyserer dit JSON-input og producerer færdige TypeScript-typedeklarationer med rekursiv typeinferens. Du slipper for at skrive interfaces i hånden — og for at opdage fejl på køretid, fordi et felt viste sig at være number | undefined i stedet for bare number. IETF standardiserede JSON-formatet i RFC 4627 (2006) og opdaterede det i RFC 8259 — i dag er JSON det dominerende udvekslingsformat i REST-API'er, og TypeScript-typer til JSON-svar er blevet en selvfølge i moderne frontend-projekter. Det vigtigste: 100 % klient-side — dine data forlader aldrig din browser. Ingen upload, ingen sporing, ingen serverlogfiler. Alt inferens sker direkte i din browser via Web Crypto API-lageret uden netværkskald.

Funktioner

  • Rekursiv typeinferens. Indlejrede objekter og arrays konverteres automatisk til navngivne interfaces — ingen manuel nedbrydning nødvendig.
  • Registrering af valgfrie felter. Analyserer heterogene array-elementer og markerer kun felter som valgfrie (?) når de mangler i mindst ét element. De fleste gratis konvertere markerer alt som required.
  • Konfigurerbart rodnavn. Angiv selv navnet på det øverste interface — fx ApiResponse i stedet for det generiske Root — så koden passer direkte ind i dit projekt.
  • TypeScript JSON-skema-kompatibilitet. Outputtet følger TypeScript-syntaks og kan bruges direkte som typescript json schema-kilde eller importeres med resolveJsonModule i din tsconfig.json.
  • Ingen installation. Kræver hverken Node.js, et npm-pakke som json2ts eller en lokal build-pipeline. Åbn siden og brug det med det samme.
  • Kompatibel med alle tsconfig-opsætninger. Det genererede output virker uanset om du bruger tsconfig node, tsconfig jsx eller andre tsconfig options i dit projekt.

Sådan bruger du Json To Typescript

Tre trin fra JSON til færdige typer — ingen opsætning, ingen login.

  1. Indsæt dit JSON. Kopiér et JSON-objekt eller et array fra din API-respons, en package.json eller et testfixture og sæt det ind i tekstfeltet.
  2. Klik på Generér. Værktøjet analyserer strukturen og producerer interfaces med korrekte TypeScript-typer: string, number, boolean, null, arrays og indlejrede objekter.
  3. Tjek de valgfrie felter. Felter der ikke optræder i alle array-elementer markeres automatisk som valgfrie, fx email?: string. Gennemse resultatet og justér rodnavnet efter behov.
  4. Kopiér og brug. Tryk Kopiér og indsæt direkte i din .ts-fil. Tilføj resolveJsonModule: true i din tsconfig.json hvis du importerer JSON-filer direkte i TypeScript.

Typiske anvendelser

  • Typning af REST API-svar. Du kalder en ekstern API og vil have stærke typer til svaret. Indsæt et eksempel-svar og få et interface klar til brug i fetch- eller axios-kald.
  • Migrering af JavaScript-projekter til TypeScript. Når et eksisterende JS-projekt skal konverteres, er JSON-datamodellerne typisk udokumenterede. Brug værktøjet til hurtigt at generere et startpunkt for dine typescript json type-deklarationer.
  • Testfixtures og mock-data. Generer interfaces fra testdata, så dine mocks altid matcher den faktiske datastruktur — og TypeScript advarer dig, når de ikke gør.
  • Validering af tsconfig-eksempler. Har du et tsconfig json example fra et projekt du ikke kender? Indsæt det og få en hurtig oversigt over strukturen som typer. Skal du også formatere rå JSON, kan [JSON formatter](/da/json-formatter/) hjælpe dig.
  • Hurtig prototyping. Under en hackathon eller sprint behøver du ikke bruge tid på at skrive interfaces manuelt. Indsæt et svar fra en ny tjeneste og gå videre med implementeringen med det samme.

Ofte stillede spørgsmål

Sender værktøjet mit JSON til en server?

Nej. Al behandling sker lokalt i din browser. Ingen data sendes til acento.io eller nogen tredjepart — ikke engang en anonymiseret hash. Det er særligt vigtigt, når din JSON indeholder følsomme forretningsdata eller personoplysninger.

Hvad er forskellen på dette og json2ts eller quicktype.io?

Onlinetjenester som quicktype.io uploader dit JSON til deres servere. Dette værktøj kører 100 % klient-side. Derudover registrerer det automatisk valgfrie felter på tværs af heterogene array-elementer, som de fleste gratis alternativer ikke gør.

Hvordan sætter jeg resolveJsonModule op i tsconfig.json?

Tilføj "resolveJsonModule": true under compilerOptions i din tsconfig.json. Det giver TypeScript lov til at importere .json-filer direkte og inferere deres type. Kombinér det gerne med "esModuleInterop": true for fuld kompatibilitet.

Kan jeg konvertere et JSON-array i stedet for et objekt?

Ja. Indsæt et array som [{"id":1},{"id":2,"name":"Ada"}] og værktøjet genererer ét interface med name?: string fordi feltet mangler i det første element.

Hvad sker der med null-værdier i JSON?

Felter med null som eneste observerede værdi skrives som fieldName: null. Hvis samme felt er string i andre elementer, infereres typen som string | null. Du kan efterfølgende udvide med | undefined efter behov.

Kan outputtet bruges som TypeScript JSON Schema?

Outputtet er TypeScript-interface-syntaks, ikke JSON Schema-format. Hvis du har brug for egentlig JSON Schema-validering, kan du kombinere outputtet med et bibliotek som zod eller ajv. Vil du konvertere JSON til YAML i stedet, har vi en [JSON-YAML-konverter](/da/json-yaml-converter/).