TypeScript - Antara Muka: Panduan Menyenangkan untuk Pemula

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

Apa Itu Antara Muka?

Sebelum kita masuk ke detailnya, mari kita mengerti apa itu antara muka. Picturkan antara muka sebagai kontrak atau rancangan. Mereka menentukan struktur objek, memberitahu kita properti dan metode apa yang seharusnya dimiliki oleh objek itu. Itu seperti resep yang mencantumkan semua bahan yang Anda butuhkan untuk membuat kue enak!

Mendeklarasikan Antara Muka

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

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

Dalam contoh ini, kita telah membuat antara muka yang disebut Person. Itu mengatakan bahwa setiap objek bertipe Person harus memiliki dua properti: name (yang adalah string) dan age (yang adalah number).

Sekarang, mari kita gunakan antara muka ini:

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

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

Di sini, kita telah membuat objek john yang mengikuti antara muka Person. TypeScript akan memastikan bahwa john memiliki properti name dan age, dengan tipe yang benar.

Properti Opsional

kadang-kadang, Anda mungkin ingin membuat 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 Antara Muka

kadang-kadang, properti mungkin menerima lebih dari satu tipe. 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 lebih dalam merepresentasikan umur hewan.

Antara Muka dan Array

Antara muka juga dapat menjelaskan array. Ini adalah cara:

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

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

Antara muka ini mengatakan bahwa saat Anda mengakses indeks apa pun (yang adalah number) dari array ini, Anda akan mendapat string.

Kita juga dapat menggunakan antara muka 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

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

Antara Muka dan Pewarisan

Seperti dalam kehidupan nyata, antara muka dapat mewarisi dari antara muka lain. Ini berguna ketika Anda ingin membuat versi yang lebih spesifik dari antara muka yang 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, antara muka Dog mewarisi dari antara muka Animal dan menambahkan properti breednya sendiri.

Anda bahkan dapat mewarisi dari beberapa antara muka:

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, antara muka Duck mewarisi dari Animal, Swimmer, dan Flyer, dan menambahkan metode quacknya sendiri.

Menutup

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

Berikut adalah ringkasan metode yang kita bahas:

Metode	Deskripsi
Mendeklarasikan Antara Muka	Tentukan struktur objek
Properti Opsional	Buat beberapa properti opsional menggunakan ?
Tipe Union	Izinkan properti menerima beberapa tipe
Antara Muka Array	Jelaskan struktur array
Pewarisan Antara Muka	Buat antara muka yang lebih spesifik berdasarkan antara muka yang ada

Lanjutkan berlatih, dan segera Anda akan menjadi ahli membuat antara muka! Ingat, dalam dunia coding, setiap ahli pernah menjadi pemula. Jadi jangan takut untuk mencoba dan membuat kesalahan - itu adalah bagaimana kita belajar dan tumbuh. Selamat coding!

Credits: Image by storyset