對React-Select事件處理程序進行嚴格設置的TypeScript編譯錯誤

Question

我正在用tsconfig.json strict: true在TypeScript中編寫React組件。

在package.json給出以下內容：

"devDependencies": {
    "@babel/cli": "^7.0.0-rc.1",
    "@babel/core": "^7.0.0-rc.1",
    "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@babel/preset-react": "^7.0.0-rc.1",
    "ajv": "^6.5.2",
    "awesome-typescript-loader": "^5.2.0",
    "babel-loader": "^8.0.0-beta.4",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "reactstrap": "^6.3.1",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.21.0",
    "typescript": "^3.1.1",
    "webpack": "^4.16.4",
    "webpack-command": "^0.4.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
    "@fortawesome/react-fontawesome": "0.1.0-11",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "@types/react-select": "^2.0.4",
    "@types/reactstrap": "^6.4.0",
    "bootstrap": "^4.1.3",
    "immutable": "^4.0.0-rc.9",
    "npm": "^6.4.1",
    "react-compound-slider": "^0.15.0",
    "react-select": "^2.0.0",
    "rxjs": "^6.2.2"
  }

我發現僅在strict模式下出現的react-select事件處理程序錯誤。

這是react-select組件：

<Select options={options}
        isMulti={true}
        onChange={this.props.handler(this.props.name)} />

道具中的處理函數是經過咖喱處理的，具有以下形狀：

handler: (s: string) => (o: Array<Option>) => void

其中Option是行人集裝箱。

export interface Option {
    value: string
    label: string
}

編譯錯誤是這樣的：

TS2322: Type '(o: Option[]) => void' is not assignable to type '(value:
              ValueType<Option>, action: ActionMeta) => void'.

如前所述， strict之前沒有任何問題。

您能解釋一下這里的問題以及如何解決嗎？

Answer 1

正如您在錯誤消息中看到的那樣， react-select傳遞給處理程序的第一個參數的類型為ValueType<Option> ； 如果查看ValueType和OptionsType的定義，您會看到它會擴展為Option | Option[] | null | undefined Option | Option[] | null | undefined Option | Option[] | null | undefined 。 啟用strictFunctionTypes （ strict一部分）時，需要您的處理函數接受react-select或超類型（更通用的類型）傳遞的類型。 特別是，您的處理函數必須接受Option以及Option[] 。 如果另外啟用strictNullChecks （也是strict一部分），則處理程序函數還必須處理null和undefined 。

如果沒有strictFunctionTypes ，則允許處理程序接受ValueType<Option>的子類型，盡管這是不合理的，因為react-select可能會將其無法處理的參數傳遞給處理程序。 有關更多信息，請參見此手冊頁面 。