TypeScript - Generic Interfaces

Hai there, bakat coding masa depan! Hari ini, kita bakal embark dalam perjalanan yang menarik ke dunia TypeScript dan jelajahi salah satu fitur yang paling kuat: Interfaces Generik. Jangan khawatir jika anda baru saja memulai programming - saya bakal menjadi panduannya yang ramah, dan kita bakal mengambil ini langkah demi langkah. Pada akhir pelajaran ini, anda akan terkejut betapa banyak yang anda pelajari!

Apa Itu Interfaces Generik?

Sebelum kita masuk ke dalam interfaces generik, mari kita ingat kembali apa itu interfaces di TypeScript. Sebuah interface adalah seperti kontrak yang menentukan struktur dari sebuah objek. Ini memberitahu kita properti dan metode apa saja yang seharusnya dimiliki oleh objek.

Sekarang, bayangkan jika kita bisa membuat interfaces ini lebih fleksibel, dapat bekerja dengan jenis data yang berbeda. Itu adalah tempat interfaces generik datang! Mereka memungkinkan kita untuk membuat interfaces 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 menahan jenis item yang berbeda:

• numberBox adalah Box yang menahan bilangan.
• stringBox adalah Box yang menahan string.

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

Banyak Parameter Jenis

Interfaces 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. Ini memungkinkan kita untuk membuat pasangan item di mana setiap item dapat memiliki jenis yang berbeda. Itu seperti membuat duet dinamis dari jenis mana saja kita inginkan!

Interfaces Generik Dengan Metode

Interfaces juga dapat mencakup 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 mencakup metode reverse(). Kelas NumberArray mengimplmentasikan interface ini untuk bilangan. Keindahan pendekatan ini adalah kita dapat mudah membuat kelas yang serupa untuk string, objek, atau jenis lainnya!

Interface Generik Sebagai Tipe Fungsi

Sekarang, mari kita jelajahi bagaimana kita dapat menggunakan interfaces 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 input jenis T dan mengembalikan nilai jenis U. Kita kemudian membuat fungsi stringToNumber yang mentransformasi string menjadi bilangan menggunakan interface ini.

Contoh Dunia Nyata: Data Processor

Mari kita lihat contoh yang lebih kompleks yang mungkin anda 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 bilangan. Pola ini sangat berguna saat Anda perlu memproses data dalam berbagai cara sambil menjaga keamanan tipe.

Kesimpulan

Selamat! Anda telah mengambil langkah besar dalam perjalanan TypeScript Anda dengan belajar tentang interfaces generik. Tools ini sangat kuat memungkinkan kita menulis kode fleksibel, yang dapat digunakan kembali dan dapat bekerja dengan jenis data yang berbeda. Ingat, latihan membuat sempurna, jadi jangan takut untuk mengembangkan konsep ini dalam proyek Anda sendiri.

Berikut adalah tabel rujukan cepat metode yang kita telah covered:

Method	Description
interface Box<T>	Membuat interface generik untuk kotak yang dapat menahan 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 mentransformasi jenis satu ke jenis lain
interface DataProcessor<T, U>	Membuat interface generik untuk memproses item tunggal atau array item

Tetap coding, tetap belajar, dan ingat - di dunia TypeScript, jenis generik adalah superpowermu! ?‍♀️?‍♂️

Credits: Image by storyset