TypeScript - Mengembangkan Antarmuka

Hai, para bintang coding masa depan! Hari ini, kita akan masuk ke dunia menarik TypeScript dan belajar bagaimana mengembangkan antarmuka-nya. Pada akhir pelajaran ini, Anda akan membuat antarmuka yang kuat dan fleksibel seperti seorang ahli. Jadi, ambil minuman kesukaan Anda, rajin duduk, dan mari kita mulai perjalanan kita!

Sintaks

Sebelum kita masuk ke hal-hal yang detail, mari kita mulai dari dasar. Dalam TypeScript, mengembangkan antarmuka adalah hal yang mudah dengan menggunakan kata kunci extends. Berikut adalah sintaks umumnya:

interface ChildInterface extends ParentInterface {
// Properti atau metode tambahan
}

Pertimbangkan hal ini seperti pewarisan dalam keluarga kerajaan. Antarmuka anak "mewarisi" semua properti dan metode dari antarmuka induk, dan juga dapat menambahkan fitur uniknya sendiri.

Mengembangkan Satu Antarmuka

Mari kita mulai dengan contoh sederhana. Bayangkan kita membuat permainan tentang makhluk-makhluk magis. Kita akan mulai dengan antarmuka dasar Creature:

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

Sekarang, katakanlah kita ingin membuat jenis khusus makhluk - seekor naga! Kita dapat mengembangkan antarmuka Creature untuk membuat antarmuka Dragon:

interface Dragon extends Creature {
breatheFire: () => void;
wingspan: number;
}

Dalam contoh ini, Dragon mewarisi properti name dan age dari Creature, dan menambahkan metode breatheFire serta properti wingspan.

Lihat bagaimana kita dapat menggunakannya:

const smaug: Dragon = {
name: "Smaug",
age: 1000,
wingspan: 200,
breatheFire: () => console.log("Roar! ?")
};

console.log(smaug.name);  // Output: Smaug
smaug.breatheFire();  // Output: Roar! ?

Seperti yang Anda lihat, smaug memiliki semua properti dari Creature, ditambah fitur khusus naga.

Mengembangkan Banyak Antarmuka

Apa bila naga kita tidak hanya seekor makhluk, tapi juga seorang penjaga harta? Dalam TypeScript, kita dapat mengembangkan banyak antarmuka! Mari kita buat antarmuka TreasureKeeper dan kembangkan keduanya:

interface TreasureKeeper {
treasureCount: number;
addTreasure: (item: string) => void;
}

interface DragonLord extends Creature, TreasureKeeper {
breatheFire: () => void;
wingspan: number;
}

Sekarang DragonLord adalah makhluk yang dapat bernafas api dan menjaga harta. Keren, kan?

const falkor: DragonLord = {
name: "Falkor",
age: 500,
wingspan: 150,
treasureCount: 1000,
breatheFire: () => console.log("Whoosh! ?"),
addTreasure: (item) => console.log(`Added ${item} to the hoard!`)
};

falkor.addTreasure("Golden Crown");  // Output: Added Golden Crown to the hoard!

Menambahkan Properti ke Antarmuka Yang Ada

kadang-kadang, Anda mungkin ingin menambahkan properti ke antarmuka yang sudah ada. TypeScript memungkinkan Anda melakukan ini dengan mendeklarasikan antarmuka lagi dengan properti baru:

interface Creature {
species: string;
}

const unicorn: Creature = {
name: "Sparkles",
age: 100,
species: "Unicorn"
};

Sekarang Creature memiliki properti name, age, dan species. Teknik ini disebut "penggabungan deklarasi".

Membuat Antarmuka Komposit

Anda juga dapat membuat antarmuka baru dengan mengkombinasikan antarmuka yang sudah ada menggunakan jenis silang:

interface Flyer {
fly: () => void;
}

interface Swimmer {
swim: () => void;
}

type FlyingFish = Flyer & Swimmer;

const nemo: FlyingFish = {
fly: () => console.log("I'm flying! ?✈️"),
swim: () => console.log("Just keep swimming! ?‍♂️")
};

nemo.fly();  // Output: I'm flying! ?✈️
nemo.swim();  // Output: Just keep swimming! ?‍♂️

Menimpa Properti dan Metode

Dalam mengembangkan antarmuka, Anda dapat menimpa properti dan metode dari antarmuka induk. Ini berguna saat Anda ingin lebih spesifik tentang properti atau metode di antarmuka anak:

interface Animal {
makeSound: () => void;
}

interface Cat extends Animal {
makeSound: () => string;  // Tipe kembalian yang lebih spesifik
}

const kitty: Cat = {
makeSound: () => "Meow!"
};

console.log(kitty.makeSound());  // Output: Meow!

Dalam contoh ini, kita telah menimpa metode makeSound agar mengembalikan string bukan void.

Berikut adalah tabel yang menggabungkan metode yang kita pelajari:

Metode	Deskripsi
Mengembangkan Satu Antarmuka	Gunakan kata kunci extends untuk mewarisi dari satu antarmuka
Mengembangkan Banyak Antarmuka	Gunakan extends dengan antarmuka yang dipisahkan oleh koma
Menambahkan Properti ke Antarmuka Yang Ada	Deklarasikan antarmuka lagi dengan properti baru
Membuat Antarmuka Komposit	Gunakan jenis silang (&) untuk mengkombinasikan antarmuka
Menimpa Properti dan Metode	Redefinisikan properti atau metode di antarmuka anak

Dan begitu juga, teman-teman! Anda telah meningkatkan keterampilan TypeScript Anda dengan memahami pengembangan antarmuka. Ingat, antarmuka adalah seperti blok LEGO - Anda dapat mengkombinasikan mereka dalam banyak cara untuk membangun struktur yang komplex dan aman dalam kode Anda.

Sebagai Anda terus melanjutkan perjalanan coding Anda, Anda akan menemukan bahwa teknik ini akan membantu Anda membuat kode yang lebih fleksibel, dapat dipakai kembali, dan mudah dipelihara. Jadi, maju dan gunakan antarmuka dengan kepercayaan! Selamat coding! ??‍??‍?

Credits: Image by storyset