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

相关文章
|
1天前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
64 0
|
1天前
|
前端开发 定位技术 API
react+typescript接入百度地图
react+typescript接入百度地图
55 0
|
1天前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
48 0
|
1天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript与React的完美结合
【4月更文挑战第30天】React和TypeScript在前端开发中备受推崇。React以其组件化、高性能和灵活的生态系统引领UI构建,而TypeScript通过静态类型检查和面向对象特性增强了代码的健壮性和可维护性。两者结合,能提升开发效率,降低错误,使React组件结构更清晰。通过安装TypeScript,配置tsconfig.json,然后用TypeScript编写和打包代码,可实现两者的无缝集成。这种结合为前端开发带来更强的代码质量和团队协作效果,随着技术发展,其应用将更加广泛。
|
1天前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
1天前
|
前端开发 JavaScript
【掰开揉碎】react中的super(props)
【掰开揉碎】react中的super(props)
|
1天前
|
前端开发 JavaScript
详解React:Props构建可复用UI的基石
详解React:Props构建可复用UI的基石
17 0
|
1天前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
31 0
|
1天前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
19 1
|
JavaScript 前端开发 中间件
TypeScript在react项目中的实践
前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的实践以后,尝到了TS所带来的甜头,毫不犹豫的选择用TS+React来重构这个项目。
2266 0

热门文章

最新文章