如何在TypeScript中实现组件Props类型的关联依赖？

完全可以实现，你需要用联合类型的Props定义，而不是单一对象类型里的条件判断——单一对象里没法让onChange的类型和同对象的selection属性做关联。

具体做法是把两种场景拆成独立的Props类型，再合并成联合类型：

// 先定义你的Choice类型
type Choice = {
  value: string;
  label: string;
};

// 单选场景的Props
type SingleSelectionProps = {
  title: string;
  choices: Choice[];
  selection: 'one';
  onChange: (selected: Choice) => void; // 对应你说的someType
};

// 多选场景的Props
type MultipleSelectionProps = {
  title: string;
  choices: Choice[];
  selection: 'multiple';
  onChange: (selected: Choice[]) => void; // 对应你说的someOtherType
};

// 合并成组件的最终Props类型
type MyComponentProps = SingleSelectionProps | MultipleSelectionProps;

这样定义后，TypeScript会自动做类型关联：

• 当你传入selection: 'one'时，编辑器会强制onChange必须是接收单个Choice的函数
• 当你传入selection: 'multiple'时，onChange必须是接收Choice[]数组的函数

对比你之前用someType | someOtherType的方式，这种联合Props的写法能严格约束selection和onChange的类型匹配，不会出现选了单选但传了多选回调的错误情况。

举个使用示例：

// 组件内部可以自动做类型收窄
const MyComponent = (props: MyComponentProps) => {
  if (props.selection === 'one') {
    // 这里props.onChange的类型自动推断为(selected: Choice) => void
    props.onChange(props.choices[0]);
  } else {
    // 这里props.onChange的类型自动推断为(selected: Choice[]) => void
    props.onChange(props.choices);
  }
  return <div>{props.title}</div>;
};

// 错误用法会被TypeScript直接报错：
// 当selection是'one'时，onChange传数组回调会触发类型不匹配提示
const WrongUsage = () => {
  return (
    <MyComponent
      title="测试"
      choices={[{ value: '1', label: '选项1' }]}
      selection="one"
      onChange={(selected) => console.log(selected.map(item => item.label))} // 此处报错
    />
  );
};

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