Selamat datang pada pembahasan Typescript! Hari ini, kita akan mempelajari generik, sebuah feature di Typescript yang powerful yang memungkinkan kita untuk membuat kemponen yang dapat digunakan kembali. Generik memberikan sebuah cara untuk membuat komponen-komponen yang berkerja dengan banyak tipe data dan memberikan kemanan tipe pada saat yang bersamaan.
1. Perkenalan Generik
Generik memungkinkan kita untuk menulis fungsi, kelas dan interface yang fleksibel dan dapat digunakan berulang-ulang. Generik memungkinkan kita membuat komponen-komponen yang dapat bekerja dengan banyak tipe data tanpa kehilangan informasi tipenya.
Fungsi Generik Dasar
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("myString");
let output2 = identity<number>(42);
Pada contoh ini, T adalah tipe parameter yang bertindak sebagai sebuah placeholder untuk tipe yang asli. Ketika fungsinya dipanggil, tipe parameternya telah diganti dengan tipe yang diberikan.
2. Fungsi Generik
Kita dapat membuat fungsi generik yang bekerja dengan banyak tipe data. Ini berguna khususnya untuk fungsi yang bekerja dengan array atau koleksi.
Contoh: Fungsi Generik
function loggingIdentity<T>(arg: T[]): T[] {
console.log(arg.length);
return arg;
}
let stringArray = loggingIdentity<string>(["Alice", "Bob", "Charlie"]);
Disini, fungsi loggingIdentity bekerja dengan sebuah array dari semua tipe T. Tipe array ditentukan ketika fungsinya dipanggil.
3. Kelas Generik
Generik dapat digunakan untuk membuat kelas yang bekerja dengan berbagai tipe. Ini berguna untuk struktur data seperti stacks, queues atau linked lists.
Contoh: Kelas Generik
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
constructor(zeroValue: T, addFunction: (x: T, y: T) => T) {
this.zeroValue = zeroValue;
this.add = addFunction;
}
}
let myNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myNumber.add(5, 10));
let myString = new GenericNumber<string>("", (x, y) => x + y);
console.log(myString.add("Hello, ", "world!"));
Pada contoh ini, kelas GenericNumber bekerja dengan berbagai tipe T. Tipenya dispesifikasikan ketika sebuah instance dari kelas dibuat.
4. Constraints Generik
Terkadang, kita perlu untuk membatasi tipe-tipe yang dapat digunakan dengan generik. Kita dapat mencapainya dengan constraints.
Contoh: Constraints Generik
interface Lengthwise {
length: number;
}
function loggingIdentityWithConstraint<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
loggingIdentityWithConstraint({ length: 10, value: 42 });
Disini, tipe generic T telah dibatasi untuk tipe-tipe yang memiliki properti length.
5. Menggunakan Beberapa Parameter Tipe
Generik dapat juga menggunakan beberapa parameter tipe untuk membuat tipe-tipe yang lebih fleksibel dan kompleks.
Contoh: Beberapa Parameter Tipe
function merge<T, U>(obj1: T, obj2: U): T & U {
return { ...obj1, ...obj2 };
}
let mergedObject = merge({ name: "Alice" }, { age: 25 });
console.log(mergedObject);
Pada contoh ini, fungsi merge menerima 2 tipe objek yang berbeda dan menggabungkannya menjadi satu.
6. Interfaces Generik
Interfaces dapat juga menggunakan generics untuk membuat kontrak untuk fungsi, kelas dan objek yang fleksibel dan dapat digunakan kembali.
Contoh: Interfaces Generik
interface KeyValuePair<K, V> {
key: K;
value: V;
}
let kvp: KeyValuePair<string, number> = { key: "age", value: 30 };
console.log(kvp);
Disini, interface keyValuePair menerima dua parameter, K dan V, membuat sebuah generik interface.
7. Parameter Tipe Bawaan
Kita dapat memberikan tipe bawaan untuk generik kit, membuat opsi generik ketika memanggil fungsi atau membuat sebuah instance dari sebuah kelas.
Contoh: Parameter Tipe Bawaan
function createArray<T = string>(length: number, value: T): T[] {
return Array(length).fill(value);
}
let stringArray = createArray(3, "hello");
let numberArray = createArray<number>(3, 42);
console.log(stringArray);
console.log(numberArray);
Pada contoh ini, jika tipe tidak diberikan, maka type string bawaan akan digunakan.
8. Constraints dan keyof Generik
Menggunakan typeof dengan generik memungkinkan kita untuk membuat fungsi yang beroperasi pada properti-properti objek yang spesifik.
Contoh: Constraints dan keyof Generik
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
let person = { name: "Alice", age: 25 };
let name = getProperty(person, "name");
let age = getProperty(person, "age");
Disini, fungsi getProperty menerima sebuah object T dan key K yang harus menjadi sebuah key dari T. Ini memastikan keamanan tipe.
Contoh Kode
Disini sebuah contoh yang mencontohkan penggunaan dari generik pada fungsi, kelas dan interface:
function reverseArray<T>(items: T[]): T[] {
return items.reverse();
}
let reversedNumbers = reverseArray([1, 2, 3, 4, 5]);
console.log(reversedNumbers);
class DataStorage<T> {
private data: T[] = [];
addItem(item: T) {
this.data.push(item);
}
removeItem(item: T) {
this.data = this.data.filter(i => i !== item);
}
getItems(): T[] {
return [...this.data];
}
}
let textStorage = new DataStorage<string>();
textStorage.addItem("Alice");
textStorage.addItem("Bob");
textStorage.removeItem("Alice");
console.log(textStorage.getItems());
interface Pair<T, U> {
first: T;
second: U;
}
let pair: Pair<string, number> = { first: "Alice", second: 25 };
console.log(pair);
Rangkuman
Hari ini, kita telah mempelajari generics pada Typescript, membahas fungsi, kelas, constraint, multiple parameter tipe, interface, parameter tipe bawaan, dan operator keyof generik.
Generik adalah sebuah fitur yang powerfull yang memungkinkan kita membuat komponen yang fleksibel, dapat digunakan kembali dan sebagai keamanan tipe.
Sumber
