TypeScript - Mengembangkan Antarmuka

Hai, 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 menciptakan antarmuka yang kuat dan fleksibel seperti seorang pro. Jadi, ambil minuman favorit Anda, rias kenyang, dan mari kita mulai perjalanan kita!

Sintaks

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

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 Antarmuka Tunggal

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

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

Sekarang, katakanlah kita ingin membuat jenis makhluk khusus - seekor naga! Kita dapat mengembangkan antarmuka Creature untuk menciptakan 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.

Lihatlah 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 Beberapa Antarmuka

Apa bila naga kita tidak hanya seekor makhluk, tetapi juga seorang penjaga harta? Dalam TypeScript, kita dapat mengembangkan beberapa 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 seekor makhluk yang dapat meniup api dan menyimpan harta. Menarik, 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 kembali antarmuka 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 menciptakan antarmuka baru dengan menggabungkan antarmuka yang sudah ada menggunakan tipe 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

Saat mengembangkan antarmuka, Anda dapat menimpa properti dan metode dari antarmuka induk. Ini berguna saat Anda ingin lebih spesifik tentang properti atau metode dalam 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 menimpa metode makeSound agar mengembalikan string bukan void.

Berikut adalah tabel yang menggabungkan metode yang kita pelajari:

Metode	Deskripsi
Mengembangkan Antarmuka Tunggal	Gunakan kata kunci extends untuk mewarisi dari satu antarmuka
Mengembangkan Beberapa Antarmuka	Gunakan extends dengan antarmuka yang dipisahkan oleh koma
Menambahkan Properti ke Antarmuka Yang Ada	Deklarasikan kembali antarmuka dengan properti baru
Membuat Antarmuka Komposit	Gunakan tipe silang (&) untuk menggabungkan antarmuka
Menimpa Properti dan Metode	Redefinisikan properti atau metode dalam antarmuka anak

Dan begitulah, teman-teman! Anda telah meningkatkan keterampilan TypeScript Anda dengan memahami ekstensi antarmuka. Ingat, antarmuka adalah seperti blok LEGO - Anda dapat menggabungkannya dalam banyak cara untuk membangun struktur yang komplex dan aman dalam kode Anda.

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

Credits: Image by storyset