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;