TypeScript - Interface Generik

Hai teman, bakal bintang pemrograman masa depan! Hari ini, kita akan mengemban perjalanan yang menarik ke dunia TypeScript dan mengexplore salah satu fitur paling kuatnya: Interface Generik. Jangan khawatir jika Anda baru saja memulai pemrograman - saya akan menjadi panduan ramah Anda, dan kita akan berjalan langkah demi langkah. Pada akhir pelajaran ini, Anda akan terpesona dengan betapa banyak yang Anda pelajari!

Apa Itu Interface Generik?

Sebelum kita mendalam interface generik, mari kita ingat kembali apa itu interface dalam TypeScript. Interface adalah seperti kontrak yang menentukan struktur objek. Ini memberitahu kita properti dan metode apa saja yang seharusnya dimiliki oleh objek.

Now, bayangkan jika kita bisa membuat interface ini lebih fleksibel, dapat bekerja dengan jenis data yang berbeda. Itu adalah tempat interface generik memasuki panggung! Mereka memungkinkan kita untuk membuat interface yang dapat menyesuaikan dengan berbagai jenis data, membuat kode kita lebih dapat digunakan kembali dan multifungsi.

Interface Generik Dasar

Mari kita mulai dengan contoh sederhana:

interface Box<T> {
contents: T;
}

let numberBox: Box<number> = { contents: 42 };
let stringBox: Box<string> = { contents: "Hello, TypeScript!" };

Dalam contoh ini, Box adalah interface generik. <T> adalah seperti placeholder untuk jenis yang kita akan tentukan kemudian. Kita dapat menggunakan interface ini untuk membuat kotak yang dapat memegang jenis item yang berbeda:

• numberBox adalah Box yang memegang angka.
• stringBox adalah Box yang memegang string.

Apakah itu menarik? Itu seperti memiliki kotak ajaib yang dapat menyesuaikan untuk memegang apa saja yang kita masukkan ke dalamnya!

Parameter Jenis Ganda

Interface generik dapat memiliki lebih dari satu parameter jenis. Mari kita lihat contoh:

interface Pair<T, U> {
first: T;
second: U;
}

let pair1: Pair<number, string> = { first: 1, second: "one" };
let pair2: Pair<boolean, Date> = { first: true, second: new Date() };

Di sini, Pair adalah interface generik dengan dua parameter jenis, T dan U. Hal ini memungkinkan kita untuk membuat pasangan item di mana setiap item dapat memiliki jenis yang berbeda. Itu seperti membuat pasangan dinamis dari dua jenis apa saja yang kita inginkan!

Interface Generik Dengan Metode

Interface juga dapat termasuk metode, dan metode ini dapat menggunakan jenis generik. Mari kita lihat contoh:

interface Reversible<T> {
data: T[];
reverse(): T[];
}

class NumberArray implements Reversible<number> {
constructor(public data: number[]) {}

reverse(): number[] {
return this.data.slice().reverse();
}
}

let numbers = new NumberArray([1, 2, 3, 4, 5]);
console.log(numbers.reverse()); // Output: [5, 4, 3, 2, 1]

Dalam contoh ini, Reversible adalah interface generik yang termasuk metode reverse(). Kelas NumberArray mengimplmentasikan interface ini untuk angka. Keindahan pendekatan ini adalah kita dapat mudah membuat kelas serupa untuk string, objek, atau jenis lainnya!

Interface Generik sebagai Tipe Fungsi

Sekarang, mari kita eksplor bagaimana kita dapat menggunakan interface generik untuk mendeskripsikan tipe fungsi. Ini adalah tempat hal-hal menjadi sangat menarik!

interface Transformer<T, U> {
(input: T): U;
}

let stringToNumber: Transformer<string, number> = (input) => parseInt(input);

console.log(stringToNumber("42")); // Output: 42

Dalam contoh ini, Transformer adalah interface generik yang mendeskripsikan fungsi. Itu menerima masukan jenis T dan mengembalikan nilai jenis U. Kita kemudian membuat fungsi stringToNumber yang mengubah string menjadi angka menggunakan interface ini.

Contoh Dunia Nyata: Data Processor

Mari kita lihat contoh yang lebih kompleks yang Anda mungkin temui dalam pemrograman dunia nyata:

interface DataProcessor<T, U> {
processItem(item: T): U;
processArray(items: T[]): U[];
}

class StringToNumberProcessor implements DataProcessor<string, number> {
processItem(item: string): number {
return parseInt(item);
}

processArray(items: string[]): number[] {
return items.map(item => this.processItem(item));
}
}

let processor = new StringToNumberProcessor();
console.log(processor.processItem("42"));          // Output: 42
console.log(processor.processArray(["1", "2", "3"])); // Output: [1, 2, 3]

Dalam contoh ini, kita mendefinisikan DataProcessor interface yang dapat memproses item tunggal atau array item. Kelas StringToNumberProcessor mengimplentasikan interface ini untuk mengkonversi string menjadi angka. Pola ini sangat berguna saat Anda memerlukan pemrosesan data dalam berbagai cara sambil menjaga keselamatan jenis.

Kesimpulan

Selamat! Anda telah mengambil langkah besar dalam perjalanan TypeScript Anda dengan belajar tentang interface generik. Alat kuat ini memungkinkan kita menulis kode fleksibel, yang dapat digunakan kembali dan cocok untuk jenis data yang berbeda. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini dalam proyek Anda sendiri.

Berikut adalah tabel referensi cepat dari metode yang kita bahas:

Metode	Deskripsi
interface Box<T>	Membuat interface generik untuk kotak yang dapat memegang jenis apa saja
interface Pair<T, U>	Membuat interface generik untuk pasangan item jenis berbeda
interface Reversible<T>	Membuat interface generik dengan metode untuk membalik array
interface Transformer<T, U>	Membuat interface generik untuk fungsi yang mengubah jenis
interface DataProcessor<T, U>	Membuat interface generik untuk memproses item tunggal atau array item

Terus coding, terus belajar, dan ingat - di dunia TypeScript, jenis generik adalah superpower Anda! ?‍♀️?‍♂️

Credits: Image by storyset