Fungsi Generator dalam TypeScript

Artikel ini menerangkan fungsi generator dalam TypeScript.

Anda boleh mempelajari segalanya dari asas cara menggunakan fungsi penjana sehingga contoh lanjutan yang digabungkan dengan pemprosesan asynchronous, bersama dengan contoh kod.

YouTube Video

Fungsi Generator

Fungsi generator dalam TypeScript menyediakan fungsi yang serupa dengan fungsi generator dalam JavaScript. Fungsi generator ditakrifkan menggunakan function* (deklarasi fungsi dengan asterisk) dan merupakan fungsi khas yang boleh memberhentikan dan menyambung semula pelaksanaan tidak seperti fungsi biasa.

Apabila fungsi generator dipanggil, sebuah iterator dikembalikan, yang menjana nilai satu demi satu melalui iterator ini, dan anda boleh memberhentikan pelaksanaan menggunakan kata kunci yield atau menghantar nilai dari luar.

Sintaks Asas Fungsi Generator

 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)

• Takrifkan fungsi generator dengan function* myGenerator().
• Kata kunci yield memberhentikan pelaksanaan fungsi semasa memulangkan satu nilai.
• Setiap kali kaedah next() dipanggil, pelaksanaan fungsi generator disambung semula dan bergerak ke yield seterusnya.

next() mengembalikan satu objek yang mengandungi nilai seterusnya dan sifat done. Apabila done adalah true, ini menunjukkan bahawa semua nilai telah dijana dan pemprosesan generator sudah selesai.

Aplikasi Fungsi Generator

Penggunaan fungsi generator membolehkan penggambaran pemprosesan berurutan dengan mudah. Dalam contoh berikut, kita mencipta satu fungsi generator yang menjana satu urutan nombor.

 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

• Dalam contoh ini, sequenceGenerator menjana satu urutan nombor yang meningkat tanpa had. Gunakan yield untuk memulangkan nilai pada setiap langkah, dan menjana nilai seterusnya pada panggilan berikutnya.

Memasukkan Nilai ke next

Kaedah next() boleh menerima nilai, yang boleh dihantar ke dalam fungsi generator.

 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

• Dalam contoh ini, next(5) dan next(10) menghantar nilai masing-masing ke dalam fungsi generator, dan yield num1 + num2 memulangkan jumlahnya.

return dan throw

• return(value) boleh menamatkan generator dan memulangkan nilai yang ditentukan.
• throw(error) boleh melontarkan pengecualian di dalam generator, digunakan untuk mengendalikan pengecualian dalam 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!

• Dalam contoh ini, kaedah throw digunakan untuk menjana ralat di dalam generator, dan ralat itu ditangkap dalam generator.

Definisi Jenis dalam TypeScript

Definisi jenis fungsi penjana boleh ditentukan dalam format berikut.

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

• Anda menentukan jenis dalam bentuk Generator<YieldType, ReturnType, NextType>.
  • YieldType ialah jenis nilai yang dipulangkan oleh yield.
  • ReturnType ialah jenis nilai yang dipulangkan oleh return.
  • NextType ialah jenis nilai yang dihantar kepada next().

Dalam contoh berikut, jenis tertentu ditentukan untuk menggunakan penjana dengan selamat bersama jenis.

 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)

Penjana dan Pemprosesan Asynchronous

Penjana juga boleh digunakan untuk pemprosesan asynchronous. Sebagai contoh, anda boleh menggunakan yield untuk menunggu hasil operasi asynchronous sambil meneruskan pemprosesan secara berturutan. Walau bagaimanapun, dalam TypeScript atau JavaScript, async/await lebih lazim digunakan.

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}

Oleh itu, walaupun anda boleh memproses operasi asynchronous secara berturutan dengan penjana, penjana tidak sering digunakan untuk pemprosesan asynchronous kerana Promises dan async/await lebih mudah digunakan.

Ringkasan

• Fungsi penjana adalah fungsi khas yang ditakrifkan dengan function* yang boleh mengembalikan nilai dengan yield sambil menghentikan pelaksanaan fungsi.
• Gunakan next() untuk menyambung semula penjana dan menerima nilai. Selain itu, anda boleh menghantar nilai ke dalam penjana menggunakan next(value).
• Anda boleh menggunakan return() dan throw() untuk menamatkan fungsi penjana atau mengendalikan ralat.
• Apabila menggunakan penjana dalam TypeScript, anda boleh memanfaatkan definisi jenis untuk menulis kod selamat jenis.

Penjana adalah alat yang berkuasa yang membolehkan anda mengawal iterasi dengan fleksibel.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video