在 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"
  }

我发现 react-select 的事件处理程序有一个错误，它只出现在 strict 模式下。

这是 react-select 组件：

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

props 中的处理函数是柯里化的，具有以下形状：

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。当您启用 strictFunctionTypes（它是 strict 的一部分）时，您的处理函数需要接受由 react-select 或超类型（更通用的类型）传递的类型。特别是，您的处理程序函数必须接受 Option 以及 Option[]。如果您另外启用 strictNullChecks（这也是 strict 的一部分），那么您的处理函数还必须处理 null 和 undefined.

没有 strictFunctionTypes，允许处理程序接受 ValueType<Option> 的子类型，尽管这是不合理的，因为 react-select 可以向处理程序传递它无法处理的参数.有关详细信息，请参阅 this handbook page。

在 react-select 事件处理程序上使用严格设置的 TypeScript 编译错误

TypeScript Compile Error with Strict Setting on react-select Event Handler

javascript

arrays

typescript

reactjs

react-select