JSON to TypeScript

Apa Itu Konversi JSON ke TypeScript?

Tempel payload JSON dan Anda akan mendapatkan TypeScript interface — kontrak bertipe yang mendeskripsikan secara tepat properti apa yang dimiliki suatu objek dan tipe apa yang dipegang masing-masing. Tanpa interface tersebut, data dari JSON.parse() datang sebagai any, sehingga Anda tidak mendapatkan bantuan editor maupun pemeriksaan compiler saat mengakses atau mengisi properti. Mengonversi JSON ke TypeScript memberikan keamanan itu tanpa perlu menulis interface secara manual.

TypeScript mencakup keenam tipe nilai JSON: string, number, boolean, null, object, dan array. Setiap objek JSON bersarang diubah menjadi interface bernama tersendiri. Array diberi tipe dari elemen pertamanya. Hasilnya sesuai dengan apa yang dikembalikan JSON.parse() saat runtime, sehingga interface mencerminkan data nyata, bukan sekadar tebakan.

Menulis interface secara manual untuk JSON yang besar atau sangat bersarang adalah pekerjaan yang membosankan dan rawan kesalahan. Generator JSON ke TypeScript membaca struktur secara otomatis, menangani nesting secara rekursif, dan menghasilkan kode interface yang bersih dalam hitungan detik. Ini sangat berguna saat menyambungkan API yang belum dikenal, membuat prototipe dengan data tiruan, atau memigrasikan codebase JavaScript ke TypeScript. Alat ini juga membebaskan Anda dari keharusan melacak nama dan tipe properti bersarang secara manual, sehingga Anda bisa fokus pada logika aplikasi, bukan pada boilerplate tipe.

Mengapa Menggunakan Generator JSON ke TypeScript?

Membuat TypeScript interface secara manual masih praktis untuk objek kecil, tetapi menjadi tidak efisien dengan cepat pada struktur bersarang atau respons API yang besar. Bayangkan respons API dengan 50 field dan tiga tingkat nesting — menulisnya secara manual berarti puluhan interface, masing-masing berpotensi menjadi sumber typo atau field nullable yang terlewat. Generator otomatis menghasilkan set lengkap dalam hitungan milidetik dan mengurangi kemungkinan ketidaksesuaian tipe antara kode Anda dan data yang dikonsumsinya. Selain akurasi, alat ini menjaga tipe Anda tetap sinkron dengan kontrak API yang sebenarnya. Ketika sebuah layanan mengubah bentuk responsnya, cukup tempel JSON yang diperbarui dan buat ulang — jauh lebih cepat daripada mencari setiap properti yang berubah di seluruh file interface yang ditulis tangan.

Kasus Penggunaan JSON ke TypeScript

Referensi Pemetaan Tipe JSON ke TypeScript

Setiap nilai JSON dipetakan ke tipe TypeScript. Tabel di bawah menunjukkan bagaimana setiap primitif JSON dan tipe struktural diterjemahkan. Pemetaan ini mengikuti standar JSON ECMA-404 dan tipe bawaan TypeScript.

TypeScript interface vs type Alias

TypeScript menawarkan dua cara untuk mendeskripsikan bentuk objek: deklarasi interface dan type alias. Keduanya dapat digunakan untuk merepresentasikan struktur JSON, tetapi berbeda dalam perilaku ekstensi dan penggabungan. Sebagian besar generator JSON ke TypeScript menghasilkan interface karena itulah pilihan idiomatis untuk bentuk objek di TypeScript.

Contoh Kode

Berikut adalah contoh pembuatan TypeScript interface dari JSON dalam berbagai bahasa dan alat. Setiap cuplikan menghasilkan output yang dapat dijalankan.

// 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;
# }

Pertanyaan yang Sering Diajukan