在 React 中有內建的方法可以去定義傳入元件的 props 資料型別，這樣可以更清楚的瞭解傳入的各 props 的型別是什麼。

此外如果傳入的 props 型別和已經寫好的 propTypes 定義的型別不同的話，也會自動檢查並跳出錯誤訊息，避免一些意外的錯誤。

安裝

要使用 PropTypes 的話，需先安裝 prop-types

npm install --save prop-types

然後在會用到 prop-types 的檔案引入即可。

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

PropTypes 語法

語法相當簡單易懂，就是 JS 物件的寫法。

以下舉例，ComponentName 的部分替換成元件的名稱，每個 key 代表 component 定義的 prop 的名稱，每個 key 的 value 則定義 component prop 的型別

import PropTypes from 'prop-types';

ComponentName.propTypes = {
  propName: PropTypes.array,
  // ...
}

以下列舉許多判斷 props 的 JS 型別，我們也可以在型別後面加上 required，表示一定要有這個 prop

ComponentName.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 加上 isRequired
  optionalArray: PropTypes.array.isRequired,
}

PropTypes.node 用來檢查 prop 是否是可以被 React render 的型別，包括以下幾種:

• React elements
• Fragment
• numbers
• strings
• array

ComponentName.propTypes = {
  optionalNode: PropTypes.node,
}

檢查 prop 是否為 React element:

ComponentName.propTypes = {
  optionalElement: PropTypes.element,
}

檢查 prop 是否是元件的名字:

ComponentName.propTypes = {
  optionalElementType: PropTypes.elementType,
}

檢查 prop 是否為某個 class 的 instance:

ComponentName.propTypes = {
  optionalMessage: PropTypes.instanceOf(Message),
}

PropTypes.oneOf() 用來檢查 prop 是否為陣列內指定的值之一:

ComponentName.propTypes = {
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
}

用來檢查 prop 是否為陣列內指定的型別之一:

ComponentName.propTypes = {
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
}

用來檢查 prop 是否為指定型別組成的陣列，以下範例可以檢查是不是由數字組成的陣列:

ComponentName.propTypes = {
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
}

用來檢查 prop 是否為指定型別組成的物件:

ComponentName.propTypes = {
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
}

用來檢查 prop 是否為指定 key 組成的物件:

ComponentName.propTypes = {
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
}

用來檢查 prop 是否為指定 key 組成的物件，且此物件不可以有額外的 key。如果有額外的 key，React 就會顯示警告:

ComponentName.propTypes = {
  optionalObjectWithStrictShape: PropTypes.exact({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
}

代表一個 prop 可以是任意的內容:

ComponentName.propTypes = {
  requiredAny: PropTypes.any.isRequired,
}

Component 的 children 也可以被檢查，以下為範例:

ComponentName.propTypes = {
  children: PropTypes.number
}

DefaultProps

如果 props 裡面沒有傳 propTypes 設定的檢查值的時候，就會將 DefaultProps 的值當作 props 的預設值。

使用範例如下:

function ComponentName(props) {
  return <div>{props.name}</div>
}

ComponentName.propTypes = {
  name: PropTypes.string,
}

ComponentName.defaultProps = {
  name: 'Harry',
}

參考資料

I Want To Know React - PropTypes & DefaultProps

PropTypes in React: A complete guide