Belajar TypeScript - Interface, Type Alias, dan Deklarasi Tipe

#Pendahuluan

Di episode 4 kalian menggabungkan tipe dengan union dan intersection. Episode 5 menjawab pertanyaan yang pasti muncul berikutnya: bagaimana cara memberi nama pada bentuk objek yang dipakai berulang-ulang. Mengetik ulang struktur objek di setiap fungsi membuat kode berisik dan mudah tidak konsisten.

Dua alat utama untuk ini adalah interface dan type alias. Keduanya terlihat mirip dan sering dianggap bisa ditukar, padahal punya perbedaan perilaku yang menentukan kualitas API tipe di proyek besar. Episode ini juga membahas deklarasi tipe untuk fungsi agar pola callback tetap aman.

Sesudah episode ini kalian akan bisa mendesain kontrak objek yang jelas, mengulangnya tanpa duplikasi, dan memilih alat yang tepat dengan alasan yang bisa dijelaskan.

#Interface untuk Bentuk Objek

#Menamai Bentuk Objek

Interface mendeklarasikan bentuk sebuah objek dengan blok properti:

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

Deklarasi interface Pengguna membuat tipe baru yang menuntut setiap nilai memiliki properti nama dan umur. Tanda tanya setelah nama properti menjadikannya opsional, sehingga email boleh tidak ada. TypeScript lalu memeriksa kesesuaian struktur di setiap pemakaian.

#Properti Readonly dan Index Signature

Dua dekorasi properti yang sering dipakai:

interface Konfigurasi {
    readonly appId: string;
    [key: string]: string | number;
}

Properti readonly mengunci nilai setelah objek dibuat, sehingga penulisan ulang akan memunculkan error. Index signature membolehkan properti dinamis tambahan selama sesuai dengan tipe yang dideklarasikan. Pola ini umum untuk peta konfigurasi dan objek yang datanya tidak dikenal di awal.

#Type Alias: Alternatif yang Lebih Fleksibel

Type alias menggunakan kata kunci type dan bisa menamai bentuk apa pun, bukan hanya objek:

type Id = string | number;
type Status = "aktif" | "nonaktif";
type Titik = { x: number; y: number };
type Callback = (err: Error | null) => void;

Type alias bisa menamai union, literal, fungsi, bahkan kombinasi dari semuanya. Interface tidak bisa menamai union atau primitive. Itulah alasan pertama memilih type ketimbang interface.

#Interface vs Type: Kapan Memakainya

#Declaration Merging

Perbedaan yang paling membedakan keduanya adalah kemampuan menggabungkan deklarasi:

interface Catatan {
    judul: string;
}
 
interface Catatan {
    isi: string;
}

Dua blok interface Catatan di atas akan digabung menjadi satu tipe dengan properti judul dan isi. Type alias dengan nama yang sama justru memunculkan error duplikat. Merging ini berguna saat menambah properti ke tipe library eksternal tanpa mengubah file aslinya.

#Extends vs Intersection

Interface mewarisi dengan extends, sedangkan type alias menggabungkan dengan &:

interface Dasar {
    id: number;
}
 
interface User extends Dasar {
    nama: string;
}
 
type Item = Dasar & { harga: number };

Hasil akhirnya hampir sama. Aturan praktis komunitas: gunakan interface untuk objek dan API publik yang butuh declaration merging, gunakan type untuk union, literal, dan struktur kompleks. Kalau ragu, mulai dari interface karena lebih mudah diperluas.

#Deklarasi Tipe untuk Fungsi

Fungsi juga bisa dideklarasikan sebagai tipe sehingga pola callback dipakai konsisten di banyak tempat:

type Penerima = (pesan: string, kode: number) => void;
 
function kirim(penerima: Penerima): void {
    penerima("selesai", 200);
}

Parameter dan nilai balik ditulis lengkap di dalam deklarasi. Variabel penerima hanya boleh diisi fungsi yang menerima string dan number lalu mengembalikan void. TypeScript akan menolak callback yang menandatangani kontrak berbeda.

#Penutup

Episode 5 melengkapi kalian dengan alat untuk menamai tipe: interface untuk objek yang butuh merging, dan type alias untuk semua bentuk ekspresif lainnya. Kalian juga belajar dekorasi properti serta deklarasi fungsi agar kontrak data terdokumentasi oleh compiler.

Inti yang harus dibawa pulang:

• Interface menamai bentuk objek dan mendukung declaration merging.
• Properti readonly mencegah penulisan ulang; index signature menampung properti dinamis.
• Type alias bisa menamai union, literal, dan tipe fungsi.
• Interface mewarisi dengan extends; type alias menggabung dengan &.
• Pakai interface untuk objek publik, type untuk union dan bentuk kompleks.
• Deklarasi fungsi menegakkan kontrak callback di seluruh codebase.

Di episode 6 selanjutnya kita akan membahas tipe array, tuple, dan enum, yaitu cara memodelkan kumpulan data dengan aman, pasangan nilai dengan panjang tetap, dan alternatif literal untuk enumerasi.