两个不同TypeScript文件同名变量报错的解决方法咨询

问题根源 #

1. 默认情况下，TypeScript把.ts文件当成全局脚本，所有变量、函数都会跑到全局作用域里，多个文件用同名变量自然就撞车，报cannot redeclare block-scoped variable错误。
2. 开了"moduleDetection": "force"后，TS会把所有文件当成模块，模块里的东西默认都是私有的，不会暴露到全局，所以HTML按钮点的时候找不到对应的函数。

可行解决方案 #

方案1：模块导出+全局挂载（推荐） #

既用模块隔离作用域解决变量冲突，又手动把需要全局调用的函数挂到window上，兼顾规范和实用性。

修改app.ts：

// 这个变量是模块私有，不会和其他文件冲突
let myString: string = "appFile";

// 定义要全局用的函数
export function handleAppBtnClick() {
  console.log(myString);
}

// 声明全局window上有这个函数，避免TS报错
declare global {
  interface Window {
    handleAppBtnClick: typeof handleAppBtnClick;
  }
}
// 把函数挂载到全局
window.handleAppBtnClick = handleAppBtnClick;

test.ts照葫芦画瓢：

let myString: string = "testFile";

export function handleTestBtnClick() {
  console.log(myString);
}

declare global {
  interface Window {
    handleTestBtnClick: typeof handleTestBtnClick;
  }
}
window.handleTestBtnClick = handleTestBtnClick;

方案2：用IIFE隔离作用域（传统JS玩法） #

不想碰模块系统的话，用立即执行函数把每个文件的变量包在局部作用域里，同时手动暴露需要全局调用的函数。

app.ts：

(function() {
  let myString: string = "appFile";
  
  // 把函数挂到全局供HTML调用
  window.handleAppBtnClick = function() {
    console.log(myString);
  };
})();

test.ts：

(function() {
  let myString: string = "testFile";
  
  window.handleTestBtnClick = function() {
    console.log(myString);
  };
})();

方案3：调整TS配置区分脚本和模块 #

如果部分文件要当全局脚本、部分当模块，可以把tsconfig.json里的moduleDetection设为auto：

{
  "compilerOptions": {
    "moduleDetection": "auto"
  }
}

然后给需要隔离的文件顶部加export {}（让TS识别成模块），但这种方式容易搞混，新手不推荐。

额外提醒 #

• 能不用全局函数就尽量不用，模块化开发是更规范的路子。
• 如果用模块模式编译，HTML里引入JS文件要加type="module"：

  <script type="module" src="./dist/app.js"></script>
  <script type="module" src="./dist/test.js"></script>
  

  但就算加了这个，要全局访问函数还是得手动挂到window上。

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