Articles
Pengenalan ke TypeScript
Pekerja Web dalam TypeScript

Pekerja Web dalam TypeScript

Artikel ini menjelaskan Pekerja Web dalam TypeScript.

Anda dapat mempelajari tentang konsep Web Workers dan berbagai tips penggunaannya dengan contoh.

YouTube Video

Pekerja dalam TypeScript

Worker dalam TypeScript adalah mekanisme untuk menjalankan proses di latar belakang, terpisah dari thread utama, menggunakan API Pekerja Web JavaScript. Hal ini memungkinkan komputasi berat dan tugas asinkron dijalankan tanpa memengaruhi operasi antarmuka pengguna.

Worker beroperasi secara paralel dengan thread utama (thread UI) dan dapat bertukar data antar thread melalui pesan. Bahkan dalam TypeScript, Anda dapat menggunakan Worker sambil menulis kode dengan keamanan tipe.

Penggunaan Dasar Pekerja

  1. Membuat Pekerja

    Buat instansi Worker dan jalankan skrip yang ditentukan. Biasanya, skrip didefinisikan dalam file terpisah.

  2. Pertukaran Pesan

    Kirim dan terima pesan antara thread utama dan thread Worker menggunakan postMessage dan onmessage.

Contoh: Implementasi Dasar Pekerja

  1. worker.ts: Skrip untuk Pekerja
1// worker.ts
2self.onmessage = (event) => {
3    const data = event.data;
4    const result = data.num1 + data.num2;
5    self.postMessage(result); // Return the result to the main thread
6};
  1. main.ts: Skrip untuk menggunakan Pekerja di Thread Utama
 1// main.ts
 2const worker = new Worker(
 3    new URL('./worker.ts', import.meta.url),
 4    { type: 'module' }
 5);
 6
 7worker.onmessage = (event) => {
 8    console.log("Result from worker:", event.data); // Receive message from the worker
 9};
10
11worker.postMessage({ num1: 10, num2: 20 }); // Send message to the worker
  • Dalam contoh ini, worker.ts berjalan di thread terpisah, menghitung jumlah num1 dan num2, lalu mengembalikannya ke thread utama. Thread utama menerima hasilnya dan menampilkannya di konsol.
  • Ketika Anda menentukan type: 'module', skrip Worker akan diinterpretasikan sebagai modul ES, sehingga Anda dapat menggunakan import dan export. Ini memungkinkan Anda menangani struktur modul tanpa menggunakan importScripts() yang tradisional.

Poin-Poin yang Harus Diperhatikan Saat Menggunakan Pekerja dalam TypeScript

Menambahkan Definisi Tipe

Dalam TypeScript, definisikan tipe data untuk memastikan interaksi yang aman terhadap tipe selama pengiriman dan penerimaan pesan.

 1// Define data types
 2interface WorkerData {
 3    num1: number;
 4    num2: number;
 5}
 6
 7interface WorkerResult {
 8    result: number;
 9}
10
11// worker.ts
12self.onmessage = (event: MessageEvent<WorkerData>) => {
13    const data = event.data;
14    const result = data.num1 + data.num2;
15    const message: WorkerResult = { result };
16    self.postMessage(message); // Send the result in a type-safe manner
17};
18
19// main.ts
20const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
21
22// Type the event from the worker
23worker.onmessage = (event: MessageEvent<WorkerResult>) => {
24  console.log("Result from worker:", event.data); // event.data is number
25};
26
27// Send typed data to the worker
28const message: WorkerData = { num1: 10, num2: 20 };
29worker.postMessage(message);
  • Dengan menentukan parameter tipe dari MessageEvent, Anda dapat dengan jelas mendefinisikan tipe data yang akan diterima. Hal ini memungkinkan data untuk dipertukarkan dengan keamanan tipe.

Mengatur Webpack atau Vite

Saat menggunakan Worker di TypeScript, penggabung seperti Webpack atau Vite mungkin diperlukan. Dengan menggunakan alat ini, Anda dapat menggabungkan skrip Worker dengan benar dan membuatnya tersedia dari thread utama.

Sebagai contoh, saat menggunakan Vite, gunakan import.meta.url untuk mengimpor Worker dengan benar.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
  • Ini memastikan bahwa skrip Worker yang digabungkan dimuat dengan benar, memungkinkan pemrosesan menggunakan Worker.

Pertimbangan untuk Pengiriman Pesan dan Concurrency

  1. Penyalinan Data

    Saat mengirim dan menerima pesan antara thread utama dan thread Worker, data akan disalin. Saat menangani data yang kompleks seperti objek, efisiensi perlu dipertimbangkan. Sering bertukar data dalam jumlah besar dapat menurunkan kinerja.

  2. Objek Transferable

    Beberapa objek, seperti ArrayBuffer, disebut sebagai objek Transferable. Objek Transferable dapat dipindahkan ke Worker alih-alih disalin selama pengiriman pesan. Ini memungkinkan Anda menghindari beban tambahan dari penyalinan data.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3const buffer = new ArrayBuffer(1024);
4worker.postMessage(buffer, [buffer]); // Transfer ownership to the Worker
5
6console.log(buffer.byteLength); // 0 (ownership moved)

  • Dengan melewatkan [buffer] sebagai argumen kedua ke worker.postMessage(), buffer akan dipindahkan ke Worker, bukan disalin.

  • Setelah ini, buffer di thread utama menjadi kosong (dengan byteLength 0) dan hanya dapat digunakan oleh Worker.

Menghentikan Worker

Worker harus dihentikan setelah digunakan untuk meminimalkan konsumsi memori. Anda dapat menghentikan Worker dengan menggunakan metode terminate.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2// ...
3
4worker.terminate(); // Terminate the Worker
  • Kode ini menghentikan Worker dengan menggunakan metode terminate.

Penanganan Pengecualian di Worker

Jika terjadi kesalahan di dalam Worker, Anda dapat menangani kesalahan tersebut menggunakan event onerror.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3worker.onerror = (error) => {
4    console.error("Error in Worker:", error.message);
5};
  • Kode ini menangkap dan menangani error yang terjadi di dalam Worker menggunakan event onerror.

Ringkasan

Dengan menggunakan Worker di TypeScript, Anda dapat menjalankan tugas berat di latar belakang sambil menjaga kelancaran thread utama. Dengan memanfaatkan definisi tipe, pertukaran pesan juga dapat dilakukan secara aman tipe. Dengan memperhatikan pertukaran data dan manajemen thread, Anda dapat mencapai peningkatan kinerja dan concurrency yang efisien.

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

YouTube Video

Fetch/XMLHttpRequest di TypeScriptService Worker di TypeScript