在 Create React App 開啟 ESLint 的 propTypes 驗證

還不錯的東西。

簡述

想知道更詳細的介紹可以參考：

• React 官方文件
• Create React App 官方文件

ESLint 除了檢驗基本的 JS 語法以外，還有一個功能是檢查 React 中的 propTypes。顧名思義是用來檢查「Props 種類」的一項功能。

這邊會介紹一下要怎麼在 Create React App 的環境中打開這個功能。

先在根目錄建一個 .eslintrc 檔案，然後寫以下的內容：

{
  // 繼承原本的設定（預設值）
  "extends": "react-app",
  // 要新增的 ESLint 規則
  "rules": {
    "react/prop-types":  "warn"
  }
}

當設定為 warn 時，如果出現不合法的 code，ESLint 就會自動在 console 中印出 warning 訊息來提醒你。

（我預期會傳入 string 卻接收到 number）

添加 propTypes 的好處是別人要看 code 會比較方便，程式碼品質也會比較好，所以就試著遵守這些規則吧！

只要是會接收 props 的 Component，都可以在最下面加上它接收的 type：

// 引入的是大寫
import PropTypes from 'prop-types'

// propTypes 是小寫
TodoItem.propTypes = {
  // 物件可以用 shape 來描述的更詳細
  todo: PropTypes.shape({
    id: PropTypes.number,
    content: PropTypes.string,
    isDone: PropTypes.bool
  }), 
  handleRemoveTodo: PropTypes.func,
  handleToggleTodoState: PropTypes.func
}

如果接受多個 type 的寫法：

ErrorMessage.propTypes = {
  apiGetError: PropTypes.object,
  apiPostError: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object
  ]),
};