为什么打字稿不能确保在React中添加其他属性的通用高阶组件中的类型安全？

问题描述

我正在尝试创建通用的高阶组件，并且未检查类型安全性。当执行相同操作但不是通用方法时，将按预期检查类型安全。

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
}

可以找到演示here

如何正确检查Typescript类型？

解决方法

一切正常，打字稿就对了。上面已经声明了Base组件，它的类型为IBaseProps。这就是为什么它显示错误的原因。

酒吧有

React.ComponentType<T & IExtraProps> 

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

其他人也有T＆IExtraProps类型。 将鼠标悬停在任意一个（bar，baz，foo，bag）上进行检查。此代码中的所有内容均正常运行。