TypeScript块级作用域异常：const变量外部可访问问题排查

问题 #

测试块级变量作用域时，按照MDN文档编写的TypeScript代码运行结果不符合预期：块内定义的const radius，在块外访问本应返回undefined，但实际输出了10。经排查，编译后的JavaScript中const被转为var，导致变量变为全局作用域。已在tsconfig.json中设置target: ESNext，但tsc编译仍生成var声明的代码（tsx运行正常）。

TypeScript代码片段 #

let sector;
{
  // 这些变量应仅在当前块内作用，块外不可访问
  const angle = Math.PI / 3;
  const radius = 10;
  sector = {
    radius,
    angle,
    area: (angle / 2) * radius ** 2,
    perimeter: 2 * radius + angle * radius,
  };
}
console.log(sector);
// 预期输出：
// {
//   radius: 10,
//   angle: 1.0471975511965976,
//   area: 52.35987755982988,
//   perimeter: 30.471975511965976
// }
console.log(typeof radius, radius); // 预期输出："undefined" "undefined"

实际运行输出 #

{
  radius: 10,
  angle: 1.0471975511965976,
  area: 52.35987755982988,
  perimeter: 30.471975511965976
}
number 10

排查结果 #

编译后的JavaScript代码中，const被转为var，导致变量作用域被提升：

var sector;
{
    // These variables are scoped to this block and are not
    // accessible after the block
    var angle = Math.PI / 3;
    var radius = 10;
    sector = {
        radius: radius,
        angle: angle,
        area: (angle / 2) * Math.pow(radius, 2),
        perimeter: 2 * radius + angle * radius,
    };
}
console.log(sector);
console.log(typeof radius, radius); // "undefined" "undefined"

当前tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

解决方法 #

1. 确认tsconfig.json被正确加载
   确保在项目根目录运行tsc命令，或通过tsc --project ./path/to/tsconfig.json指定配置文件路径，避免命令行参数（如--target）覆盖配置。

2. 调整module配置
   将module设置为ESNext，确保TypeScript保留块级作用域声明：

   {
     "compilerOptions": {
       "target": "ESNext",
       "module": "ESNext",
       "esModuleInterop": true,
       "forceConsistentCasingInFileNames": true,
       "strict": true,
       "skipLibCheck": true
     }
   }
   

   若需继续使用CommonJS模块，可保留module: "commonjs"，但需检查是否存在其他配置冲突（如嵌套的tsconfig文件），或通过tsc --showConfig查看实际生效的编译配置，确认target确实为ESNext。

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