TypeScript中如何实现与指定类型的可选交叉类型定义

这种要求两个属性要么同时传入、要么完全不传入的场景，核心是用联合类型做分支互斥，不要直接用Partial包装Action类型——Partial会把两个属性拆成独立可选项，允许只传其中一个，不符合约束要求。

基础实现 #

你期望的「可选引入完整Action」的效果可以直接这么写：

type Action = { actionText: string, onClick: VoidFunction }

type MyComponentType = { title: string } & (Action | {})

这个写法完全满足规则：

• 不传actionText和onClick时，匹配联合类型的{}分支，类型校验通过
• 同时传入actionText和onClick时，匹配Action分支，类型校验通过
• 只传其中任意一个Action属性时，TS会直接报类型错误，提示缺少另一个必填属性

更严谨的生产环境写法 #

如果需要更强的类型约束，避免拼写错误等场景下的漏判，可以把无Action的分支显式声明为Action字段均不存在，约束精度更高：

type MyComponentType = { title: string } & (
  Action | { [K in keyof Action]?: never }
)

这种写法下，如果你误把onClick拼成onclick、或者只传了单个Action属性，TS都会精准抛出错误，不会出现类型漏判。

避坑提醒 #

不要用下面这种错误写法：

// ❌ 错误：两个属性独立可选，允许只传一个
type BadType = { title: string } & Partial<Action>

这种写法完全失去了两个属性的绑定关系，不符合需求。

组件使用示例 #

// ✅ 合法：无交互能力
<MyComponent title="提示信息" />

// ✅ 合法：带完整交互能力
<MyComponent
  title="提示信息"
  actionText="确认"
  onClick={() => console.log('确认操作')}
/>

// ❌ 类型报错：只传了actionText，缺少onClick
<MyComponent title="提示信息" actionText="确认" />

// ❌ 类型报错：只传了onClick，缺少actionText
<MyComponent title="提示信息" onClick={() => {}} />

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