Mengonversi JSON ke TypeScript: Panduan Tip dan Interface

Mengapa Mengonversi JSON ke TypeScript?

Tip (Types) dalam TypeScript memberikan keamanan pada saat kompilasi (compile-time safety) dan pengalaman pengembangan yang lebih baik dengan fitur pelengkapan otomatis (autocomplete) serta deteksi kesalahan.

Contoh Cepat

Data JSON

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "active": true
}

Interface TypeScript

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

Alat Online

quicktype.io (Direkomendasikan)

Tempel JSON

Pilih TypeScript

Salin tip yang dihasilkan

Opsi:

• Interface vs Type
• Properti opsional
• Validasi runtime

Pemetaan Tip (Type Mapping)

| Tip JSON | Tip TypeScript |

|-----------|-----------------|

| string | string |

| number | number |

| true/false | boolean |

| null | null |

| array | T[] atau Array |

| object | interface atau type |

Menangani Properti Opsional dan Null

interface User {
  name: string;
  middleName?: string;        // Opsional
  deletedAt: string | null;   // Nullable
  nickname?: string | null;   // Keduanya
}

Array dan Objek Bersarang

interface Response {
  users: User[];
  metadata: {
    total: number;
    page: number;
  };
}

Menggunakan CLI quicktype

# Instalasi
npm install -g quicktype

# Menghasilkan tip
quicktype -s json -o types.ts data.json

# Dari URL
quicktype -s json -o types.ts "https://api.example.com/users"

Validasi Runtime dengan Zod

import { z } from 'zod';

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

// Infer tip TypeScript
type User = z.infer<typeof UserSchema>;

// Validasi di runtime
const result = UserSchema.safeParse(data);
if (result.success) {
  const user: User = result.data;
}

Tip Kompleks

Tip Union (Union Types)

type Status = "pending" | "approved" | "rejected";

interface Task {
  id: number;
  status: Status;
}

Tip Generik (Generic Types)

interface ApiResponse<T> {
  data: T;
  error?: string;
}

type UserResponse = ApiResponse<User>;

Type vs Interface

Gunakan Interface untuk:

• Bentuk objek
• Ekstensi/pewarisan (inheritance)
• API publik

Gunakan Type untuk:

• Union
• Tip kompleks
• Tip fungsi

Praktik Terbaik

Gunakan quicktype untuk konversi awal

Pertajam tip secara manual

Tambahkan validasi runtime dengan Zod

Simpan tip di dekat tempat penggunaannya

Ekspor tip dengan benar

Alur Kerja Otomatis

// schema.ts
export const schemas = {
  user: z.object({
    id: z.number(),
    name: z.string()
  })
};

export type User = z.infer<typeof schemas.user>;

// api.ts
import { schemas, User } from './schema';

async function getUser(id: number): Promise<User> {
  const response = await fetch(/api/users/${id});
  const data = await response.json();
  return schemas.user.parse(data);
}

Kesimpulan

Mengonversi JSON ke tip TypeScript meningkatkan kualitas kode dan pengalaman pengembang. Gunakan quicktype untuk pembuatan kode awal dan Zod untuk validasi runtime!