为何TypeScript在if条件内仍提示'data.st'可能为undefined？

下面的代码中，即便在if条件里判断了data.st存在，TypeScript依然报错'data.st' is possibly 'undefined'：

interface Data {
  st?: number;
}

let events = [{id: 1, st: 123}, {id: 2, st: 465}];

function test(data: Data) {
  if (data.st) {
    events = events.filter(
      (ce) => ce.st >= data.st, // 'data.st' is possibly 'undefined'.
    );
  }
}

问题原因 #

TypeScript的类型收窄在回调函数中会失效。虽然这里data是函数参数不会被外部修改，但TypeScript的类型检查器默认不会追踪回调执行时的上下文状态——它无法确保回调运行时data.st的状态和if判断时完全一致，因此不会把之前的类型收窄结果应用到回调内部。

解决方案 #

• 方案1：提取局部变量（推荐）
  把data.st赋值给一个局部变量，TypeScript会正确收窄这个变量的类型，回调中使用该变量即可：

function test(data: Data) {
  const st = data.st;
  if (st) {
    events = events.filter(
      (ce) => ce.st >= st,
    );
  }
}

• 方案2：非空断言
  如果你能100%确定data.st在回调执行时一定存在，可以用非空断言符!强制告诉TypeScript该值不为undefined：

function test(data: Data) {
  if (data.st) {
    events = events.filter(
      (ce) => ce.st >= data.st!,
    );
  }
}

⚠️ 注意：这种方式跳过了TypeScript的类型检查，后续代码逻辑变更可能引发运行时错误，需谨慎使用。

• 方案3：自定义类型守卫
  通过类型守卫函数明确标记data的类型，让TypeScript确认data.st一定存在：

function hasSt(data: Data): data is Data & { st: number } {
  return typeof data.st === 'number';
}

function test(data: Data) {
  if (hasSt(data)) {
    events = events.filter(
      (ce) => ce.st >= data.st,
    );
  }
}

这种方式更严谨，适合复杂场景下的类型校验。

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