软件教程 2025年08月6日
0 收藏 0 点赞 986 浏览 1966 个字
摘要 :

文章目录 ​关于prop–types Typescript的代替 最后的叮嘱 本文主要讲解关于React使用TypeScript替代prop-types相关内容,让我们来一起学习下吧! ​关于prop-types……




  • ​关于proptypes
  • Typescript的代替
  • 最后的叮嘱

本文主要讲解关于React使用TypeScript替代prop-types相关内容,让我们来一起学习下吧!

​关于prop-types

对于部分的同学,不大了解为什么我们的代码里面要用到prop-types这个库,对此需要先解释下这个库的历史。

很久很久以前,React在出来的时候,在对组件处理的时候,对props进行了校验,比如一个计算数字的子组件,对props的要求是必须都为数字,而如果传入的不是数字,就很容易报错,因此我们需要在组件内对props进行校验。

基于上述环境,React对props进行了类型约束,就如同现在的TS一样,对每一个参数都规定了类型,但是到后来的时候,就觉得这个比较鸡肋,也为了让React这个库没那么大,所以就将其划分出来,作为一个专属库,名为prop-types

所以,在prop-types的库中,有了下面这么一个描述

PropTypes 最初是作为 React 核心模块的一部分公开的,并且是 通常与 React 组件一起使用。 用法

既然现在prop-types已经是一个单独的库了,那么我们就要将其安装到我们的项目中,不过由于prop-types只在开发环境中奏效,所以只需要install -D即可。

\"prop-types\": \"^15.8.1\",

ok,在安装过了prop-types之后,再将用法写在下面

import PropTypes from \"prop-types\";
​
import { PureComponent } from \"react\";
class CPropsComponent extends PureComponent {
  static PropTypes = {
    propStr: PropTypes.string,
    propNum: PropTypes.number,
  };
​
  render() {
    const { propStr, propNum } = this.props;
    return (
      <>
        <span>str:{propStr}</span>
        <br />
        <span>number:{propNum}</span>
        <br />
      </>
    );
  }
}
export default CPropsComponent;


这样子,当我们传入两个参数的时候,就可以做出类型校验了。
但是呢,大人!!!!现在已经是2023年了,typescript已经不是加分项,而是必须项了!!!

Typescript的代替

前面提及到了,prop-types的作用是为了校验我们的props的类型!!这样子,我们就不得不提起一个牛逼的兄弟–Typescript。

我想大家都应该明白为啥一向严谨的我,在写prop-types的时候连一个效果展示图都不补贴出来了吧。。因为实在没必要。

接下来贴上一段用Typescript代替的代码

interface PropComponentProps {
  propStr: string;
  propNum: number;
}
​
​
function PropsComponent(props: PropComponentProps) {
  const { propStr = \"\", propNum = 0 } = props;
​
  return (
    <>
      <span>str:{propStr}</span>
      <br />
      <span>number:{propNum}</span>
      <br />
      <span>numObj</span>
    </>
  );
}
export default PropsComponent;


简单明了。。

最后再贴上一份关于类组件的代码,也只是设置了component的props类型而已,请看第二行开始

import { PureComponent } from \"react\";
class CPropsComponent extends PureComponent<{
  propNum: number;
  propStr: string;
}> {
  render() {
    const { propStr, propNum } = this.props;
    return (
      <>
        <span>str:{propStr}</span>
        <br />
        <span>number:{propNum}</span>
        <br />
      </>
    );
  }
}
export default CPropsComponent;

最后的叮嘱

其实,从prop-types的库只有js,就可以知道已经属于开始废弃了。

大人,时代变了,已经是属于TS的时代了。不信?React的文档是这么写的

我们建议使用 TypeScript 而不是在运行时检查 prop 类型。

以上就是关于React使用TypeScript替代prop-types相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6637.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号