typescript编写react的时候,props的interface和react本身的proptypes有什么关系

使用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,在浏览器里就会给出提示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值