React使用TypeScript替代prop-types

前端 潘老师 3个月前 (12-08) 59 ℃ (0) 扫码查看

本文主要讲解关于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.panziye.com/front/12299.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】