TypeScript条件组件Props配置：未传递withButton时如何触发TS的缺失属性报错

嘿，这个问题我之前也踩过坑！核心原因是你当前的联合类型定义存在模糊性：当withButton完全不传递时，TypeScript会判定它的类型为undefined，而你的两个分支都允许withButton是可选的（第一个分支是withButton?: true | undefined | ...，第二个是withButton?: false），所以TS会取两个分支的交集，导致buttonText的类型被宽松合并成string | undefined，自然不会触发必填校验。

我们可以通过调整联合类型的结构，强制未传递withButton的情况只能匹配需要buttonText的分支，具体修改如下：

type MyComponentProps = { isOpen: boolean } & (
  // 情况1：不传递withButton，或主动传withButton=true → 必须提供buttonText
  ({ buttonText: string } & Partial<{ withButton: true }>)
  // 情况2：明确传递withButton=false → buttonText不能存在（设为never）
  | { withButton: false; buttonText?: never }
);

const MyComponent: React.FC<MyComponentProps> = ({ withButton = true, buttonText }) => {
  return <></>;
};

const AnotherComponent = () => {
  // ❌ 现在TypeScript会报错：缺少必填属性buttonText
  return <MyComponent isOpen={false} />;

  // ✅ 这些情况都正常：
  // return <MyComponent isOpen={false} buttonText="Open" />;
  // return <MyComponent isOpen={false} withButton={true} buttonText="Open" />;
  // return <MyComponent isOpen={false} withButton={false} />;
};

为什么这样改有效？ #

• 第一个分支用Partial<{ withButton: true }>允许withButton可选（可以不传，也可以传true），但强制要求buttonText必填；
• 第二个分支把withButton设为必填的false，这样只有主动传递withButton={false}时才会匹配这个分支，此时buttonText被限制为never（不能传，传了会报错）；
• 当完全不传递withButton时，TS只能匹配第一个分支，因此会强制校验buttonText的存在性。

这样既保留了组件运行时withButton = true的默认值逻辑，又让TypeScript的类型检查完全符合你的预期啦！

备注：内容来源于stack exchange，提问作者jsardev