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

简介: 使用typescript编写react的时候,props的interface和react本身的proptypes有什么关系 通常我们使用typescript来编写一个react组件的时候, 都会定义一个props的接口 类似于这样的: export interface AffixProps { .

使用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者的关系怎么理解呢。
希望可以解惑~~

ypescript 的类型检查是静态的,prop-types 可以在运行时进行检查。
你如你传了个 offsetTop="abc",你的编辑器可能会提示你类型有误,但是在浏览器里仍然是可以正常运行的。而如果你使用了 prop-types,在浏览器里就会给出提示。

相关文章
|
4月前
|
JavaScript API C++
TypeScript 核心概念:`type` vs `interface`,如何明智选择?
TypeScript 核心概念:`type` vs `interface`,如何明智选择?
|
6月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
285 62
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
172 7
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
188 0
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
305 106
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
287 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
297 16
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props
130 8
|
前端开发
react学习(14)类式组件的构造器与props
react学习(14)类式组件的构造器与props
147 6