如何用TypeScript根据React组件的一个属性设置另外两个属性的可选性？

这是个非常实用的类型约束场景，我们可以通过**联合类型（Union Types）**结合TypeScript的工具类型来精准实现你想要的逻辑，让编译器帮你强制执行这个规则。

解决方案代码 #

直接上可以落地的实现：

import React from 'react';

// 拆分类型让逻辑更清晰
type WithMessage = Readonly<{
  message: React.ReactNode;
} & Partial<{
  a: React.ReactNode;
  b: React.ReactNode;
}>>;

type WithoutMessage = Readonly<{
  message?: never; // 表示不能传入message属性（或只能传undefined）
} & Required<{
  a: React.ReactNode;
  b: React.ReactNode;
}>>;

// 最终的Props类型是两个场景的联合
type Props = WithMessage | WithoutMessage;

const Component = ({ message, a, b }: Props) => (
  <div>
    {message && <p>{message}</p>}
    {a && <p>{a}</p>}
    {b && <p>{b}</p>}
  </div>
);

逻辑解释 #

我们把需求拆成了两个明确的场景：

1. 当message存在时：用WithMessage类型，message设为必填，同时通过Partial把a和b转为可选属性
2. 当message不存在时：用WithoutMessage类型，message?: never确保这个属性要么不传入，要么只能传undefined；同时通过Required把a和b设为必填属性

通过联合这两个类型，TypeScript会自动在编译时检查传参是否符合其中一个场景：

• 合法用法：

  // 有message，a和b可选（可以传也可以不传）
  <Component message="欢迎使用" />
  <Component message="欢迎使用" a="属性A" />
  
  // 无message，必须传a和b
  <Component a="属性A" b="属性B" />
  

• 非法用法（TypeScript会直接报错）：

  // 无message但缺少a
  <Component b="属性B" />
  
  // 无message但缺少b
  <Component a="属性A" />
  

简化写法（适合简单场景） #

如果你觉得拆分类型太繁琐，也可以直接写一个联合类型，效果完全一致：

type Props = Readonly<
  | { message: React.ReactNode; a?: React.ReactNode; b?: React.ReactNode }
  | { message?: never; a: React.ReactNode; b: React.ReactNode }
>;

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