React中基于isLoading的TypeScript组件Props必选/可选配置问题

问题分析 #

你当前的类型定义无法限制isLoading={false}时必须传入data，核心原因是之前的联合类型中，isLoading: boolean分支包含了false的情况，而该分支允许data可选，导致不符合预期的场景通过了校验。

正确的类型定义方案 #

我们需要将Props拆分为三种明确的场景，确保每种场景都严格匹配你的校验规则：

type Data = {
  balance: number;
};

// 拆分三种合法的Props场景
type AccountInfoCardProps = 
  // 1. 加载状态：isLoading为true，data可选
  { isLoading: true; data?: Data } 
  // 2. 显式非加载状态：isLoading为false，必须传data
  | { isLoading: false; data: Data } 
  // 3. 隐式非加载状态：不传isLoading，必须传data
  | { isLoading?: never; data: Data };

function AccountInfoCard(props: AccountInfoCardProps) {
  const { data, isLoading } = props;

  if (isLoading) {
    return <Text>Loading...</Text>;
  }

  // 此时TypeScript能自动推断出data一定存在，无需可选链
  return <Text>{data.balance}</Text>;
}

规则匹配验证 #

这个类型定义完全满足你的所有需求：

• 必须传入isLoading或data其中一个：若两者都不传，会直接触发类型错误
• 传入isLoading={false}时必须同时传入data：单独传isLoading={false}会不匹配任何合法分支，触发报错
• 传入isLoading（任意布尔值）时data可选：isLoading=true时data可选，isLoading=false时强制要求data，符合规则
• 传入data时isLoading可选：第三种分支允许只传data，也可同时传任意布尔值的isLoading
• 同时传入isLoading和data合法：所有分支都支持同时传入两个属性

为什么之前的写法不生效 #

你之前的联合类型中，第一个分支{ isLoading: boolean; data?: Data }包含了isLoading=false的情况，此时data被标记为可选，所以单独传isLoading={false}会匹配该分支，不会触发错误。拆分isLoading的布尔值为true和false两个明确分支后，就能精准控制每种场景的属性要求。

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