如何为HTTP链接导入的ESM JavaScript模块配置类型检查？

针对你通过https://esm.sh/excalibur这类远程链接导入ESM模块时的类型检查失效问题，以下是两种可行的解决方案，同样适用于ThreeJS、PIXI等支持远程ESM导入的库：

方案一：通过jsconfig.json的paths映射类型 #

修改你的jsconfig.json，添加baseUrl和paths配置，将远程模块路径映射到本地npm包的类型文件：

{
    "compilerOptions": {
        "strict": false,
        "checkJs": true,
        "target": "ES2022",
        "lib": [
            "es2022",
            "dom",
            "dom.iterable"
        ],
        "module": "es2022",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "baseUrl": ".", // 必须设置baseUrl才能使用paths
        "paths": {
            "https://esm.sh/excalibur": ["./node_modules/excalibur/build/esm/index.d.ts"]
        }
    }
}

原理：让TypeScript在解析远程模块导入时，自动关联到本地安装的库类型定义文件，从而启用类型检查。

方案二：创建全局类型声明文件 #

在项目根目录新建global.d.ts文件，内容如下：

declare module 'https://esm.sh/excalibur' {
  export * from 'excalibur';
}

原理：直接声明远程模块的类型完全等同于本地安装的excalibur包，TypeScript会自动复用已安装的类型定义。

验证配置 #

完成上述任一方案后，重启编辑器（或触发TypeScript服务重启），此时导入的Engine、Actor等对象应该能正常触发类型提示，类型检查也会生效。

通用适配（ThreeJS/PIXI示例） #

如果是ThreeJS，只需将上述配置中的excalibur替换为three：

• paths映射："https://esm.sh/three": ["./node_modules/three/build/three.d.ts"]
• 类型声明：

declare module 'https://esm.sh/three' {
  export * from 'three';
}

PIXI同理，替换为pixi.js即可。

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