TypeScript多文件共享外层IIFE变量重复声明报错解决方案咨询

解决方案 #

以下是3种可直接落地的方案，你可以根据团队的开发习惯选择： #

方案1：将文件标记为ES模块（最简单）

在每个.ts文件的末尾添加一行空导出语句：

export {}

添加后TS会自动将当前文件识别为独立ES模块，模块内的declare const foo仅作用于当前文件，不会和其他文件的同名声明冲突。
如果担心编译后生成的导出语句影响运行，可以选择以下两种处理方式：

• 直接保留：导出语句在外层IIFE内执行不会产生任何实际副作用，不会污染全局，也不会影响现有逻辑
• 编译后清理：写个简单的后置脚本，批量删除编译产物末尾的导出语句即可

方案2：通过IIFE参数注入变量（最优雅，无类型声明负担）

修改外层HTML的嵌入逻辑，将外层变量作为参数传给每个子文件的IIFE：
主HTML修改为：

<script>
    (() => {
        const foo = 'bar';
        {{ include('xxx.js') }}(foo);
        {{ include('yyy.js') }}(foo);
    })()
    {{ include('zzz.js') }}
</script>

对应的xxx.ts、yyy.ts修改为：

((foo: string) => {
    console.log(foo);
})()

这个方案完全不需要额外的declare声明，也不需要改TS配置，类型安全度最高，也没有多余的运行时代码。 #

方案3：调整tsconfig配置

在tsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "isolatedModules": true,
    "skipLibCheck": true
  }
}

开启isolatedModules后TS会将每个文件作为独立单元编译，不会跨文件检查全局声明的冲突，两个文件的同名declare不会再触发报错。 #

另外补充一个误区纠正：TS的declare声明仅作用于编译时，不会生成任何运行时代码，你完全可以把declare const foo: string放到全局类型声明文件里，哪怕运行时全局没有这个变量也不会产生任何影响，只是会让所有TS文件都能识别到foo的类型，如果你能接受这个范围，这也是成本最低的方案。

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