Interface di TypeScript: Menggambarkan Bentuk Objekmu

Data yang kamu olah di program nyata jarang berupa satu angka atau satu kata. Biasanya berbentuk objek: seorang pelanggan dengan nama dan email, sebuah produk dengan harga dan label, sebuah pengaturan dengan beberapa tanda aktif/nonaktif. Begitu objek-objek ini mulai berpindah dari satu bagian kode ke bagian lain, kamu butuh cara untuk berkata “benda ini harus tampak seperti ini.” Nah, deskripsi semacam itulah yang diberikan oleh interface.

Di TypeScript, interface adalah cetak biru bernama untuk bentuk sebuah objek. Ia mendaftar properti apa saja yang dimiliki objek dan tipe nilai untuk masing-masing properti. Kamu menulis cetak birunya sekali, menempelkannya di mana pun dibutuhkan, lalu TypeScript diam-diam memeriksa apakah setiap objek benar-benar cocok. Inilah alat sehari-hari untuk memberi tipe pada objek, dan begitu kamu paham, ia akan jadi andalan.

Apa arti “bentuk sebuah objek”

Sebelum menyentuh TypeScript, mari pastikan dulu maksud kata bentuk. Saat membicarakan bentuk objek, kita merujuk pada dua hal sekaligus: nama-nama propertinya dan tipe nilai yang tersimpan di setiap nama itu.

Ambil contoh objek biasa seperti ini:

const user = {
  name: "John Doe",
  email: "john@example.com",
  age: 34,
};

Bentuknya adalah: name berupa string, email berupa string, dan age berupa number (angka). Interface hanyalah cara menuliskan aturan itu agar bisa dipakai ulang, lengkap dengan nama yang bisa kamu rujuk nanti.

Mendefinisikan interface pertamamu

Kamu mendeklarasikan interface dengan kata kunci interface, sebuah nama, lalu satu blok yang mendaftar tiap properti beserta tipenya. Sesuai kebiasaan, namanya diawali huruf besar, misalnya User.

interface User {
  name: string;
  email: string;
  age: number;
}

Coba baca dengan lantang: “Sebuah User punya name berupa string, email berupa string, dan age berupa number.” Perhatikan, di sini tidak ada satu pun nilai, yang ada hanya tipe. Interface adalah kontrak, bukan data sungguhan. Ia menjelaskan seperti apa wujud sebuah User, tanpa menjadi User itu sendiri.

Satu hal kecil yang sering membingungkan: pemisah antarproperti boleh berupa titik koma, koma, atau cukup baris baru. Ketiganya sah. Pilih satu lalu pakai secara konsisten. Kebanyakan orang memakai baris baru (atau titik koma) di dalam interface.

Memakai interface

Cetak biru baru berguna setelah ditempelkan ke sesuatu. Tempat paling umum adalah saat kamu mendeklarasikan variabel atau parameter fungsi. Kamu menambahkan anotasi berupa titik dua diikuti nama interface-nya.

interface User {
  name: string;
  email: string;
  age: number;
}

const john: User = {
  name: "John Doe",
  email: "john@example.com",
  age: 34,
};

Sekarang TypeScript mengikat john pada kontrak User. Kalau kamu lupa sebuah properti wajib, salah mengeja, atau memberi tipe yang keliru, kamu langsung dapat error sebelum kode dijalankan:

const broken: User = {
  name: "Jane Doe",
  email: "jane@example.com",
  // age belum diisi -> TypeScript protes di sini
};

Cetak biru yang sama makin terasa manfaatnya pada parameter fungsi. Daripada mengulang daftar properti di mana-mana, kamu cukup menyebut nama interface-nya sekali lalu memakainya berulang:

interface User {
  name: string;
  email: string;
  age: number;
}

function greet(person: User): string {
  return `Halo, ${person.name}!`;
}

greet({ name: "John Doe", email: "john@example.com", age: 34 });

Di dalam greet, TypeScript tahu bahwa person punya name, email, dan age. Kamu dapat saran otomatis (autocomplete) untuk ketiganya, dan salah ketik seperti person.naem langsung tertangkap. Bantuan editor inilah separuh alasan kenapa interface terasa enak dipakai.

Properti opsional dengan ?

Tidak semua properti selalu ada. Mungkin sebagian besar pengguna punya nomor telepon, tapi sebagian tidak. Kamu tak ingin memaksakan nilai yang memang tak ada, tapi juga tak mau kehilangan keamanan tipe. Jawabannya adalah penanda opsional: tanda tanya setelah nama properti.

interface User {
  name: string;
  email: string;
  age: number;
  phone?: string;
}

phone? berarti “sebuah User boleh punya phone, dan kalau ada, tipenya string.” Kedua objek ini sekarang sama-sama sah:

const withPhone: User = {
  name: "John Doe",
  email: "john@example.com",
  age: 34,
  phone: "+62 812 0000 0000",
};

const withoutPhone: User = {
  name: "Jane Doe",
  email: "jane@example.com",
  age: 29,
};

Ada satu hal yang baik dipahami sejak awal. Saat kamu membaca properti opsional, tipenya menjadi “nilainya atau undefined,” karena bisa jadi ia tidak ada. Maka TypeScript akan mendorongmu memeriksa dulu sebelum memakainya:

function callUser(user: User) {
  // user.phone bisa saja undefined, jadi periksa dulu
  if (user.phone) {
    console.log(`Menelepon ${user.phone}`);
  } else {
    console.log("Tidak ada nomor telepon");
  }
}

Pemeriksaan kecil itu bukan pekerjaan sia-sia. Itu cara TypeScript mengingatkanmu pada kasus nyata yang tanpa sadar mungkin terlewat oleh kodemu.

Properti readonly dengan readonly

Ada nilai yang seharusnya ditetapkan sekali lalu tak pernah berubah. Contoh klasiknya adalah id yang diberikan saat sebuah data dibuat. Kamu bisa menandai properti sebagai readonly supaya setiap upaya menimpa nilainya di kemudian hari langsung menjadi error.

interface User {
  readonly id: number;
  name: string;
  email: string;
}

const john: User = {
  id: 101,
  name: "John Doe",
  email: "john@example.com",
};

john.name = "John A. Doe"; // boleh, name bisa diubah
john.id = 999;             // error: id bersifat readonly

Kamu tetap bisa membaca properti readonly sesukamu. Kamu hanya tak boleh menimpanya setelah objek dibuat. Anggap saja ini pagar pengaman: ia mendokumentasikan niatmu (“nilai ini tidak pernah berubah”) dan membiarkan kompiler menegakkannya untukmu.

Mewarisi interface dengan extends

Seiring aplikasi membesar, kamu akan sering menemui satu bentuk yang sebenarnya versi lebih khusus dari bentuk lain. Seorang admin pada dasarnya pengguna dengan wewenang tambahan. Produk premium adalah produk dengan kolom diskon. Menulis ulang setiap properti bersama setiap kali jelas melelahkan dan rawan keliru. Interface menyelesaikannya lewat extends.

extends membuat satu interface dibangun di atas interface lain, mewarisi seluruh propertinya dan menambahkan miliknya sendiri:

interface User {
  name: string;
  email: string;
}

interface Admin extends User {
  role: "admin";
  canDeleteUsers: boolean;
}

Kini sebuah Admin mewajibkan semua yang diwajibkan User (name, email) ditambah dua properti khususnya. Kolom yang sama hanya kamu tulis sekali:

const boss: Admin = {
  name: "Jane Doe",
  email: "jane@example.com",
  role: "admin",
  canDeleteUsers: true,
};

Kamu juga bisa mewarisi lebih dari satu interface sekaligus dengan memisahkannya pakai koma. Ini praktis ketika sebuah bentuk menggabungkan beberapa bentuk kecil:

interface Timestamped {
  createdAt: string;
  updatedAt: string;
}

interface Account extends User, Timestamped {
  plan: "free" | "pro";
}

Di sini, sebuah Account membawa kolom-kolom user, kolom-kolom waktu, dan plan miliknya sendiri. Pola merangkai seperti ini menjaga tiap interface tetap kecil dan fokus, sambil membiarkanmu menyusun bentuk yang lebih besar dari potongan-potongannya.

   User                 Timestamped
  ┌──────────┐         ┌────────────┐
  │ name     │         │ createdAt  │
  │ email    │         │ updatedAt  │
  └────┬─────┘         └─────┬──────┘
       │                     │
       └────────┬────────────┘
                ▼
            Account
       ┌─────────────────┐
       │ name, email     │
       │ createdAt,      │
       │ updatedAt       │
       │ plan            │
       └─────────────────┘

Rangkuman sintaks singkat

Berikut semuanya dalam satu tabel agar mudah kamu lihat lagi nanti:

Penutup

Interface adalah cara memberi nama pada bentuk sebuah objek dan membuat TypeScript menjaga kodemu agar patuh pada bentuk itu. Berikut versi ringkas dari semua di atas:

• Interface mendaftar properti objek beserta tipenya. Ia kontrak di tahap kompilasi yang lenyap saat kode dijalankan.
• Tempelkan dengan titik dua (const john: User = ... atau function greet(person: User)) untuk mendapat pemeriksaan dan autocomplete di editor.
• Tambahkan ? untuk properti opsional; ingat nilainya bisa undefined, jadi periksa dulu sebelum dipakai.
• Tambahkan readonly untuk properti yang seharusnya ditetapkan sekali dan tak pernah ditimpa (perlindungannya dangkal).
• Pakai extends untuk membangun interface yang lebih khusus di atas yang sudah ada, bahkan menggabungkan beberapa sekaligus.

Mulailah dengan memberi nama pada objek-objek yang sudah kamu pindah-pindahkan di kodemu sekarang. Setiap interface yang kamu tulis membuat perubahan berikutnya lebih aman, karena TypeScript kini tahu seperti apa seharusnya datamu dan akan langsung bersuara begitu ada yang melenceng dari bentuknya.