Ошибка компиляции TypeScript со строгими настройками в обработчике реагирования на выбор

Question

Я пишу компонент React в TypeScript с strict: true в tsconfig.json.

Учитывая следующее в 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)} />

Функция обработчика в подпорках карри и имеет эту форму:

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 может передать обработчику аргумент, который он не может обработать.См. эту страницу руководства для получения дополнительной информации.