Mga Generator Function sa TypeScript

Ipinaliliwanag ng artikulong ito ang mga generator function sa TypeScript.

Maaari mong matutunan ang lahat mula sa mga pangunahing kaalaman kung paano gamitin ang generator functions hanggang sa mga advanced na halimbawa na pinagsama sa asynchronous na pagproseso, kasama ang mga code sample.

YouTube Video

Mga Generator Function

Ang mga generator function sa TypeScript ay nagbibigay ng katulad na functionality sa generator function ng JavaScript. Ang mga generator function ay tinutukoy gamit ang function* (isang function declaration na may asterisk) at mga espesyal na function na maaaring mag-pause at mag-resume ng execution, hindi tulad ng normal na mga function.

Kapag tinawag ang isang generator function, ang isang iterator ay ibinabalik, na gumagawa ng mga halaga isa-isa sa pamamagitan ng iterator na ito, at maaari mong i-pause ang execution gamit ang keyword na yield o magpadala ng mga halaga mula sa labas.

Pangunahing Sintaks ng Mga Generator Function

 1function* myGenerator(): Generator<number, void, unknown> {
 2    yield 1;
 3    yield 2;
 4    yield 3;
 5}
 6
 7const gen = myGenerator();
 8
 9console.log(gen.next().value); // 1
10console.log(gen.next().value); // 2
11console.log(gen.next().value); // 3
12console.log(gen.next().done);  // true (Iteration finished)

• Tukuyin ang isang generator function gamit ang function* myGenerator().
• Ang keyword na yield ay nagpapahinto sa execution ng function habang nagbabalik ng isang halaga.
• Sa bawat tawag ng next() method, ang pagtakbo ng generator function ay nagpapatuloy at nagpupunta sa susunod na yield.

Ang next() ay nagbabalik ng isang object na naglalaman ng susunod na halaga at isang done na katangian. Kapag ang done ay true, nangangahulugan ito na lahat ng halaga ay nagawa na at ang pagpoproseso ng generator ay tapos na.

Mga Aplikasyon ng Mga Generator Function

Ang paggamit ng mga generator function ay nagpapadali para sa representasyon ng sunod-sunod na pagproseso. Sa sumusunod na halimbawa, gumawa tayo ng generator function na nagreresulta ng isang hanay ng mga numero.

 1function* sequenceGenerator(start: number = 0, step: number = 1) {
 2    let current = start;
 3    while (true) {
 4        yield current;
 5        current += step;
 6    }
 7}
 8
 9const seq = sequenceGenerator(1, 2);
10
11console.log(seq.next().value); // 1
12console.log(seq.next().value); // 3
13console.log(seq.next().value); // 5

• Sa halimbawang ito, ang sequenceGenerator ay gumagawa ng isang walang katapusang pagtaas na hanay ng mga numero. Gamitin ang yield upang magbalik ng mga halaga sa bawat hakbang, at gumawa ng susunod na halaga sa mga sumunod na tawag.

Pagpapasa ng mga Halaga sa next

Maaaring tumanggap ng isang halaga ang next() method, na maaaring maipasa papasok sa generator function.

 1function* adder() {
 2    const num1 = yield;
 3    const num2 = yield;
 4    yield num1 + num2;
 5}
 6
 7const addGen = adder();
 8addGen.next();          // Initialization
 9addGen.next(5);         // Set 5 to num1
10const result = addGen.next(10).value; // Set 10 to num2 and get result
11console.log(result);    // 15

• Sa halimbawang ito, ang next(5) at next(10) ay nagpapadala ng kani-kanilang mga halaga papasok sa generator function, at ang yield num1 + num2 ay nagbabalik ng kanilang kabuuan.

return at throw

• Ang return(value) ay maaaring tapusin ang generator at ibalik ang tinukoy na halaga.
• Ang throw(error) ay maaaring magtapon ng exception sa loob ng generator, ginamit para sa paghawak ng mga exception sa loob ng generator.

 1function* testGenerator() {
 2    try {
 3        yield 1;
 4        yield 2;
 5    } catch (e) {
 6        console.error("Error caught:", e);
 7    }
 8}
 9
10const gen = testGenerator();
11console.log(gen.next().value); // 1
12gen.throw(new Error("An error occurred!")); // Error caught: An error occurred!

• Sa halimbawang ito, ang throw method ay ginamit upang mag-generate ng error sa loob ng generator, at ang error na iyon ay nahuli sa loob ng generator.

Pagpapakahulugan ng Uri sa TypeScript

Ang kahulugan ng uri ng isang generator function ay maaaring tukuyin sa sumusunod na format.

1// Generator<YieldType, ReturnType, NextType>
2function* myGenerator(): Generator<number, void, unknown> {
3    yield 1;
4    yield 2;
5    yield 3;
6}

• Ipinapahayag mo ang mga uri sa porma ng Generator<YieldType, ReturnType, NextType>.
  • Ang YieldType ay ang uri ng halagang ibinabalik ng yield.
  • Ang ReturnType ay ang uri ng halagang ibinabalik ng return.
  • Ang NextType ay ang uri ng halagang ipinapasa sa next().

Sa sumusunod na halimbawa, tinukoy ang mga espesipikong uri upang ligtas na magamit ang generator gamit ang mga uri.

 1function* numberGenerator(): Generator<number, void, number> {
 2    const num1 = yield 1;
 3    const num2 = yield num1 + 2;
 4    yield num2 + 3;
 5}
 6
 7const gen = numberGenerator();
 8
 9console.log(gen.next().value);   // 1
10console.log(gen.next(10).value); // 12 (10 + 2)
11console.log(gen.next(20).value); // 23 (20 + 3)

Generators at Asynchronous na Pagproseso

Maaaring gamitin ang generators para sa asynchronous na pagproseso. Halimbawa, maaari mong gamitin ang yield upang maghintay sa mga resulta ng asynchronous na operasyon habang nagpapatuloy sa sunod-sunod na pagproseso. Gayunpaman, sa TypeScript o JavaScript, mas karaniwang ginagamit ang async/await.

1function* asyncTask() {
2    const result1 = yield fetch("https://codesparklab.com/json/example1.json");
3    console.log(result1);
4
5    const result2 = yield fetch("https://codesparklab.com/json/example2.json");
6    console.log(result2);
7}

Samakatuwid, bagama't maaari mong iproseso ang asynchronous na mga operasyon nang sunod-sunod gamit ang generators, hindi ito karaniwang ginagamit para sa asynchronous na pagproseso dahil mas maginhawa ang Promises at async/await.

Buod

• Ang generator functions ay mga espesyal na function na tinutukoy gamit ang function* na maaaring magbalik ng mga halaga gamit ang yield habang pinipigil pansamantala ang pag-execute ng function.
• Gamitin ang next() upang ipagpatuloy ang generator at tumanggap ng mga halaga. Dagdag pa rito, maaari kang magpadala ng mga halaga papasok sa generator gamit ang next(value).
• Maaari mong gamitin ang return() at throw() upang tapusin ang generator functions o mag-handle ng errors.
• Kapag gumagamit ng generators sa TypeScript, maaari mong gamitin ang mga pagpapakahulugan ng uri upang magsulat ng ligtas na code batay sa uri.

Ang generators ay makapangyarihang mga tool na nagbibigay-daan sa iyo na may kakayahang umangkop na kontrolin ang pag-uulit.

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