TypeScript - Jenis Umum: Panduan untuk Pemula

Hai sana, bakat coding masa depan! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia Jenis Umum TypeScript. Jangan khawatir jika anda baru dalam programming - saya akan menjadi panduannya yang ramah, dan kita akan mengambil langkah demi langkah. Pada akhir panduan ini, anda akan mengguna Jenis Umum seperti seorang pro!

Apa Itu Jenis Umum dan Mengapa Kita Harus Peduli?

Sebelum kita masuk ke detilnya, mari kita mulai dengan analogi mudah. Bayangkan anda ada sebuah kotak ajaib yang dapat menempatkan jenis item apa pun. Kadang-kadang anda masukkan buku, kadang-kadang mainan, atau bahkan sandwich. Itu adalah esensi Jenis Umum dalam TypeScript - mereka membolehkan kita untuk membuat kode yang fleksibel dan boleh digunakan semula yang dapat bekerja dengan jenis yang berbeza.

Contoh Masalah

Mari kita lihat beberapa senario di mana Jenis Umum dapat menyelamatkan hari:

1. Anda mahu membuat fungsi yang dapat membalik jenis array apa pun (bilangan, string, objek).
2. Anda perlukan kelas yang dapat menyimpan dan mengambil jenis data apa pun.
3. Anda sedang membina fungsi utiliti yang harus bekerja dengan jenis data berbeza.

Tanpa Jenis Umum, anda akan perlu menulis fungsi atau kelas terpisah untuk setiap jenis data. Itu adalah banyak pengulangan, dan seperti mana yang diketahui oleh sebarang pemrogram yang baik, pengulangan adalah musuh utama kode bersih!

Jenis Umum TypeScript menyelamatkan hari!

Sekarang, mari kita roll up our sleeves dan lihat bagaimana Jenis Umum bekerja dalam tindakan.

Fungsi Jenis Umum Asas

Ini adalah fungsi Jenis Umum mudah yang dapat bekerja dengan jenis apa pun:

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

mari kita pecahkan ini:

• <T> adalah parameter jenis kita. Itu seperti placeholder untuk jenis yang kita akan gunakan.
• (arg: T) berarti fungsi kita mengambil 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

Menarik, kan? Fungsi yang sama bekerja dengan jenis yang berbeza!

Antara Muka Jenis Umum

Kita juga dapat menggunakan Jenis Umum dengan antara muka. Ini adalah 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 menempatkan jenis konten apa pun. Itu seperti kotak ajaib yang kita bicarakan sebelumnya!

Kelas Jenis Umum

Mari kita buat kelas Jenis Umum yang dapat bekerja sebagai penimbunan 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 berguna, kan?

Batasan Jenis Umum

Kadang-kadang, kita mahu membatasi jenis yang dapat digunakan dengan Jenis Umum kita. 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 Jenis Umum

Sekarang kita telah melihat Jenis Umum dalam tindakan, mari kita ringkaskan manfaatnya:

1. Kode Reusability: Tulis sekali, gunakan dengan banyak jenis.
2. Type Safety: Tangkap kesalahan yang berkaitan dengan jenis pada masa kompilasi.
3. Fleksibiliti: Buat komponen yang dapat bekerja dengan jenis data yang beragam.
4. Klariti: Buat hubungan antara input dan output jelas.

Tabel Metode Jenis Umum

Ini adalah tabel praktis dari beberapa metode Jenis Umum yang anda mungkinjumpai:

Metode	Deskripsi	Contoh
Array.map<U>()	Transformasi elemen array	[1, 2, 3].map<string>(n => n.toString())
Promise.all<T>()	Menunggu semua promise selesai	Promise.all<number>([Promise.resolve(1), Promise.resolve(2)])
Object.keys<T>()	Mendapatkan 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 telah mengambil langkah pertama ke dalam dunia menarik Jenis Umum TypeScript. Ingat, seperti mana alat yang kuat, Jenis Umum mungkin merasa agak sulit pada awalnya, tapi dengan latihan, mereka akan menjadi kebiasaan.

Sekiranya anda terus menjalankan perjalanan coding anda, anda akan menemui bahwa Jenis Umum adalah seperti pisau Switzerland di dalam kotak alat TypeScript anda - fleksibel, kuat, dan sangat berguna. Jadi, teruslah menulis kode, bakat muda, dan maya Jenis Umum menyertainya!

Happy coding, dan sampai jumpa lagi, terus menjelajah dan belajar!

Credits: Image by storyset