TypeScript如何强制为空对象设兜底？如何用ESLint规避运行时错误

问题场景 #

我定义了以下TypeScript接口：

interface Data {
  news: News
}

由于data是从API获取的异步数据，初始状态为undefined，只有加载完成后才会返回有效结果。直接执行解构代码会触发运行时崩溃：

// App.tsx
const { news } = data;

报错信息：

TypeError: Cannot read property 'news' of undefined

改成const { news } = data ?? {};后问题解决，现在想搞清楚：

1. 能不能通过ESLint这类工具强制要求使用兜底写法？
2. 还有哪些其他方法可以预防这类问题再次发生？

一、用ESLint+TypeScript强制兜底逻辑 #

可以通过工具从编译/代码检查层面拦截这类问题：

• 开启TypeScript严格空检查：在tsconfig.json中设置"strictNullChecks": true，此时TypeScript会在编译阶段直接报错，提示data可能为undefined，必须添加兜底逻辑才能通过编译，从根源上避免运行时错误。
• 使用ESLint插件规则：安装@typescript-eslint/eslint-plugin，启用@typescript-eslint/no-unnecessary-condition配合自定义配置，或者编写简单的自定义ESLint规则——检测解构语句的源对象是否包含undefined/null类型，若未使用??兜底则抛出警告/错误。
• 借助eslint-plugin-unicorn的prefer-optional-chain：虽然该规则主要推荐可选链写法，但结合配置可以提醒开发者在解构可能为空的对象时添加兜底逻辑。

二、其他实用预防方案 #

• 直接用可选链+默认值：针对单个属性处理，写法更精准：

  const news = data?.news ?? defaultNewsData;
  

• 提前判断加载状态：在解构前先拦截未加载完成的情况，逻辑更清晰：

  if (!data) {
    return <LoadingComponent />;
  }
  const { news } = data;
  

• 初始化时设置默认值：在声明状态变量时就给兜底值，避免后续解构出错：

  const [data, setData] = useState<Data | undefined>({} as Data);
  

• 使用类型守卫：通过自定义类型守卫确保数据有效性后再解构：

  function isValidData(data: Data | undefined): data is Data {
    return !!data && 'news' in data;
  }
  
  if (isValidData(data)) {
    const { news } = data;
    // 业务逻辑处理
  }
  

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