TypeScript中用变量访问对象键时前置非空校验不生效问题

• 这个差异本质是TypeScript控制流分析的规则限制：只有用静态字面量作为索引访问对象属性时，TypeScript才会认为前后两次访问的是同一个属性，此前的存在性校验结果才会被保留。
• 当你用字符串字面量"hello"访问state["hello"]时，TypeScript可以确定if校验块里后续的state["hello"]和校验时的访问目标完全一致，因此会自动把state["hello"]的类型从{ [fruit in Fruit]: { status: "ripe" | "rotten" } } | undefined收窄为非undefined的类型，不会报错。
• 当你用变量id作为索引访问时，即使id是用const定义的固定字符串，TypeScript的控制流分析目前也不会把两次state[id]的访问结果关联起来——它无法保证两次访问的索引没有发生变化（哪怕逻辑上确实没有变化），因此if块里第二次访问state[id]时，之前的收窄结果会失效，仍然保留undefined的可能性，就抛出了2532错误。

• 方案1：把索引访问的结果存为临时变量，对临时变量做存在性校验，收窄结果会直接作用在变量上，不会失效：

const id = "hello";
const targetState = state[id];
if (targetState) {
  targetState.apple.status = "ripe"; // 正常运行无报错
}

• 方案2：如果你确定此处state[id]必然存在，可以用非空断言!跳过校验：

if (state[id]) {
  state[id]!.apple.status = "ripe";
}

• 方案3：显式将变量id定义为字符串字面量类型，TypeScript就可以识别出两次访问的是同一个属性：

const id: "hello" = "hello";
if (state[id]) {
  state[id].apple.status = "ripe"; // 不会报错
}

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