如何在TypeScript Web Worker中为self添加HighlightJS严格类型？

当然可以通过@types/highlight.js的类型定义来给self添加严格的类型约束，不用再依赖any绕过类型检查。具体实现如下：

• 首先确保安装正确的类型包（注意包名是@types/highlight.js，不是@types/highlightjs）：

  npm install @types/highlight.js --save-dev
  

• 自定义一个联合类型，将Web Worker的全局作用域WorkerGlobalScope与Highlight.js的命名空间HighlightNamespace合并，让TypeScript识别self上挂载的hljs属性：

  type WorkerWithHljs = WorkerGlobalScope & { hljs: import('highlight.js').HighlightNamespace };
  

• 优化Worker代码，给消息事件和self都加上类型约束，同时给输入数据定义接口提升严谨性：

  // 定义Worker接收的消息数据结构
  interface HighlightTaskData {
    code: string;
    language?: string;
  }
  
  onmessage = (e: MessageEvent<HighlightTaskData>) => {
    importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js');
    
    // 给self添加类型断言
    const workerSelf = self as WorkerWithHljs;
    const { code, language } = e.data;
    
    const highlightResult = language 
      ? workerSelf.highlightAuto(code, { language })
      : workerSelf.highlightAuto(code);
    
    postMessage(highlightResult.value);
  };
  

这样修改后，workerSelf.highlightAuto会自动获得Highlight.js提供的完整类型提示，参数、返回值的类型都会被TypeScript严格校验，彻底消除any带来的类型安全隐患。同时给消息数据定义接口，也让Worker与主线程的通信结构更清晰可维护。

内容的提问来源于stack exchange，提问作者Ole