TypeScript - Antarmuka: Panduan Ramah untuk Pemula

Hai sana, super bintang coding masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari TypeScript antarmuka. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan menjadi panduan andalan Anda dalam perjalanan yang menarik ini. Jadi, ambil secangkir minuman kesukaan Anda, dan mari kita mulai!

Apa Itu Antarmuka?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu antarmuka. Pikirkan antarmuka sebagai kontrak atau rancangan. Mereka menentukan struktur objek, mengatakan kepada kita properti dan metode apa yang harus dimiliki oleh objek itu. Itu seperti resep yang mencantumkan semua bahan yang Anda butuhkan untuk membuat kue yang lezat!

Mendeklarasikan Antarmuka

Mari kita mulai dengan dasar mendeklarasikan antarmuka. Ini adalah contoh sederhana:

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

Dalam contoh ini, kita menciptakan antarmuka yang disebut Person. Itu mengatakan bahwa setiap objek jenis Person harus memiliki dua properti: name (yang adalah string) dan age (yang adalah number).

Sekarang, mari kita gunakan antarmuka ini:

let john: Person = {
name: "John Doe",
age: 30
};

console.log(john.name); // Output: John Doe

Di sini, kita menciptakan objek john yang mengikuti antarmuka Person. TypeScript akan memastikan bahwa john memiliki properti name dan age, dengan jenis yang benar.

Properti Opsional

kadang-kadang, Anda mungkin ingin beberapa properti menjadi opsional. Kita dapat melakukan ini menggunakan simbol ?:

interface Car {
make: string;
model: string;
year?: number;
}

let myCar: Car = {
make: "Toyota",
model: "Corolla"
};

// Ini juga valid
let yourCar: Car = {
make: "Honda",
model: "Civic",
year: 2022
};

Dalam contoh ini, year adalah opsional. Anda dapat memasukkannya atau meninggalkannya - keduanya valid!

Tipe Union dan Antarmuka

kadang-kadang, properti mungkin menerima lebih dari satu jenis. Ini adalah tempat tipe union berguna. Mari kita lihat contoh:

interface Pet {
name: string;
age: number | string;
}

let myDog: Pet = {
name: "Buddy",
age: 5
};

let myCat: Pet = {
name: "Whiskers",
age: "3 years"
};

Dalam kasus ini, age dapat berupa number atau string. Ini memberikan kita fleksibilitas dalam merepresentasikan umur hewan.

Antarmuka dan Array

Antarmuka juga dapat menjelaskan array. Ini adalah cara:

interface StringArray {
[index: number]: string;
}

let myArray: StringArray = ["Apple", "Banana", "Cherry"];
console.log(myArray[1]); // Output: Banana

Antarmuka ini mengatakan bahwa saat Anda mengakses indeks mana pun (yang adalah number) dari array ini, Anda akan mendapatkan string.

Kita juga dapat menggunakan antarmuka untuk menjelaskan struktur array yang lebih kompleks:

interface Inventory {
[index: number]: {
name: string;
quantity: number;
};
}

let shopInventory: Inventory = [
{ name: "T-shirt", quantity: 20 },
{ name: "Jeans", quantity: 15 }
];

console.log(shopInventory[0].name); // Output: T-shirt

Antarmuka Inventory menjelaskan array di mana setiap elemen adalah objek dengan properti name dan quantity.

Antarmuka dan Pewarisan

Seperti dalam kehidupan nyata, antarmuka dapat mewarisi dari antarmuka lain. Ini sangat berguna saat Anda ingin membuat versi yang lebih spesifik dari antarmuka yang sudah ada. Mari kita lihat contoh:

interface Animal {
name: string;
}

interface Dog extends Animal {
breed: string;
}

let myPuppy: Dog = {
name: "Max",
breed: "Labrador"
};

console.log(`${myPuppy.name} is a ${myPuppy.breed}`);
// Output: Max is a Labrador

Di sini, antarmuka Dog mewarisi dari antarmuka Animal dan menambah properti breed sendiri.

Anda bahkan dapat mewarisi lebih dari satu antarmuka:

interface Swimmer {
swim(): void;
}

interface Flyer {
fly(): void;
}

interface Duck extends Animal, Swimmer, Flyer {
quack(): void;
}

let myDuck: Duck = {
name: "Donald",
swim: () => console.log("Swimming..."),
fly: () => console.log("Flying..."),
quack: () => console.log("Quack!")
};

myDuck.quack(); // Output: Quack!

Dalam contoh ini, antarmuka Duck mewarisi dari Animal, Swimmer, dan Flyer, dan menambah metode quack sendiri.

Menutup

Selamat! Anda telah mengambil langkah pertama ke dalam dunia antarmuka TypeScript. Ingat, antarmuka adalah seperti penjaga ramah yang membantu memastikan objek Anda memiliki struktur yang benar. Mereka sangat berguna untuk membuat kode yang bersih, dapat dimengerti, dan mudah dipelihara.

Berikut ini adalah ringkasan metode yang kita pelajari:

Metode	Deskripsi
Mendeklarasikan Antarmuka	Tentukan struktur objek
Properti Opsional	Buat beberapa properti opsional menggunakan ?
Tipe Union	Izinkan properti menerima lebih dari satu jenis
Antarmuka Array	Jelaskan struktur array
Pewarisan Antarmuka	Buat antarmuka yang lebih spesifik berdasarkan antarmuka yang sudah ada

Terus latihan, dan segera Anda akan membuat antarmuka seperti seorang ahli! Ingat, di dunia coding, setiap ahli pernah menjadi pemula. Jadi jangan takut untuk mencoba dan membuat kesalahan - itu adalah cara kita belajar dan berkembang. Selamat coding!

Credits: Image by storyset