reactjs - 为什么 typescript 不能确保在 React 中添加额外属性的通用高阶组件中的类型安全？

Question

我正在尝试创建一个通用的高阶组件，但未检查类型安全。当以非通用方式执行相同操作时，会按预期检查类型安全。

interface IBaseProps {
  baseValue?: string;
}

const Base = (props: IBaseProps) => {
  return <span>{"value: " + props.baseValue}</span>;
};

interface IExtraProps {
  extraValue?: string;
}

const foo = <T extends IBaseProps>(
  Element: React.ComponentType<T>
): React.ComponentType<T & IExtraProps> => (props: T & IExtraProps) => {
  const baseValue = `${props.baseValue} extra value: ${props.extraValue}`;
  return <Element {...props} baseValue={baseValue} />; // example
};

const bar = <T extends IBaseProps>(
  Element: React.ComponentType<T>
): React.ComponentType<T & IExtraProps> => (props: T & IExtraProps) => {
  return <Element {...props} baseValue={42} />; // NO error, why?
};

const baz = <T extends IBaseProps>(
  Element: React.ComponentType<T>
): React.ComponentType<T & IExtraProps> => (props: T & IExtraProps) => {
  return <Element {...props} unknownProp={42} />; // NO error, why?
};

const bag = (props:IBaseProps) => {
  const baseValue = props.baseValue + ' augmented'
  return <Base {...props} baseValue={42} />; // ok, error is detected
}

可以找到Demo here

如何让Typescript正确检查类型？

Answer 1

typescript 一切正常。 Base 组件已在上面声明，并且具有 IBaseProps 的类型。这就是它显示错误的原因。

酒吧里有

React.ComponentType<T & IExtraProps> 

它基本上意味着 T 可以是任何类型。所以它没有显示任何错误。

其他的也有 T & IExtraProps 类型。通过将鼠标悬停在其中任何一个(bar、baz、foo、bag)上来检查它。在此代码中一切正常。