如何在TypeScript中实现含互斥字段的AuthBtn接口？

要实现link和onClick二选一、同时必须包含text字段的接口，可以通过联合类型+交叉类型的方式，明确限定合法的字段组合，同时排除非法组合：

// 定义必须存在的text字段基础类型
type AuthBtnBase = {
  text: string;
};

// 仅允许link + text的按钮类型，禁用onClick
type AuthBtnWithLink = AuthBtnBase & {
  link: string;
  onClick?: never;
};

// 仅允许onClick + text的按钮类型，禁用link
type AuthBtnWithOnClick = AuthBtnBase & {
  onClick: (p1?: object, p2?: object) => void;
  link?: never;
};

// 最终的联合类型，二选一生效
export type AuthBtn = AuthBtnWithLink | AuthBtnWithOnClick;

效果说明 #

• 合法场景：只能同时存在link+text，或onClick+text
• 非法场景：同时传入link和onClick会触发TypeScript报错；缺少text也会报错

示例验证 #

// ✅ 合法：带链接的按钮
const linkBtn: AuthBtn = {
  link: '/login',
  text: '登录'
};

// ✅ 合法：带点击事件的按钮
const clickBtn: AuthBtn = {
  onClick: (p1, p2) => console.log('按钮点击'),
  text: '注册'
};

// ❌ 非法：同时包含link和onClick，TS报错
const invalidBtn: AuthBtn = {
  link: '/home',
  onClick: () => {},
  text: '返回首页'
};

// ❌ 非法：缺少text字段，TS报错
const missingTextBtn: AuthBtn = {
  link: '/about'
};

这种方式通过never类型限制了不允许出现的字段，确保接口的字段组合严格符合需求。

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