如何解决为什么打字稿不能确保在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)上进行检查。此代码中的所有内容均正常运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。