React中使用TypeScript代替prop-types

原文链接

公众号-React中使用TypeScript代替prop-types

个人公众号，呜呜呜，求各位大佬们关注下，本人的公众号主要写React 跟NodeJs的

​关于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 类型。