TypeScript - Generics: A Beginner's Guide

Hai teman-teman, bakal superstar pengoding! Hari ini, kita akan memulai perjalanan yang menarik ke dunia TypeScript Generics. Jangan khawatir jika Anda masih pemula di bidang programming - saya akan menjadi panduan ramah Anda, dan kita akan berjalan langkah demi langkah. Pada akhir panduan ini, Anda akan bisa menggunakan generics seperti seorang ahli!

Apa Itu Generics dan Mengapa Kita Harus Peduli?

Sebelum kita masuk ke detailnya, mari mulai dengan sebuah analogi sederhana. Bayangkan Anda punya sebuah kotak ajaib yang dapat menampung jenis item apapun. Kadang-kadang Anda masukkan buku, kadang-kadang mainan, atau bahkan sandwich. Itu adalah esensi dari generics di TypeScript - mereka memungkinkan kita untuk membuat kode yang fleksibel dan dapat digunakan kembali yang dapat bekerja dengan jenis data yang berbeda.

Contoh Masalah

mari lihat beberapa scenario di mana generics dapat menyelamatkan hari:

1. Anda ingin membuat sebuah fungsi yang dapat membalik jenis array apa pun (bilangan, string, objek).
2. Anda memerlukan sebuah kelas yang dapat menyimpan dan mengambil jenis data apa pun.
3. Anda sedang membuat sebuah fungsi utilitas yang harus bekerja dengan jenis data yang berbeda.

Tanpa generics, Anda akan harus menulis fungsi atau kelas terpisah untuk setiap jenis data. Itu adalah banyak repetisi, dan seperti yang diketahui oleh setiap programmer yang baik, repetisi adalah musuh dari kode yang bersih!

TypeScript Generics untuk Menyelamatkan Hari!

Sekarang, mari kita lipat lengan dan lihat bagaimana generics bekerja dalam praktek.

Fungsi Generic Dasar

Ini adalah sebuah fungsi generic sederhana yang dapat bekerja dengan jenis apa pun:

function identity<T>(arg: T): T {
return arg;
}

mariuraikan ini:

• <T> adalah parameter jenis kami. Itu seperti placeholder untuk jenis yang kita akan gunakan.
• (arg: T) berarti fungsi kita menerima argumen jenis T.
• : T setelah tanda kurung berarti fungsi kita akan mengembalikan nilai jenis T.

Kita dapat menggunakan fungsi ini seperti ini:

let output1 = identity<string>("Hello, Generics!");
let output2 = identity<number>(42);

console.log(output1); // "Hello, Generics!"
console.log(output2); // 42

Keren, kan? Fungsi yang sama bekerja dengan jenis yang berbeda!

Interface Generic

Kita juga dapat menggunakan generics dengan interface. Ini adalah sebuah contoh:

interface GenericBox<T> {
contents: T;
}

let stringBox: GenericBox<string> = { contents: "A secret message" };
let numberBox: GenericBox<number> = { contents: 123 };

console.log(stringBox.contents); // "A secret message"
console.log(numberBox.contents); // 123

GenericBox kita dapat menampung jenis konten apa pun. Itu seperti kotak ajaib yang kita bicarakan sebelumnya!

Kelas Generic

mari buat sebuah kelas generic yang dapat bekerja sebagai penyimpanan data sederhana:

class DataStore<T> {
private data: T[] = [];

addItem(item: T): void {
this.data.push(item);
}

getItems(): T[] {
return this.data;
}
}

let stringStore = new DataStore<string>();
stringStore.addItem("Hello");
stringStore.addItem("World");
console.log(stringStore.getItems()); // ["Hello", "World"]

let numberStore = new DataStore<number>();
numberStore.addItem(1);
numberStore.addItem(2);
console.log(numberStore.getItems()); // [1, 2]

Kelas DataStore ini dapat menyimpan dan mengambil jenis data apa pun. Sangat praktis, kan?

Batasan Generic

kadang-kadang, kita ingin membatasi jenis yang dapat digunakan dengan generics. Kita dapat melakukan ini dengan batasan:

interface Lengthy {
length: number;
}

function logLength<T extends Lengthy>(arg: T): void {
console.log(arg.length);
}

logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10 }); // 10
// logLength(123); // Error: Number doesn't have a length property

Di sini, fungsi logLength kita hanya dapat bekerja dengan jenis yang memiliki properti length.

Manfaat Generics

Sekarang kita telah melihat generics dalam aksi, mari rangkum manfaatnya:

1. Kode Reusability: Tulis sekali, gunakan dengan banyak jenis.
2. Type Safety: Tangkap kesalahan yang berhubungan dengan jenis pada waktu kompilasi.
3. Fleksibilitas: Buat komponen yang dapat bekerja dengan jenis data yang beragam.
4. Klaritas: Buat hubungan antara masukan dan keluaran jelas.

Tabel Metode Generic

Ini adalah tabel praktis dari beberapa metode generic yang Anda mungkin temui:

Metode	Deskripsi	Contoh
Array.map<U>()	Transformasi elemen array	[1, 2, 3].map<string>(n => n.toString())
Promise.all<T>()	Tunggu semua promise selesai	Promise.all<number>([Promise.resolve(1), Promise.resolve(2)])
Object.keys<T>()	Dapatkan kunci objek sebagai array	Object.keys<{name: string}>({name: "Alice"})
JSON.parse<T>()	Parse string JSON ke objek	JSON.parse<{age: number}>('{"age": 30}')

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia yang menakjubkan TypeScript Generics. Ingat, seperti segala alat yang kuat, generics mungkin terasa sulit pada awalnya, tapi dengan latihan, mereka akan menjadi kebiasaan.

Saat Anda terus melanjutkan perjalanan coding Anda, Anda akan menemukan bahwa generics adalah seperti pisau瑞士 Army knife di kotak alat TypeScript Anda - multifungsi, kuat, dan sangat berguna. Jadi, maju dan kodings, young padawan, dan biarkan generics menyertainya!

Happy coding, dan sampaijumpa lagi, terus menjelajah dan belajar!

Credits: Image by storyset