Bedah Interface di TypeScript: Cara Kerja dan Menggunakannya

Saat mulai serius menggunakan TypeScript, kamu akan cepat bertemu dengan interface. Konsep ini sering disebut, tapi tidak selalu dipahami secara utuh. Artikel ini membedah cara kerja interface pada TypeScript, mulai dari konsep dasar, manfaat, hingga penerapannya agar struktur kode lebih rapi dan aman.

Definisi Interface pada TypeScript

Interface di TypeScript berfungsi sebagai “cetak biru” atau kontrak yang mendeskripsikan bentuk sebuah objek.

Lewat interface, kamu bisa menentukan properti apa saja yang harus dimiliki sebuah objek beserta tipe datanya, tanpa perlu memikirkan implementasi logika di dalamnya.

Sederhananya, interface hanya fokus pada struktur data TypeScript, bukan pada nilai awal atau isi fungsi. Contohnya seperti ini:

interface Human {
  name: string;
  age: number;
  height: number;
}

Dari contoh di atas, terlihat jelas bahwa interface Human hanya mendefinisikan properti dan tipenya. Tidak ada data aktual atau kode fungsi.

Objek apa pun yang ingin dianggap sebagai Human wajib memiliki tiga properti tersebut dengan tipe yang sesuai.

Konsep ini membuat interface berperan sebagai kontrak. Jika sebuah objek tidak memenuhi kontrak tersebut, TypeScript akan langsung memberikan peringatan saat proses compile. Di sinilah kekuatan static typing TypeScript terasa nyata.

Sekilas, interface memang mirip dengan type alias. Namun, keduanya memiliki perbedaan mendasar. Type alias lebih fleksibel karena bisa merepresentasikan union, tuple, atau primitive.

Sementara itu, interface unggul dalam hal extensibility dan declaration merging, yang membuatnya lebih cocok untuk object typing TypeScript dalam skala besar.

Cara Kerja Interface pada TypeScript

Untuk memahami cara kerja interface pada TypeScript, kita perlu melihat syntax dasarnya terlebih dahulu.

interface InterfaceName {
  property1: type;
  property2: type;
}

Elemen pentingnya cukup sederhana:

interface adalah keyword untuk mendefinisikan interface
InterfaceName adalah nama interface
property mendeskripsikan atribut yang wajib dimiliki
type menentukan tipe data masing-masing properti

Di sinilah konsep structural typing bekerja. TypeScript cenderung memeriksa struktur data, alih-alih nama tipe, seperti pada bahasa lain Java atau C# yang menggunakan pendekatan nominal typing.

Jadi, kamu tidak perlu secara eksplisit menulis bahwa sebuah objek “mengimplementasikan” interface, berbeda dengan bahasa pemrograman lain yang lebih kaku.

Pendekatan ini membuat object typing TypeScript terasa lebih fleksibel. Kamu bisa menerima data dari API, form, atau CMS, lalu memastikan strukturnya sesuai tanpa harus mengubah cara data itu dibuat.

Hasilnya, kode tetap aman berkat static typing TypeScript, namun tetap luwes mengikuti kebutuhan aplikasi yang terus berkembang.

Singkatnya, interface bekerja sebagai penjaga struktur data agar tetap konsisten, rapi, dan minim error sejak awal pengembangan.

Manfaat Interface pada TypeScript

Dalam praktik pengembangan aplikasi, interface bukan sekadar fitur tambahan. Ia punya peran penting dalam menjaga kualitas kode, terutama ketika project mulai berkembang dan melibatkan banyak struktur data.

Keamanan Tipe Data Lebih Terjaga

Dengan interface, TypeScript membantu kamu memastikan setiap objek memiliki tipe data yang sesuai. Kesalahan sederhana seperti memasukkan string ke properti angka bisa langsung terdeteksi. Ini membuat proses development lebih tenang karena risiko error akibat salah tipe jauh berkurang.

Error Bisa Dicegah Sejak Awal

TypeScript melakukan pengecekan saat proses compile, bukan ketika aplikasi sudah berjalan. Artinya, banyak potensi bug bisa diketahui lebih cepat sebelum sampai ke user. Untuk project skala menengah hingga besar, pendekatan ini sangat membantu menjaga stabilitas aplikasi.

Struktur Kode Lebih Konsisten dan Reusable

Interface memungkinkan kamu mendefinisikan satu struktur data yang sama untuk digunakan di berbagai bagian aplikasi. Hasilnya, kode jadi lebih rapi dan mudah dirawat karena tidak ada definisi struktur yang berbeda-beda untuk objek serupa.

Mendukung Polimorfisme Secara Fleksibel

Karena interface bisa diperluas, kamu dapat membangun struktur data baru tanpa merusak yang lama. Ini memudahkan pengembangan fitur tambahan seiring kebutuhan bisnis yang terus berubah.

Kode Lebih Mudah Dipahami

Interface membuat kode terasa lebih “berbicara”. Tanpa membaca seluruh implementasi, kamu sudah bisa memahami tujuan sebuah objek hanya dari definisinya.

Produktivitas Developer Meningkat

Berkat dukungan autocomplete dan linting dari IDE, proses menulis kode jadi lebih cepat dan minim kesalahan. Fokus kamu pun bisa dialihkan ke logika bisnis, bukan sekadar memperbaiki typo atau error sepele.

Cara Menggunakan Interface pada TypeScript

Setelah memahami konsep dan manfaatnya, sekarang saatnya melihat bagaimana interface benar-benar digunakan dalam kode TypeScript sehari-hari.

#1. Interface untuk Function

Interface tidak hanya berguna untuk objek, tapi juga sangat membantu saat kamu ingin memastikan bentuk data yang masuk dan keluar dari sebuah fungsi tetap konsisten.

interface Args {
  name: string;
  age: number;
}

interface Result {
  name: string;
  age: number;
  doubledAge: number;
}

function ageDoubler({ name, age }: Args): Result {
  return {
    name,
    age,
    doubledAge: age * 2,
  };
}

Dengan pendekatan ini, TypeScript memastikan bahwa fungsi menerima data sesuai kebutuhan dan mengembalikan hasil dengan struktur yang jelas.

Untuk kamu yang sering bekerja dengan API atau form input, ini sangat membantu mencegah kesalahan data.

#2. Interface pada Class

Saat menggunakan class, interface berfungsi sebagai pengawas. Ia memastikan class tersebut memiliki properti yang sudah disepakati.

interface PersonInt {
  name: string;
  age: number;
}

class Person implements PersonInt {
  name: string = '';
  age: number = 0;
}

Jika ada properti yang terlewat, TypeScript akan langsung memberi peringatan. Ini membuat struktur class tetap konsisten, terutama dalam project tim.

#3. Optional Properties

Tidak semua data selalu tersedia. Untuk kondisi seperti ini, TypeScript menyediakan properti opsional, seperti menggunakan tanda ?.

interface Person {
  name: string;
  age: number;
  color?: string;
}

Tanda ? menunjukkan bahwa properti tersebut boleh ada atau tidak. Cocok untuk data profil pengguna atau konfigurasi yang sifatnya opsional.

#4. Readonly Properties

Ada kalanya sebuah data tidak boleh diubah setelah dibuat, misalnya ID atau nama unik.

interface Person {
  readonly name: string;
}

Dengan readonly, TypeScript akan mencegah perubahan data tersebut saat development.

#5. Index Signatures

Jika kamu tidak tahu nama properti secara pasti, tapi tahu bentuk nilainya, index signature adalah solusinya.

interface Index {
  [key: string]: boolean;
}

Pendekatan ini sering digunakan untuk konfigurasi dinamis atau object dengan key yang berubah-ubah.

#6. Extending Interface

Interface bisa dikembangkan tanpa mengubah struktur awalnya.

interface Person {
  name: string;
  age: string;
}

interface PersonWithHobbies extends Person {
  hobbies: string[];
}

Cara ini menjaga struktur data tetap rapi sekaligus fleksibel mengikuti kebutuhan baru.

#7. Discriminated Unions

Teknik ini membantu TypeScript memahami tipe data berdasarkan satu properti pembeda.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

Sangat berguna untuk logika bercabang yang kompleks, seperti perhitungan atau rendering komponen.

#8. Generic Interfaces

Generic membuat interface lebih fleksibel dan bisa digunakan untuk berbagai tipe data.

interface Item<T> {
  value: T;
}

const numberItem: Item<number> = { value: 22 };

Pendekatan ini cocok untuk struktur data umum seperti response API atau state management.

Tips Praktis Menggunakan Interface TypeScript

Gunakan composition dibanding inheritance untuk menghindari hierarki yang kaku. Selain itu, jaga interface tetap kecil dan fokus pada satu tanggung jawab. Interface yang terlalu besar justru menyulitkan maintenance.

Dengan memecah interface menjadi bagian-bagian kecil, kode akan lebih modular, mudah diuji, dan siap berkembang.

Kesimpulan

Interface adalah fondasi penting dalam TypeScript untuk menjaga konsistensi struktur data TypeScript, memperkuat static typing TypeScript, dan meningkatkan kualitas kode secara keseluruhan.

Dengan memahami cara kerja dan penerapannya, kamu bisa membangun aplikasi yang lebih rapi, aman, dan scalable.

Jika kamu sedang mengembangkan website personal brand atau aplikasi berbasis TypeScript, performa server juga tak kalah penting.

Menggunakan VPS Murah dari IDwebhost bisa jadi langkah strategis untuk memastikan website kamu tetap cepat, stabil, dan siap tumbuh seiring perkembangan project.

Saatnya Scale Project dengan VPS!