如何在Lit Element组件中引用index.html引入的highlight.js？

当你通过CDN在index.html引入highlight.js后，在Lit组件里调用hljs触发类型检查错误，核心原因是TypeScript无法识别全局挂载的hljs变量，以下是几种可行的解决方式：

方法1：安装类型定义并声明全局变量 #

• 先安装highlight.js的类型依赖：

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

• 在组件文件顶部添加全局变量声明：

  declare const hljs: typeof import('highlight.js');
  

这样TypeScript就能识别hljs的完整类型，同时保留CDN全局引入的方式。

方法2：直接声明全局变量（快速临时方案） #

如果不想安装额外依赖，可在组件文件顶部直接声明hljs为任意类型：

declare const hljs: any;

这种方式操作简单，但会失去类型提示能力，适合快速调试场景。

方法3：改用ES模块方式引入（推荐长期方案） #

如果项目支持ES模块，可以直接在组件内通过CDN的ES模块地址引入，替代index.html里的全局脚本：

import hljs from 'https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/es/core.min.js';
import go from 'https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/es/languages/go.min.js';

connectedCallback() {
  super.connectedCallback();
  hljs.registerLanguage('go', go);
  hljs.highlightAuto(this.innerHTML);
}

这种方式符合模块化开发规范，TypeScript能自动识别类型，也避免了全局变量带来的潜在问题。注意使用时要移除index.html中之前全局引入的highlight.js脚本。

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