TypeScript空值校验后仍报参数类型含undefined|null错误

现有代码如下：

if (!context) {
  alertStore.SET_GLOBAL_ALERT({
    color: "red",
    text: "Cannot get context of chart",
    show: true,
    loading: false,
  });
  return;
}
let sets = usersDatapoints.map(({ data }) => {
  return getDatasets(data, context, gradientHeight, borderWidth).consumption
})

getDatasets调用处触发TypeScript类型校验错误：getDatasets函数期望接收CanvasRenderingContext2D类型的context参数，但TypeScript判定实际传入的context为CanvasRenderingContext2D | undefined | null联合类型。
代码已经在调用getDatasets前通过if(!context) { ... return }做了空值拦截：context为空时会提前返回终止执行，不会走到后续逻辑，但TypeScript依然没有识别到此处的类型收窄结果。

TypeScript的控制流类型收窄不会跨函数边界生效。
前面的空值判断仅对当前外层作用域下、顺序执行的同步代码有效。而Array.map传入的箭头函数是独立的闭包函数，TypeScript无法静态保证这个回调执行时，外层的context变量不会被其他逻辑重新赋值为null或undefined——哪怕实际业务中不存在修改context的代码，TS的静态分析也不会跨函数追溯变量的类型状态，毕竟JavaScript中回调的执行时机、变量的外部修改本身就无法通过静态分析100%确定。

• 方案1：空值校验后，将context赋值给const声明的局部变量，在回调中使用该局部变量。const声明的变量不可重新赋值，TypeScript可以确定它的类型从赋值完成后就不会发生变化，空值校验的收窄结果会被保留：

if (!context) {
  alertStore.SET_GLOBAL_ALERT({
    color: "red",
    text: "Cannot get context of chart",
    show: true,
    loading: false,
  });
  return;
}
// 此处ctx的类型已经被收窄为CanvasRenderingContext2D
const ctx = context;
let sets = usersDatapoints.map(({ data }) => {
  return getDatasets(data, ctx, gradientHeight, borderWidth).consumption
})

• 方案2：使用非空断言操作符!，明确告知TypeScript该位置的context一定不为空。注意该方式是人工做类型担保，需要确保实际逻辑确实不会出现空值，避免埋下类型安全隐患：

let sets = usersDatapoints.map(({ data }) => {
  return getDatasets(data, context!, gradientHeight, borderWidth).consumption
})

• 方案3：在map的回调函数内部再增加一层空值校验，不过这种写法会产生冗余判断，一般不推荐。

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