Dalam pengembangan aplikasi menggunakan TypeScript, konsep Interface di TypeScript memegang peranan penting dalam membangun struktur kode yang rapi, konsisten, dan mudah dipelihara. Interface digunakan untuk mendefinisikan kontrak atau bentuk dari sebuah objek atau class tanpa menentukan implementasinya secara langsung. Dengan cara ini, developer dapat menulis kode yang fleksibel namun tetap memiliki kontrol atas tipe dan perilaku yang diharapkan.
Salah satu kekuatan utama TypeScript dibanding JavaScript adalah kemampuannya untuk menggunakan interface dalam class. Melalui kata kunci implements, sebuah class dapat mematuhi kontrak yang ditentukan oleh satu atau lebih interface. Fitur ini membuat sistem lebih modular, mudah diuji, dan cocok diterapkan dalam pengembangan skala besar seperti arsitektur berbasis service atau aplikasi enterprise.
Apa Itu Interface TypeScript?
Interface TypeScript adalah struktur yang digunakan untuk menentukan bentuk data, seperti properti dan method yang harus dimiliki oleh suatu objek atau class. Interface tidak memiliki implementasi, tetapi hanya mendefinisikan apa yang harus ada.
Contoh dasar interface:
interface Person {
name: string;
age: number;
speak(): void;
}
const user: Person = {
name: "Andi",
age: 25,
speak() {
console.log(`Halo, saya ${this.name}`);
}
};
user.speak(); // Output: Halo, saya Andi
Dalam contoh di atas, interface Person menentukan bahwa setiap objek bertipe Person harus memiliki properti name, age, dan method speak().
Interface pada Class dengan implements
Kata kunci implements digunakan ketika sebuah class ingin mengikuti struktur dari satu atau beberapa interface. Class yang mengimplementasikan interface harus memenuhi semua properti dan method yang didefinisikan dalam interface tersebut.
Contoh penggunaan interface pada class:
interface Vehicle {
brand: string;
drive(): void;
}
class Car implements Vehicle {
brand: string;
constructor(brand: string) {
this.brand = brand;
}
drive() {
console.log(`${this.brand} sedang melaju...`);
}
}
const myCar = new Car("Toyota");
myCar.drive(); // Output: Toyota sedang melaju...
Pada contoh di atas, class Car mengimplementasikan interface Vehicle dan menyediakan semua properti serta method yang diperlukan. Jika salah satu tidak diimplementasikan, TypeScript akan memberikan error.
Implementasi Multiple Interface
TypeScript juga mendukung multiple interface implementation, artinya satu class bisa mengimplementasikan lebih dari satu interface sekaligus. Fitur ini sangat berguna ketika sebuah class perlu memiliki beberapa perilaku yang berasal dari sumber berbeda.
Contoh multiple interface:
interface Drivable {
drive(): void;
}
interface Flyable {
fly(): void;
}
class FlyingCar implements Drivable, Flyable {
drive() {
console.log("Mobil terbang sedang berjalan di jalan raya...");
}
fly() {
console.log("Mobil terbang melayang di udara...");
}
}
const futureCar = new FlyingCar();
futureCar.drive(); // Output: Mobil terbang sedang berjalan di jalan raya...
futureCar.fly(); // Output: Mobil terbang melayang di udara...
Dengan menggabungkan beberapa interface, kita dapat menciptakan class dengan fungsionalitas yang kompleks namun tetap terstruktur dan mudah dikembangkan.
Contoh Real Use Case: Sistem Pembayaran
Mari lihat contoh penerapan Interface di TypeScript dalam kasus nyata — sistem pembayaran online yang memiliki berbagai metode seperti transfer bank dan e-wallet.
interface Payment {
processPayment(amount: number): void;
}
interface Refundable {
refund(amount: number): void;
}
class BankTransfer implements Payment, Refundable {
processPayment(amount: number) {
console.log(`Memproses transfer bank sebesar Rp${amount}`);
}
refund(amount: number) {
console.log(`Mengembalikan dana Rp${amount} ke rekening bank`);
}
}
class EWallet implements Payment {
processPayment(amount: number) {
console.log(`Pembayaran melalui e-wallet sebesar Rp${amount}`);
}
}
const bca = new BankTransfer();
bca.processPayment(100000);
bca.refund(50000);
const ovo = new EWallet();
ovo.processPayment(75000);
Pada contoh ini, BankTransfer mengimplementasikan dua interface (Payment dan Refundable), sementara EWallet hanya satu (Payment). Pendekatan ini membuat sistem lebih fleksibel dan mudah dikembangkan ketika menambah metode pembayaran baru.
Keuntungan Menggunakan Interface dalam Class
Beberapa keuntungan utama menggunakan Interface TypeScript pada class, antara lain:
-
Konsistensi kode: Semua class yang mengimplementasikan interface akan memiliki struktur dan perilaku yang sama.
-
Fleksibilitas tinggi: Class dapat mengimplementasikan lebih dari satu interface sesuai kebutuhan.
-
Kemudahan pengujian: Dengan interface, pengujian unit menjadi lebih mudah karena dapat menggunakan mock object.
-
Skalabilitas sistem: Interface membantu mengorganisasi kode dalam proyek besar agar tetap mudah dikelola.
Kesimpulan
Konsep Interface TypeScript menjadi fondasi penting dalam menulis kode yang terstruktur, modular, dan mudah di-maintain. Melalui implements, kita dapat menghubungkan interface dengan class dan bahkan mengimplementasikan beberapa interface sekaligus. Dalam proyek nyata seperti sistem pembayaran atau manajemen pengguna, pendekatan ini memberikan fleksibilitas tinggi tanpa mengorbankan konsistensi.
Jika kamu sudah memahami penggunaan interface pada class, langkah berikutnya adalah mempelajari Generic Interface dan Generic Class untuk membuat kode yang lebih dinamis dan dapat digunakan ulang di berbagai konteks.