Articles
TypeScript简介
TypeScript中的Web Worker

TypeScript中的Web Worker

本文介绍了TypeScript中的Web Workers。

你可以通过示例学习 Web Workers 的概念和各种使用技巧。

YouTube Video

TypeScript中的Worker

在TypeScript中，Worker是通过JavaScript的Web Workers API，在后台单独执行处理、与主线程分离的机制。这使得可以执行繁重的计算和异步任务，而不会影响用户界面的运行。

Worker与主线程（UI线程）并行运行，并可以通过消息在线程之间交换数据。即使在TypeScript中，您也可以在编写类型安全的代码时使用Worker。

Worker的基本用法

  1. 创建一个Worker

    创建一个Worker实例并执行指定的脚本。通常，脚本在单独的文件中定义。

  2. 消息交换

    使用postMessage和onmessage在主线程和Worker线程之间发送和接收消息。

示例：基本的Worker实现

  1. worker.ts: Worker的脚本
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: 主线程中使用Worker的脚本
 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
  • 在此示例中，worker.ts运行在单独的线程中，计算num1和num2的和，并将结果返回给主线程。主线程接收结果并将其输出到控制台。
  • 当你指定 type: 'module' 时，Worker 脚本会被当作 ES 模块 解析，从而可以使用 import 和 export。这样你就可以不用传统的 importScripts() 来处理模块结构。

在TypeScript中使用Workers时需要注意的事项

添加类型定义

在TypeScript中，定义数据类型以确保在消息发送和接收时的类型安全交互。

 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);
  • 通过指定MessageEvent的类型参数，可以清楚地定义接收数据的类型。这样可以在数据交换时保持类型安全。

设置Webpack或Vite

在 TypeScript 中使用 Worker 时，可能需要使用诸如 Webpack 或 Vite 之类的打包工具。使用这些工具可以正确地打包 Worker 脚本，并使其可以从主线程访问。

例如，在使用 Vite 时，可以使用 import.meta.url 来正确导入 Worker。

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
  • 这确保了打包的 Worker 脚本能够正确加载，从而利用 Worker 进行处理。

消息传递和并发的注意事项

  1. 数据复制

    在主线程和 Worker 线程之间发送和接收消息时，数据会被复制。在处理对象等复杂数据时，需要考虑效率问题。频繁交换大量数据可能会导致性能下降。

  2. Transferable 对象

    有些对象，比如 ArrayBuffer，被称为 Transferable 对象。Transferable 对象可以在消息传递时被转移给 Worker，而不是被复制。这样可以避免数据复制的开销。

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)

  • 通过将 [buffer] 作为 worker.postMessage() 的第二个参数传递，buffer 会被转移到 Worker，而不是被复制。

  • 此后，主线程中的 buffer 变为空（byteLength 为 0），只能被 Worker 使用。

终止一个 Worker

使用完 Worker 后应将其终止，以最小化内存消耗。你可以使用 terminate 方法来终止一个 Worker。

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2// ...
3
4worker.terminate(); // Terminate the Worker
  • 这段代码通过 terminate 方法终止 Worker。

Worker 中的异常处理

如果在 Worker 中发生错误，可以使用 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};
  • 这段代码通过 onerror 事件捕获并处理 Worker 内部发生的错误。

总结

通过在 TypeScript 中使用 Worker，可以在后台执行繁重任务，同时保持主线程的流畅。通过利用类型定义，还可以以类型安全的方式进行消息交换。通过关注数据交换和线程管理，可以实现性能提升和高效并发。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

在 TypeScript 中使用 Fetch/XMLHttpRequestTypeScript中的Service Worker