如何在React中创建类型谓词检查两种setState类型？

我定义了如下Props接口，其中从父组件传递的setSelected有两种Dispatch类型，现在需要创建一个类型谓词来判断当前它属于哪一种：

interface Props {
  name: 'a' | 'b';
  id: string;
  disabled: boolean;
  mainGroup: string;
  currentGroup: (a| b)[] | null;
  // 选中状态
  selected: InitialAState | InitialBState;
  setSelected: React.Dispatch<React.SetStateAction<InitialAState>> | 
  React.Dispatch<React.SetStateAction<InitialBState>>;
  
}

我尝试写了类型谓词，但不知道怎么检查函数类型：

const isSetSelectedA = (setSelected: any): setSelected is React.Dispatch<React.SetStateAction<InitialAState>>  => {
  return setSelected // 如何检查函数类型？
};

核心解决思路：借助关联字段判断，而非直接检查函数本身 #

在JavaScript/TypeScript中，React的Dispatch这类包装后的函数无法通过运行时直接区分类型——它们本质都是普通函数，没有额外标识。但你的Props里存在和setSelected强关联的字段，可以通过这些字段间接判断：

方案1：结合name字段判断

因为name取值为'a'时，setSelected必然对应InitialAState的Dispatch类型，直接通过name值即可推断：

const isSetSelectedA = (props: Props): props.setSelected is React.Dispatch<React.SetStateAction<InitialAState>> => {
  return props.name === 'a';
};

方案2：结合selected字段判断

如果InitialAState和InitialBState有明确的运行时区分特征（比如独有属性），可以先判断selected的类型，再反向推断setSelected：

// 先判断selected的类型
const isInitialAState = (state: InitialAState | InitialBState): state is InitialAState => {
  // 假设InitialAState有独有的标识属性type，值为'a'
  return (state as InitialAState).type === 'a';
};

// 通过selected推断setSelected类型
const isSetSelectedA = (props: Props): props.setSelected is React.Dispatch<React.SetStateAction<InitialAState>> => {
  return isInitialAState(props.selected);
};

不推荐方案：单独检查setSelected函数

如果必须脱离Props单独判断setSelected，只能通过尝试调用并捕获错误，但这种方式有副作用且不优雅，仅作参考：

const isSetSelectedA = (setSelected: any): setSelected is React.Dispatch<React.SetStateAction<InitialAState>> => {
  try {
    // 传入符合InitialAState类型的测试值，验证是否可正常执行
    setSelected((prev: InitialAState) => prev);
    return true;
  } catch (e) {
    return false;
  }
};

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