Mga Generics sa TypeScript

Ipinaliliwanag ng artikulong ito ang tungkol sa mga generics sa TypeScript.

YouTube Video

Mga Generics sa TypeScript

Ang mga generics sa TypeScript ay isang tampok na nagbibigay-daan sa iyo na magdeklara ng reusable at type-safe na mga function, klase, at interface sa pamamagitan ng pag-parameterize ng mga uri (types). Sa paggamit ng mga generics, maaari kang magsulat ng kodigo na hindi umaasa sa tiyak na mga uri (types), kaya mo rin maisagawa ang parehong operasyon sa iba't ibang uri.

Panimulang Kaalaman sa Mga Generics

Ang mga generics ay gumagana bilang mga template na tumatanggap ng mga uri (types) bilang argumento, kaya maaaring humawak ng iba't ibang uri ang mga function at klase.

Mga Generic na Function

Ang sumusunod ay halimbawa ng function na may mga argumento na tinukoy gamit ang generics.

1function identity<T>(value: T): T {
2    return value;
3}
4
5console.log(identity<number>(42));       // 42
6console.log(identity<string>("Hello"));  // Hello

• Ang T ay generic type argument na kumakatawan sa mga uri ng argumento at return value ng function. Ang aktuwal na uri ay tinutukoy kapag tinawag na ang function.
• Sa tahasang pagtukoy ng <number> o <string>, tinutukoy mo ang uri ng datos.

Gumagana ang generic na uri kahit walang tahasang pagtukoy dahil ang TypeScript ay gumagawa ng type inference.

1function identity<T>(value: T): T {
2    return value;
3}
4
5console.log(identity(42));       // 42
6console.log(identity("Hello"));  // Hello

Mga Limitasyon (Constraints) sa Generics

Sa paglalagay ng mga limitasyon sa generics, maaari mong higpitan ang pagtanggap ng espesipikong mga uri lamang.

1function loggingIdentity<T extends { length: number }>(arg: T): T {
2    console.log(arg.length);
3    return arg;
4}
5
6loggingIdentity("Hello");  // 5
7loggingIdentity([1, 2, 3]);  // 3
8
9// loggingIdentity(42);  // Error: number does not have a length property.

• Ang pagtukoy ng T extends { length: number } ay nangangahulugang ang T ay dapat na uri na may length na ari-arian. Dahil dito, ang mga uri na walang length na ari-arian ay hindi tatanggapin.

Mga Generic na Klase

Maaaring magdeklara ng mga klase gamit ang generics. Nagbibigay ang mga generic na klase ng flexible na mga uri para sa properties at methods.

 1class Box<T> {
 2    private _value: T;
 3
 4    constructor(value: T) {
 5        this._value = value;
 6    }
 7
 8    public getValue(): T {
 9        return this._value;
10    }
11
12    public setValue(value: T): void {
13        this._value = value;
14    }
15}
16
17const numberBox = new Box<number>(100);
18console.log(numberBox.getValue());  // 100
19
20const stringBox = new Box<string>("Hello");
21console.log(stringBox.getValue());  // Hello

• Ipinapahayag ng Box<T> ang uri na T na ginagamit sa loob ng klase bilang generic. Dahil dito, maaaring magamit muli ang parehong klase sa iba't ibang uri.

Mga Generic na Interface

Maaaring gamitin ang mga generics sa mga interface.

 1interface Pair<T, U> {
 2    first: T;
 3    second: U;
 4}
 5
 6const numberStringPair: Pair<number, string> = { first: 1, second: "One" };
 7console.log(numberStringPair);  // { first: 1, second: 'One' }
 8
 9const booleanArrayPair: Pair<boolean, number[]> = { first: true, second: [1, 2, 3] };
10console.log(booleanArrayPair);  // { first: true, second: [ 1, 2, 3 ] }

• Sa pagtukoy ng dalawang generic na uri gamit ang Pair<T, U>, maaari kang magdeklara ng bagay na may kombinasyon ng iba't ibang uri.

Default na Uri ng Argumento

Maaari ring magtakda ng default na uri para sa generic type na mga argumento.

1function createArray<T = string>(length: number, value: T): T[] {
2    return Array(length).fill(value);
3}
4
5console.log(createArray(3, "a"));   // ['a', 'a', 'a']
6console.log(createArray(3, 100));   // [100, 100, 100]

• Itinatakda natin ang default na uri ng argumento sa string gamit ang <T = string>. Kung walang espesipikong uri na tinukoy, magiging string ang uri ni T.

Mga Generic na Alias ng Uri

Maaaring gamitin ang mga generics bilang mga type alias (type).

 1type Result<T> = {
 2    success: boolean;
 3    data: T;
 4};
 5
 6const successResult: Result<number> = { success: true, data: 42 };
 7const errorResult: Result<string> = { success: false, data: "Error occurred" };
 8
 9console.log(successResult);  // { success: true, data: 42 }
10console.log(errorResult);    // { success: false, data: 'Error occurred' }

• Ang Result<T> ay kumakatawan sa isang resultang bagay na naglalaman ng datos na may uri na T. Sa ganitong paraan, makakagawa ka ng flexible na type alias gamit ang generics.

Maramihang Mga Generic na Uri

Sa paggamit ng maramihang generic na uri, maaari kang magdeklara ng mas versatile na mga function at klase.

1function merge<T, U>(obj1: T, obj2: U): T & U {
2    return { ...obj1, ...obj2 };
3}
4
5const person = { name: "Alice" };
6const job = { title: "Engineer" };
7
8const merged = merge(person, job);
9console.log(merged);  // { name: 'Alice', title: 'Engineer' }

• Ang merge function ay tumatanggap ng dalawang magkaibang uri T at U at pinagsasama ang mga ito upang makabuo ng bagong bagay.

Buod

• Ang generics ay nagpapahintulot sa paglikha ng reusable at type-safe na kodigo sa pamamagitan ng pagturing sa mga uri bilang mga parameter.
• Sa paggamit ng generics sa mga function, klase, at interface, maaari kang magsulat ng flexible na lohika para sa iba't ibang uri.
• Sa pagdagdag ng limitasyon sa mga type argument o pagtatakda ng default na type argument, mapipigilan at makokontrol mo ang saklaw ng generics.

Sa paggamit ng generics, makakasulat ka ng pangkalahatang kodigo na hindi nakadepende sa tiyak na uri, kaya masusulit mo ang malakas na type system ng TypeScript.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video