Interface — TypeScript

Interface mendefinisikan kontrak bentuk object yang bisa dipakai ulang: interface User { nama: string; umur: number; email?: string; // opsional } const budi…

Interface memberi nama pada sebuah bentuk object, supaya bentuk itu bisa dipakai ulang di banyak tempat. Di materi sebelumnya bentuk object ditulis langsung di samping variabel. Interface menuliskannya sekali, dengan nama seperti User. Mirip template formulir yang disimpan dengan nama "Formulir Anggota": daripada menggambar kolomnya ulang di tiap halaman, cukup sebut namanya. Formulir Admin tinggal "Formulir Anggota ditambah kolom jabatan".

🧪 Tebakan cepat: interface Admin extends User cuma menulis satu property, role. Object Admin { nama: "Rina", role: "editor" } gak punya umur. Diterima atau ditolak? Tebak dulu, jawabannya ada di bagian "extends: interface turunan".

Memberi nama pada bentuk object

interface User {
  nama: string;
  umur: number;
}

const budi: User = { nama: "Budi", umur: 17 };
const ani: User = { nama: "Ani", umur: 20 };

interface User { ... } membuat type bernama User. Namanya diawali huruf kapital, kebiasaan di TypeScript untuk nama type.
Di dalamnya, satu property per baris: nama: string;.
const budi: User memakai nama itu seperti type lain. Bentuknya ditulis sekali, dipakai berkali-kali.
Pesan error-nya juga jadi lebih pendek. const budi: User = { nama: "Budi" }; ditolak dengan Property 'umur' is missing in type '{ nama: string; }' but required in type 'User'. ts(2741).

Interface sebagai type parameter

function formatUser(user: User): string {
  return user.nama + " (" + user.umur + ")";
}

console.log(formatUser(budi));                     // Budi (17)
console.log(formatUser({ nama: "Ani", umur: 20 })); // Ani (20)

user: User: parameternya memakai type bernama, gak perlu menulis ulang { nama: string; umur: number }.
Kalimatnya disambung dari empat bagian: nama, lalu " (" (spasi dan kurung buka), lalu umur, lalu ")".
Di dalam function, TypeScript tahu user.nama itu string dan user.umur itu number. user.role ditolak: Property 'role' does not exist on type 'User'. ts(2339).

Interface cuma untuk TypeScript. Di JavaScript hasil compile, interface User hilang total, gak tersisa satu baris pun:

"use strict";
function formatUser(user) {
    return user.nama + " (" + user.umur + ")";
}

Latihan juga menerima type User = { nama: string; umur: number };. Bedanya dengan interface dibahas di materi berikutnya, Type Alias.

Property opsional di interface

interface User {
  nama: string;
  umur: number;
  email?: string;
}

Sama seperti di object type, ? membuat email boleh gak ada. Tanpa email?, object yang punya email ditolak: Object literal may only specify known properties, and 'email' does not exist in type 'User'. ts(2353).

extends: interface turunan

interface Admin extends User {
  role: string;
}

const sari: Admin = { nama: "Sari", umur: 25, role: "editor" };
console.log(formatUser(sari)); // Sari (25)

const rina: Admin = { nama: "Rina", role: "editor" };

extends User artinya Admin mewarisi semua property User, lalu menambah role. Jadi Admin punya nama, umur, dan role.
sari boleh dikirim ke formatUser, yang minta User, karena Admin punya semua yang dibutuhkan User.
rina ditolak: Property 'umur' is missing in type '{ nama: string; role: string; }' but required in type 'Admin'. ts(2741). Itu jawaban tebakannya: property warisan tetap wajib, walau gak ditulis ulang di Admin.

📌 Interface dengan nama sama digabung

interface User {
  nama: string;
}
interface User {
  umur: number;
}

const budi: User = { nama: "Budi" };

Dua interface bernama sama gak bikin error. TypeScript menggabungkannya jadi satu User berisi nama dan umur (declaration merging), jadi budi ditolak karena gak punya umur. Fitur ini dipakai library untuk menambah property ke interface yang sudah ada. Di kodemu sendiri, nama yang gak sengaja kembar bisa bikin bingung, jadi pakai nama yang beda.

⚠️ Jebakan yang sering ketemu

Gak ada type bernama. Latihan ini memeriksa kodemu punya interface atau type dengan nama berhuruf kapital, misalnya interface User. interface user (huruf kecil) gak dihitung.
Bentuk ditulis ulang di parameter. function formatUser(user: { nama: string; umur: number }) sah, tapi tujuan materi ini memakai nama: user: User.
Format kalimat. Hasilnya harus persis Budi (17): satu spasi sebelum kurung buka, gak ada spasi di dalam kurung. Dan baca dari parameter user, karena formatUser juga diuji dengan { nama: "Ani", umur: 20 }.
Mengira interface ada waktu jalan. Interface hilang setelah compile. Data dari server gak dicek terhadap User.

TL;DR: interface User { nama: string; umur: number; } memberi nama pada bentuk object, dengan huruf kapital di depan. Pakai seperti type lain: const budi: User, function formatUser(user: User): string. email?: string membuat property opsional. interface Admin extends User { role: string; } mewarisi semua property User dan menambah role, dan property warisan tetap wajib. Dua interface bernama sama digabung. Interface hilang total di JavaScript hasil compile.