let 定义的变量范围，为什么是这样的？

Question

想问下 下面俩段代码 中，ts报错 为什么。

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    let a = 123;
    console.log('Oranges are $0.59 a pound.',a);
    break;
  case 'Papayas':
    let a = 456;
    console.log('Mangoes and papayas are $2.79 a pound.',a);
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

const expr = 'Oranges';
switch (expr) {
  case 'Oranges':
    let a = 123;
    console.log('Oranges are $0.59 a pound.',a);
    break;
  case 'Papayas':
     a = 456;
    console.log('Mangoes and papayas are $2.79 a pound.',a);
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`,a);
}

才发现第一种也是有问题的 ，好奇怪

我个人一直以为第一种写法是对的，但是ts报错提示我重复定义了，我就改成第二种写法写的，结果发现 build 以后(webpack) 就变成这样了，导致变量没有定义，为什么会有这样奇怪的行为

chunk代码就成这样了，代码中就会生成一个r 变量，这个变量没有定义就被使用。。。

有点搞不清楚了，大佬快来讲讲。

Answer 1

这两段 TypeScript 代码的报错原因都与 JavaScript/TypeScript 的 块级作用域 和 switch 语句特性 有关。

第一段代码报错原因：

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    let a = 123; // 第一次声明 a
    console.log('Oranges are $0.59 a pound.',a);
    break;
  case 'Papayas':
    let a = 456; // ❌ 报错：重复声明块级作用域变量 'a'
    console.log('Mangoes and papayas are $2.79 a pound.',a);
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

原因：

1. switch 语句的所有 case 共享同一个作用域，并不是每个 case 有独立的作用域。
2. 当你在 case 'Oranges' 和 case 'Papayas' 中分别用 let a 声明变量时，相当于在同一个作用域内重复声明同名变量 a。
3. let 声明的变量具有块级作用域，且在同一个作用域内不允许重复声明。

---

第二段代码报错原因：

const expr = 'Oranges';
switch (expr) {
  case 'Oranges':
    let a = 123; // 声明 a
    console.log('Oranges are $0.59 a pound.',a);
    break;
  case 'Papayas':
    a = 456; // ❌ 报错：变量 'a' 在声明前被使用
    console.log('Mangoes and papayas are $2.79 a pound.',a);
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`,a); // ❌ 报错：变量 'a' 未定义
}

原因：

1. 变量 a 的声明被限制在 case 'Oranges' 的代码块中。虽然 switch 的 case 共享作用域，但 a 的声明只有在 case 'Oranges' 执行时才会发生。
2. 如果 expr 的值是 'Papayas'，代码会直接跳转到 case 'Papayas'，此时 a 尚未声明，直接赋值 a = 456 会导致“变量在声明前使用”的报错。
3. default 分支中访问 a 时，如果 a 未被任何 case 声明（例如 expr 是其他值），也会导致“变量未定义”的错误。

解决方案：

TypeScript 的报错是由于 switch 语句的 case 共享作用域导致的变量重复声明或作用域不明确。通过统一声明变量或用 {} 隔离作用域即可解决。

方法 1：统一声明变量

在 switch 语句外部声明变量，避免重复声明或作用域问题：

const expr = 'Papayas';
let a: number; // 统一声明
switch (expr) {
  case 'Oranges':
    a = 123;
    break;
  case 'Papayas':
    a = 456;
    break;
  default:
    a = 0; // 处理默认值
}

方法 2：为每个 case 创建独立作用域

用 {} 包裹每个 case 的代码，强制创建独立块级作用域：

const expr = 'Papayas';
switch (expr) {
  case 'Oranges': {
    let a = 123; // 仅在此块内有效
    console.log('Oranges are $0.59 a pound.',a);
    break;
  }
  case 'Papayas': {
    let a = 456; // 独立的块级作用域，不会冲突
    console.log('Mangoes and papayas are $2.79 a pound.',a);
    break;
  }
  default: {
    console.log(`Sorry, we are out of ${expr}.`);
  }
}