TypeScript中如何根据variation类型约束size参数的可选值？

要实现variation与size的联动类型约束，你需要用联合类型替代单一接口，让TypeScript识别两种场景下的参数对应关系：

1. 定义联合类型的Props #

将TitleProps拆分为两个子类型的联合，分别对应title和subtitle场景：

type TitleProps = 
  | {
      body: string;
      id: string;
      variation: 'title';
      size: 's' | 'm' | 'l';
    }
  | {
      body: string;
      id: string;
      variation: 'subtitle';
      size: 'xl' | 'l' | 'm';
    };

2. 定义组件 #

直接使用联合类型作为组件参数类型（无需FC，避免默认children干扰）：

const Title = ({ body, id, size, variation }: TitleProps) => {
  // 组件内部可通过variation自动窄化size类型
  if (variation === 'title') {
    // 此处size类型自动推断为 's' | 'm' | 'l'
  } else {
    // 此处size类型自动推断为 'xl' | 'l' | 'm'
  }
  
  return <span id={id}>{body}</span>;
};

效果验证 #

当你使用组件时，TypeScript会自动校验参数匹配：

• 若variation="title"，size只能传入s/m/l
• 若variation="subtitle"，size只能传入xl/l/m
• 不匹配的组合会直接抛出类型错误

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