VS Code中TypeScript报错‘Cannot redeclare block-scoped variable’求助

问题场景 #

我正在学习TypeScript教程，在app.ts文件中编写了如下代码：

let message: string = 'Hello, TypeScript!';

let heading = document.createElement('h1');
heading.textContent = message;

document.body.appendChild(heading);

编译后在VS Code中出现Cannot redeclare block-scoped variable 'message'错误。即使更换变量名称，甚至仅使用简单console.log时仍会触发该错误。

原因分析 #

这个错误的核心原因是TypeScript默认将没有模块导出/导入的文件当作全局脚本，文件里的变量会被挂载到全局作用域中。如果项目中有多个这样的脚本文件，或者VS Code的TypeScript语言服务检测到全局作用域中存在重复的变量声明（哪怕是同一个文件被意外多次加载），就会触发这个错误。哪怕你只写了单个文件，TS也可能因为模块检测逻辑的问题，把它识别为全局脚本，导致变量被视为全局声明，进而引发冲突。

解决方案 #

• 将文件转为模块：在文件末尾添加一行export {}，这样TypeScript会把该文件当作ES模块处理，变量会被限制在模块作用域内，不会污染全局：

  let message: string = 'Hello, TypeScript!';
  
  let heading = document.createElement('h1');
  heading.textContent = message;
  
  document.body.appendChild(heading);
  
  export {};
  

• 配置tsconfig.json强制模块检测：在项目的tsconfig.json中添加或修改moduleDetection选项为"force"，让TypeScript把所有文件都当作模块处理，无需手动添加导出语句：

  {
    "compilerOptions": {
      "moduleDetection": "force",
      // 其他配置项...
    }
  }
  

• 检查全局作用域冲突：确认项目中没有其他文件在全局作用域声明了相同名称的变量，或者是否有重复引入同一个脚本的情况。

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