原文鏈接
公眾號-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 類型。
