如何在TypeScript中定义关联必填的接口属性？

要让icon和onPressIcon这两个属性要么同时填写，要么都不使用，不能只选其中一个，你可以用TypeScript的联合类型来实现，具体方案如下：

核心实现：拆分接口为联合类型 #

把原有的属性拆成两个独立接口，再通过联合类型组合，让TypeScript自动校验属性的关联性：

// 基础属性：仅保留必选的 onPressAll
interface BaseMyProps {
  onPressAll: () => void;
}

// 带图标的属性：必须同时包含 icon 和 onPressIcon
interface WithIconProps extends BaseMyProps {
  icon: ImageSourcePropType;
  onPressIcon: () => void;
}

// 最终的组件Props是两个接口的联合类型
type MyProps = BaseMyProps | WithIconProps;

效果验证 #

现在组件调用时，TypeScript会严格检查属性是否符合要求：

错误示例（触发类型报错）

只传icon不传onPressIcon：

<MyComponent
   onPressAll={() => {}}
   icon={myIcon}
/>
// 报错：缺少 onPressIcon，不符合 WithIconProps 的要求

只传onPressIcon不传icon：

<MyComponent
   onPressAll={() => {}}
   onPressIcon={() => {}}
/>
// 报错：缺少 icon，不符合 WithIconProps 的要求

正确示例（无报错）

仅传基础属性：

<MyComponent
   onPressAll={() => {}}
/>
// 匹配 BaseMyProps，正常通过

同时传所有关联属性：

<MyComponent
   onPressAll={() => {}}
   onPressIcon={() => {}}
   icon={myIcon}
/>
// 匹配 WithIconProps，正常通过

扩展说明 #

如果后续需要新增更多关联属性（比如iconSize和iconColor必须同时存在），只需要新增对应的接口并加入联合类型即可，这种方式灵活且完全符合TypeScript的类型检查逻辑。

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