使用typescript编写react的时候,props的interface和react本身的proptypes有什么关系
通常我们使用typescript来编写一个react组件的时候,
都会定义一个props的接口
类似于这样的
export interface AffixProps {
/**
* 距离窗口顶部达到指定偏移量后触发
*/
offsetTop?: number;
offset?: number;
/** 距离窗口底部达到指定偏移量后触发 */
offsetBottom?: number;
style?: React.CSSProperties;
/** 固定状态改变时触发的回调函数 */
onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 */
target?: () => Window | HTMLElement | null;
prefixCls?: string;
}
通过对typescript 对接口已经做了类型限制等。
同时,在react中提供了proptypes 对props做验证。
那么既然存在了interface,那么proptypes的作用是否可以忽略,或者说
proptypes是对interface的一种加强的呢?
这2者的关系怎么理解呢。
希望可以解惑~~
typescript 的类型检查是静态的,
prop-types
可以在运行时进行检查。
如果你传了个offsetTop="abc"
,你的编辑器可能会提示你类型有误,但是在浏览器里仍然是可以正常运行的。而如果你使用了prop-types
,在浏览器里就会给出提示。