如何解决TypeScript中Object is possibly 'undefined'误报问题

TypeScript 的控制流类型收窄仅在当前函数作用域内生效，不会跨函数边界追踪入参属性和返回值之间的逻辑关联。你封装的getDataHandlerFeedback返回类型标注为undefined | string，TS 无法自动推导「返回值为undefined时入参dataHandler.data一定非undefined」的逻辑，因此后续访问data字段时仍会抛出可能为undefined的类型错误。

不需要手动重复写类型判断、不需要!非空断言、不需要ts-ignore注释，有两种原生TS方案可以解决这个问题：

方案1：返回绑定状态的联合类型（最稳妥，无类型兼容问题） #

把校验函数的返回值改成包含feedback和data两个字段的联合类型，将「加载提示存在」和「data不存在」、「加载提示不存在」和「data存在」的状态显式绑定，TS可以自动识别这种判别联合关系，完成类型收窄。
改造后的代码：

// 定义绑定状态的联合返回类型
type DataHandlerCheckResult<T> =
  | { feedback: string; data?: never }
  | { feedback?: never; data: T };

function getDataHandlerFeedback<T>(
  dataHandler: { data?: T },
): DataHandlerCheckResult<T> {
  if (dataHandler.data === undefined) {
    return { feedback: 'Loading...' };
  }
  return { data: dataHandler.data };
}

// 组件中使用
export default function ExampleComponent() {
  const myDataHandler = someSWRHook();
  const checkResult = getDataHandlerFeedback(myDataHandler);
  
  // 提前返回加载状态
  if (checkResult.feedback) {
    return checkResult.feedback;
  }
  
  // TS自动推导checkResult.data一定存在，无类型报错
  return checkResult.data.map(() => {});
}

方案2：函数重载（完全保留原有调用逻辑） #

通过TS函数重载特性，显式声明不同入参类型对应的返回值类型，让TS可以根据返回值反向收窄原入参的类型，不需要修改原有调用的代码结构：

// 重载签名：data不存在时返回加载提示字符串
function getDataHandlerFeedback(
  dataHandler: { data?: undefined }
): string;
// 重载签名：data存在时返回undefined
function getDataHandlerFeedback<T>(
  dataHandler: { data: T }
): undefined;
// 函数实现
function getDataHandlerFeedback(
  dataHandler: { data?: any }
): string | undefined {
  return dataHandler.data === undefined ? 'Loading...' : undefined;
}

// 组件中原逻辑无需改动
export default function ExampleComponent() {
  const myDataHandler = someSWRHook();
  const dataFeedback = getDataHandlerFeedback(myDataHandler);
  
  if (dataFeedback) {
    return dataFeedback;
  }
  
  // TS自动推导myDataHandler.data非undefined，无类型报错
  return myDataHandler.data.map(() => {});
}

注意：方案2依赖TS对重载返回值和入参关联的推导能力，在部分旧版本TS中可能存在收窄失效的情况，优先使用方案1兼容性更好。

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