JSON ke TypeScript: Membuat Interface dan Type (Panduan 2026)

Cara tercepat beralih dari JSON ke TypeScript adalah menempelkan payload Anda ke konverter JSON ke TypeScript lalu menyalin interface yang dihasilkannya: tanpa instalasi, tanpa unggah, selesai di dalam browser Anda. Itu sudah cukup untuk kasus “saya butuh tipe sekarang juga”.

Tetapi membuat tipe dan membuat tipe yang baik adalah dua hal berbeda. Konverter harus menebak: Apakah field ini opsional (optional) atau sekadar tidak muncul di salah satu sampel? Apakah array itu selalu berisi string, atau kadang juga angka? Haruskah string tanggal menjadi Date? Panduan ini menelusuri bagaimana inferensi sebenarnya bekerja, kapan harus memilih interface atau type, dan jebakan nyata saat mengubah respons API langsung menjadi tipe yang bisa Anda percaya.

Cara mengonversi JSON ke TypeScript

Mengonversi JSON ke TypeScript membutuhkan tiga langkah:

1. Tempelkan JSON Anda. Masukkan sebuah objek, array, atau respons API mentah ke kotak input. Konversi berjalan seketika, sepenuhnya di sisi klien (client-side).
2. Sesuaikan keluarannya. Pilih interface atau type, tetapkan nama root seperti User atau ApiResponse, aktifkan atau matikan kata kunci export, dan pilih ?: atau | null untuk field opsional.
3. Salin atau unduh. Ambil TypeScript yang dihasilkan dengan satu klik lalu tempelkan langsung ke basis kode Anda.

Itulah seluruh jalur transaksionalnya. Konverter JSON ke TypeScript membaca input, menginferensi pohon tipe (type tree), dan mencetak definisinya di sisi kanan, tanpa ada yang meninggalkan halaman. Sisa panduan ini membahas cara memahami apa yang dihasilkannya sehingga Anda bisa memperbaiki kasus-kasus yang tidak bisa ditebaknya.

Bagaimana tipe JSON dipetakan ke TypeScript

Setiap nilai JSON memiliki padanannya di TypeScript. Pemetaannya sebagian besar satu-ke-satu:

Nilai JSON	Tipe TypeScript
"text"	string
42, 3.14	number
true / false	boolean
null	null
[1, 2, 3]	number[]
{ ... }	interface atau type

Objek adalah tempat pekerjaan sesungguhnya terjadi. Ambil contoh payload pengguna REST yang umum:

{
  "id": 101,
  "name": "Ada Lovelace",
  "email": "ada@example.com",
  "active": true,
  "roles": ["admin", "user"]
}

Sebuah konverter menghasilkan interface TypeScript ini dari JSON tersebut:

export interface User {
  id: number;
  name: string;
  email: string;
  active: boolean;
  roles: string[];
}

Setiap skalar dipetakan ke tipe primitifnya, dan array roles menjadi string[]. Masukkan itu ke klien API Anda dan Anda mendapatkan autocomplete serta pemeriksaan saat kompilasi (compile-time) secara cuma-cuma.

Bagaimana konverter menginferensi tipe

Algoritma inferensinya bekerja dengan empat aturan yang mencakup hampir semua hal yang Anda berikan padanya.

Inferensi struktural: satu interface bernama per objek

Setiap bentuk objek yang berbeda menjadi interface bernamanya sendiri. Objek bersarang (nested) tidak runtuh menjadi tipe inline; keduanya diangkat menjadi definisi terpisah yang direferensikan:

{
  "order": {
    "id": "A-1",
    "total": 42.5,
    "customer": { "name": "Sam", "vip": false }
  }
}

export interface Root {
  order: Order;
}

export interface Order {
  id: string;
  total: number;
  customer: Customer;
}

export interface Customer {
  name: string;
  vip: boolean;
}

Bentuk yang identik dideduplikasi, sehingga dua field dengan struktur yang sama berbagi satu interface alih-alih menghasilkan salinan.

Penggabungan array: menginferensi field opsional

Ketika Anda memberikan sebuah array berisi objek, konverter menggabungkannya kunci demi kunci. Jika sebuah kunci muncul di beberapa elemen tetapi tidak di elemen lain, kunci itu ditandai opsional:

{
  "users": [
    { "id": 1, "nick": "x" },
    { "id": 2 }
  ]
}

export interface Root {
  users: User[];
}

export interface User {
  id: number;
  nick?: string;
}

id ada di setiap elemen, jadi tetap wajib. nick tidak ada pada pengguna kedua, jadi menjadi nick?: string. Inilah sebabnya satu sampel saja jarang mencukupi; lihat bagian jebakan di bawah.

Tipe union untuk array campuran

Array tidak harus homogen. Ketika elemen-elemen memiliki tipe berbeda, konverter mengumpulkannya menjadi sebuah union:

{
  "tags": ["a", "b"],
  "meta": [1, "two"]
}

export interface Root {
  tags: string[];
  meta: (string | number)[];
}

tags seragam berisi string, jadi string[]. meta mencampur angka dan string, menghasilkan (string | number)[]. Array kosong tidak bisa diinferensi sama sekali dan jatuh kembali ke unknown[], karena memang tidak ada yang bisa dipelajari dari nol elemen.

Opsional vs null: ?: versus | null

Keduanya terlihat mirip tetapi maknanya berbeda. Field yang ditandai ?: mungkin sama sekali tidak ada dalam objek. Field bertipe | null selalu ada tetapi mungkin menyimpan nilai null:

{ "score": null }

export interface Root {
  score: number | null;
}

Di sini score hadir dengan null eksplisit, jadi bertipe number | null: nilainya ada, hanya saja null. Bandingkan dengan nick?: string dari contoh array, di mana kuncinya bisa hilang sepenuhnya. Pilih ?: ketika API mungkin menghilangkan kuncinya, dan | null ketika API mengirimkan kuncinya dengan nilai null. Sebagian besar konverter membiarkan Anda mengendalikan cara ini dirender lewat sebuah toggle.

interface vs type: mana yang harus Anda gunakan?

Keduanya bisa menggambarkan bentuk objek. Berikut cara memutuskannya:

Kebutuhan	Gunakan
Bentuk objek biasa dari JSON	interface
Union (A | B) atau intersection (A & C)	type
Declaration merging / perluasan lintas berkas	interface
Tipe mapped atau conditional	type
Pesan error editor yang sedikit lebih bersih	interface

Untuk data yang berasal dari objek JSON, interface adalah pilihan konvensional dan menghasilkan error kompiler yang sedikit lebih rapi. Begitu Anda membutuhkan sebuah union, misalnya Result yang bisa berupa sukses atau error, Anda harus beralih ke type, karena interface tidak bisa mengekspresikan union:

type ApiResult =
  | { status: "ok"; data: User }
  | { status: "error"; message: string };

Default yang baik: hasilkan sebuah interface untuk objek JSON biasa, lalu konversikan ke type saat bentuknya membutuhkan union atau intersection. TypeScript Handbook membahas kasus-kasus tepiannya jika Anda menginginkan perbandingan lengkap. Saat Anda membutuhkan alias json to typescript type ketimbang sebuah interface, sebagian besar konverter menyediakan satu toggle untuk membalik seluruh keluarannya.

quicktype vs json-to-ts vs alat online vs manual

Tidak ada satu cara terbaik untuk membuat tipe TypeScript; semuanya bergantung pada di mana JSON itu berada dan seberapa sering ia berubah.

Pendekatan	Cocok untuk	Kompromi
quicktype	Keluaran multi-bahasa, membuat kode validasi runtime	Lebih berat; keluaran lebih banyak dari yang sering Anda butuhkan
json-to-ts (library)	Codegen saat build yang ditanam ke skrip atau pipeline	Membutuhkan penyiapan dan toolchain Node
Alat online berbasis browser	Konversi sekali pakai, payload sensitif, tanpa instalasi	Tempel manual setiap kali
Menulis tipe dengan tangan	Objek kecil, mempelajari sistem tipe	Membosankan dan rawan kesalahan dalam skala besar

Pilih quicktype saat Anda butuh tipe dalam beberapa bahasa atau ingin ia memancarkan validator berdampingan dengan tipenya. Pilih library json-to-ts saat konversi termasuk dalam langkah build. Untuk konversi cepat, terutama payload yang berisi token, ID pelanggan, atau apa pun yang lebih baik tidak Anda tempelkan ke layanan jarak jauh, alat browser menang dalam hal privasi dan kecepatan. Konverter JSON ke TypeScript kami berjalan sepenuhnya di sisi klien: JSON tidak pernah meninggalkan halaman, dan tidak ada yang perlu diinstal atau diperbarui.

Tipe bukanlah validasi: menjembatani ke pemeriksaan runtime

Hal ini mengecoh banyak tim, jadi layak dinyatakan dengan jelas: tipe TypeScript dihapus saat kompilasi dan tidak melakukan apa pun saat runtime. Sebuah interface User yang dihasilkan tidak akan memeriksa bahwa respons API yang sebenarnya cocok dengannya. Jika server mengirim id sebagai string alih-alih angka, TypeScript dengan senang hati memercayai anotasi tipe Anda padahal data sesungguhnya berbohong.

Untuk generate typescript types sekaligus menegakkannya pada data langsung, pasangkan tipe dengan sebuah validator runtime:

• zod — definisikan skema sekali, inferensikan tipe statisnya darinya, lalu parse respons saat runtime.
• io-ts — validasi berbasis codec, populer di basis kode fungsional.
• JSON Schema + Ajv — skema yang agnostik-bahasa dan divalidasi saat runtime, berguna saat kontrak dibagikan antar layanan.

Pola yang umum adalah menghasilkan interface untuk dukungan editor, lalu menulis skema zod yang cocok sebagai pemeriksaan batas yang sebenarnya:

import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  active: z.boolean(),
  roles: z.array(z.string()),
});

type User = z.infer<typeof UserSchema>;

// Melempar error jika respons sebenarnya tidak cocok dengan skema.
const user = UserSchema.parse(await res.json());

Jika Anda memilih jalur skema, panduan validasi JSON Schema kami menelusuri cara menulis dan menegakkan skema dari awal sampai akhir.

Jebakan umum saat mengetikkan JSON

Tipe yang dihasilkan adalah titik awal, bukan produk jadi. Waspadai hal-hal berikut.

snake_case vs camelCase. Konverter mempertahankan kunci apa adanya. Payload bergaya GitHub dengan public_repos menghasilkan public_repos: number, bukan publicRepos. Jika basis kode Anda lebih menyukai camelCase, Anda harus menerima tipe snake_case itu atau menambahkan lapisan pemetaan yang mengganti nama field saat masuk.

String tanggal tetap string. Field seperti "2026-06-01T00:00:00Z" bertipe string, bukan Date. Itu disengaja: JSON tidak punya tipe tanggal, dan menebak yang salah lebih buruk daripada bersikap jujur. Konversi dari string ke Date termasuk dalam lapisan parsing Anda, tempat Anda mengendalikannya.

Kebocoran any dan unknown. Array kosong menjadi unknown[] dan struktur yang sangat campur aduk bisa merosot menjadi tipe yang longgar. Ini bukan bug; ini adalah konverter yang mengakui bahwa ia tidak bisa menginferensi dari data yang kurang memadai. Perketat secara manual begitu Anda tahu bentuk sebenarnya.

Ledakan bersarang yang dalam. Payload yang bersarang sangat dalam menghasilkan rantai panjang interface-interface kecil. Itu biasanya tidak masalah dan lebih mudah dibaca daripada satu tipe inline raksasa, tetapi ada baiknya meratakan bentuk yang tidak layak mendapat namanya sendiri.

Jebakan sampel tunggal. Ini yang paling besar. Field opsional hanya bisa diinferensi dari beberapa elemen array; satu objek tidak bisa memberi tahu konverter kunci mana yang kadang absen. Kumpulkan dulu array respons yang representatif. Sebuah JSON formatter berguna untuk menempel dan memeriksa beberapa sampel berdampingan sebelum Anda mengonversi, dan jika Anda memberi makan input non-standar seperti JSONC, baca panduan JSON5 / JSONC kami; konverter membutuhkan JSON yang valid secara ketat.

Pertanyaan yang sering diajukan

Bagaimana cara saya mengonversi JSON ke interface TypeScript?

Tempelkan JSON Anda ke konverter JSON ke TypeScript. Ia membaca input di browser Anda dan menghasilkan interface TypeScript seketika. Klik Salin untuk mengambil hasilnya, tanpa unggah, tanpa akun, tanpa plugin yang perlu diinstal.

Haruskah saya memakai interface atau type untuk data JSON?

Gunakan interface untuk bentuk objek biasa dari JSON; itu konvensional dan memberi error editor yang sedikit lebih jelas. Beralihlah ke type saat Anda membutuhkan union atau intersection, karena interface tidak bisa mengekspresikannya.

Bagaimana objek bersarang dan array ditangani?

Objek bersarang menjadi interface terpisah yang bernama (sebuah field address menghasilkan interface Address). Array berisi objek digabungkan kunci demi kunci menjadi satu interface elemen; array primitif menjadi array bertipe seperti string[].

Bagaimana field opsional dan null diketikkan?

Kunci yang hilang dari sebagian elemen array ditandai opsional (nick?: string). Kunci yang selalu ada tetapi menyimpan null diketikkan dengan | null (score: number | null). Keduanya menggambarkan situasi berbeda: absen versus ada-tetapi-null.

Apakah tipe TypeScript memvalidasi JSON saat runtime?

Tidak. Tipe TypeScript dihapus saat kompilasi dan tidak memeriksa data saat runtime. Untuk memvalidasi respons API yang sebenarnya, pasangkan tipe yang dihasilkan dengan validator runtime seperti zod, io-ts, atau JSON Schema dengan Ajv.

quicktype vs json-to-ts vs konverter online: mana yang terbaik?

quicktype cocok untuk keluaran multi-bahasa dan validator runtime; library json-to-ts cocok untuk codegen saat build; konverter online cocok untuk konversi cepat, privat, dan sekali pakai tanpa instalasi. Untuk payload sensitif, alat browser sisi klien menjaga data tetap jauh dari server mana pun.

Mengapa string tanggal diketikkan sebagai string alih-alih Date?

JSON tidak punya tipe tanggal, jadi tanggal hanyalah sebuah string saat ditransmisikan. Mengetikkannya sebagai string itu jujur dan stabil; mengonversi ke Date adalah keputusan untuk lapisan parsing Anda, tempat Anda mengendalikan format dan penanganan error.

Apakah data JSON saya bersifat privat saat memakai konverter online?

Dengan alat sisi klien, ya. Konversi berjalan sepenuhnya di browser Anda menggunakan JavaScript, sehingga JSON, termasuk token, ID, dan data pelanggan, tidak pernah meninggalkan halaman dan tidak pernah dikirim ke server.