如何在TypeScript中正确导入原生JavaScript定义的对象

你不需要修改第三方abc.js文件，按以下三步配置即可满足需求：

1. 编写类型声明文件 #

新建abc.d.ts文件，为全局的ABC对象提供TS类型定义，这个文件仅用于类型检查，不会产出运行时代码：

// abc.d.ts
declare const ABC: {
  // 可根据实际使用的ABC属性/方法补充精确类型，不想逐个补全可以先用索引签名兜底
  [key: string]: any;
};

如果需要更严格的类型检查，直接在对象字面量里补充对应字段的类型即可，比如ABC有init方法和version属性就可以写成：

declare const ABC: {
  init: () => void;
  version: string;
  [key: string]: any;
};

2. 配置tsconfig.json #

开启TS对JS文件的编译支持，配置合并输出为单个文件，参考配置如下：

{
  "compilerOptions": {
    "target": "ES5", // 可根据需要兼容的环境调整版本
    "module": "none", // 不使用模块系统，按全局脚本模式拼接
    "outFile": "./dist/output.js", // 最终输出的单个JS文件路径
    "allowJs": true, // 允许编译JS文件
    "checkJs": false, // 关闭对第三方JS文件的类型检查，避免无关报错
    "skipLibCheck": true
  },
  "include": [
    "./abc.js", // 把第三方JS纳入编译范围
    "./abc.d.ts",
    "./main.ts"
  ]
}

注意include数组里的顺序就是最终输出文件里的代码拼接顺序，abc.js要放在main.ts前面，保证运行时ABC对象先被初始化。

3. 直接在TS代码中使用ABC #

在main.ts里不需要写任何import语句，直接使用全局ABC对象即可，TS会自动识别我们在d.ts里声明的类型：

// main.ts
ABC.init();
console.log(ABC.version);

配置完成后直接执行tsc命令，就会在你配置的outFile路径生成单个JS文件，里面已经按顺序包含了abc.js的原始代码和你写的TS编译后的代码，不需要额外引入打包工具。

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