如何在单个React组件中切换两种Prop类型并保留向后兼容性

解决方案 #

1. 优化对外API类型定义 #

你原来的Props联合类型可以简化为以下可辨识联合结构，天然支持flag可选的向后兼容要求：

// 假设RG和RGIC为已有类型
type Props = 
  | {
      x: string;
      y: string;
      flag?: false;
      query?: RG;
      func(q: RG): void;
    }
  | {
      x: string;
      y: string;
      flag: true;
      query?: RGIC;
      func(q: RGIC): void;
    };

用户不传flag或者传false时会自动匹配第一个分支，传true时匹配第二个分支，完全符合兼容要求。你也可以用函数重载的方式定义对外组件，类型提示会更清晰：

// 对外组件重载
export function Component(props: { x: string; y: string; query?: RG; func(q: RG): void; flag?: false }): JSX.Element;
export function Component(props: { x: string; y: string; query?: RGIC; func(q: RGIC): void; flag: true }): JSX.Element;
export function Component(props: Props) {
  return ComponentImpl({ ...props, flag: props.flag ?? false });
}

2. 解决内部组件类型报错问题 #

核心思路是用泛型关联query、func参数和内部状态root的类型，不需要类型断言就能实现完全类型安全：

// 内部实现用泛型关联类型
function ComponentImpl<T extends RG | RGIC>(props: {
  flag: boolean;
  x: string;
  y: string;
  query?: T;
  func: (q: T) => void;
}) {
  // 根据flag初始化对应类型的默认值
  const defaultQuery = (props.flag ? { rules: [] } : { combinator: 'and', rules: [] }) as T;
  const [root, setRoot] = useState<T>(props.query ?? defaultQuery);

  useEffect(() => {
    func(root); // 无类型报错，泛型已保证类型匹配
  }, [root, func]);

  return <div>{props.flag ? 'True' : 'False'}</div>;
}

如果不想改内部组件的结构，也可以用简化的类型断言处理报错，因为你已经在对外层保证了flag和func、query的类型匹配：

useEffect(() => {
  func(root as Parameters<typeof func>[0]);
}, [root, func])

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