Fungsi Generator dalam TypeScript

Artikel ini menjelaskan fungsi generator dalam TypeScript.

Anda dapat mempelajari segalanya mulai dari dasar cara menggunakan fungsi generator hingga contoh lanjutan yang dikombinasikan dengan pemrosesan asinkron, beserta sampel kode.

YouTube Video

Fungsi Generator

Fungsi generator dalam TypeScript menyediakan fungsionalitas yang mirip dengan fungsi generator pada JavaScript. Fungsi generator didefinisikan menggunakan function* (deklarasi fungsi dengan tanda bintang) dan merupakan fungsi khusus yang dapat menghentikan dan melanjutkan eksekusi tidak seperti fungsi normal.

Ketika sebuah fungsi generator dipanggil, sebuah iterator dikembalikan, yang menghasilkan nilai satu per satu melalui iterator ini, dan Anda dapat menghentikan eksekusi menggunakan kata kunci yield atau mengirim nilai dari luar.

Sintaks Dasar 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)

• Definisikan fungsi generator dengan function* myGenerator().
• Kata kunci yield menghentikan eksekusi fungsi sambil mengembalikan nilai.
• Setiap kali metode next() dipanggil, eksekusi fungsi generator dilanjutkan dan bergerak ke yield berikutnya.

next() mengembalikan sebuah objek yang mengandung nilai berikutnya dan properti done. Ketika done adalah true, ini menunjukkan bahwa semua nilai telah dihasilkan dan pemrosesan generator telah selesai.

Aplikasi Fungsi Generator

Menggunakan fungsi generator memungkinkan representasi pemrosesan berurutan dengan mudah. Dalam contoh berikut, kami membuat fungsi generator yang menghasilkan urutan angka.

 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 menghasilkan urutan angka yang meningkat tanpa batas. Gunakan yield untuk mengembalikan nilai pada setiap langkah, dan hasilkan nilai berikutnya pada panggilan selanjutnya.

Mengirimkan Nilai ke next

Metode next() dapat menerima nilai, yang dapat dikirimkan 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) mengirimkan nilai masing-masing ke dalam fungsi generator, dan yield num1 + num2 mengembalikan jumlahnya.

return dan throw

• return(value) dapat menghentikan generator dan mengembalikan nilai yang ditentukan.
• throw(error) dapat melemparkan pengecualian di dalam generator, digunakan untuk menangani pengecualian di 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, metode throw digunakan untuk menghasilkan kesalahan di dalam generator, dan kesalahan tersebut ditangkap di dalam generator.

Definisi Tipe dalam TypeScript

Definisi tipe dari fungsi generator dapat 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 tipe dalam bentuk Generator<YieldType, ReturnType, NextType>.
  • YieldType adalah tipe dari nilai yang dikembalikan oleh yield.
  • ReturnType adalah tipe dari nilai yang dikembalikan oleh return.
  • NextType adalah tipe dari nilai yang diteruskan ke next().

Dalam contoh berikut, tipe spesifik ditentukan untuk menggunakan generator dengan aman menggunakan tipe.

 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)

Generator dan Pemrosesan Asinkron

Generator juga dapat digunakan untuk pemrosesan asinkron. Sebagai contoh, Anda dapat menggunakan yield untuk menunggu hasil operasi asinkron sambil melanjutkan pemrosesan secara sequential. Namun, dalam TypeScript atau JavaScript, async/await lebih sering 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 karena itu, meskipun Anda dapat memproses operasi asinkron secara sequential dengan generator, generator tidak sering digunakan untuk pemrosesan asinkron karena Promises dan async/await lebih praktis.

Ringkasan

• Fungsi generator adalah fungsi khusus yang didefinisikan dengan function* yang dapat mengembalikan nilai dengan yield sambil menghentikan eksekusi fungsi.
• Gunakan next() untuk melanjutkan generator dan menerima nilai. Selain itu, Anda dapat mengirim nilai ke generator menggunakan next(value).
• Anda dapat menggunakan return() dan throw() untuk menghentikan fungsi generator atau menangani kesalahan.
• Saat menggunakan generator dalam TypeScript, Anda dapat memanfaatkan definisi tipe untuk menulis kode yang aman terhadap tipe.

Generator adalah alat yang kuat yang memungkinkan Anda untuk mengontrol iterasi secara fleksibel.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video