JSON to TypeScript

Vad är JSON till TypeScript-konvertering?

Klistra in en JSON-payload och du får tillbaka TypeScript-gränssnitt — typade kontrakt som exakt beskriver vilka egenskaper ett objekt har och vilken typ varje egenskap innehåller. Utan dem anländer data från JSON.parse() som any, vilket ger dig inget redigeringshjälp och inga kompilatorskontroller för egenskapsåtkomst eller tilldelning. Att konvertera JSON till TypeScript ger dig den typsäkerheten utan att behöva skriva gränssnitt för hand.

TypeScript täcker alla sex JSON-värdetyper: string, number, boolean, null, object och array. Varje nästlat JSON-objekt omvandlas till sitt eget namngivna gränssnitt. Arrayer får sin typ från det första elementet. Resultatet matchar vad JSON.parse() faktiskt returnerar vid körningstid, så gränssnitten återspeglar verklig data snarare än gissningar.

Att skriva gränssnitt för hand för stora eller djupt nästlade JSON är tidskrävande och felbenäget. En JSON till TypeScript-generator läser strukturen automatiskt, hanterar nästling rekursivt och producerar ren gränssnittskod på några sekunder. Det är särskilt användbart när man kopplar upp ett okänt API, prototypar med exempeldata eller migrerar en JavaScript-kodbas till TypeScript. Det befriar dig också från att spåra nästlade egenskapsnamn och typer för hand, så du kan fokusera på applikationslogik snarare än typmallkod.

Varför använda en JSON till TypeScript-generator?

Att generera TypeScript-gränssnitt för hand fungerar för små objekt, men håller inte för nästlade strukturer eller stora API-svar. Tänk på ett API-svar med 50 fält och tre nästlingsnivåer — att skriva det för hand innebär dussintals gränssnitt, vart och ett en potentiell källa till stavfel eller förbisedda null-fält. En automatisk generator producerar hela uppsättningen på millisekunder och minskar risken för typmissmatchningar mellan din kod och den data den konsumerar. Utöver noggrannheten håller det dina typer synkroniserade med det faktiska API-kontraktet. När en tjänst ändrar sin svarsform, klistra helt enkelt in den uppdaterade JSON och generera om — mycket snabbare än att leta upp varje egenskap som förändrats i en handskriven gränssnittsfil.

Användningsfall för JSON till TypeScript

Referens för JSON till TypeScript-typmappning

Varje JSON-värde mappas till en TypeScript-typ. Tabellen nedan visar hur varje JSON-primitiv och strukturtyp översätts. Denna mappning följer ECMA-404 JSON-standarden och TypeScripts inbyggda typer.

TypeScript interface vs type-alias

TypeScript erbjuder två sätt att beskriva objektformer: interface-deklarationer och type-alias. Båda fungerar för att representera JSON-strukturer, men de skiljer sig åt i utöknings- och sammanslagningsbeteende. De flesta JSON till TypeScript-generatorer producerar gränssnitt eftersom de är det idiomatiska valet för objektformer i TypeScript.

Kodexempel

Nedan följer exempel på hur TypeScript-gränssnitt genereras från JSON i olika språk och verktyg. Varje kodfragment producerar körbar utdata.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Vanliga frågor