React+TypeScript中如何定义关联value与setValue的联合Props类型

问题原因 #

你当前定义的Props是AnimalVersion | CatVersion联合类型，TypeScript无法将value和setValue的类型做关联绑定——它不知道当前props属于联合类型的哪一个分支，因此setValue会被推断为两种Dispatch的联合类型，传入参数需要同时满足Animal和Cat的类型约束，所以会提示缺少typeOfCat属性的报错。
哪怕你手动判断value有typeOfCat属性来收缩类型，TypeScript也无法同步推断setValue对应的是Cat版本的Dispatch，所以联合类型的写法天然不适合这个场景。

解决方案 #

直接把组件改写为泛型组件，用泛型约束绑定value和setValue的类型，保证二者始终配对：

import React from "react";
import { Animal } from "./AnimalAndCatTypes";

// 泛型Props，约束T必须继承自Animal，value和setValue绑定同一个T类型
interface Props<T extends Animal> {
  value: T;
  setValue: React.Dispatch<React.SetStateAction<T>>;
}

// 组件定义为泛型组件
const ChangeSpecies = <T extends Animal>(props: Props<T>): JSX.Element => {
  const { value, setValue } = props;

  const handleChange = (data: string) => {
    // TS可以正确识别value是T类型，展开后加type字段依然满足T的约束
    setValue({ ...value, type: data });
  };

  return (
    <form>
      <label>
        <input
          type="text"
          value={value.type}
          onChange={(data) => handleChange(data.target.value)}
        />
      </label>
    </form>
  );
};

export default ChangeSpecies;

方案优势 #

1. 不需要手动写类型守卫做类型收缩，TS可以自动完成类型推断
2. 天然保证value和setValue是同一类型配对，调用方传错类型会直接触发TS校验报错
3. 扩展性强，后续如果新增其他继承Animal的子类型（比如Dog），不需要修改Props类型定义，直接就能复用组件
4. 调用侧的ExampleComponent代码不需要做任何修改，TypeScript会自动根据传入的value类型推断泛型T的具体值，保证类型校验正常。

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