章
目
录
本文主要讲解关于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），学习愉快哦！
