将 react-redux useSelector 与打字稿一起使用答案

【问题标题】：Use react-redux useSelector with typescript将 react-redux useSelector 与打字稿一起使用
【发布时间】：2019-10-06 23:22:00
【问题描述】：

当尝试使用 react-redux typescript 的新的 useSelector 钩子（见下面的例子）时，会出现函数不存在的错误：

Module '"../../../node_modules/@types/react-redux"' has no exported member 'useSelector'.  TS2305

示例：

import * as React from "react"
import { useSelector } from "react-redux"
import { Message } from "./Message"

export const MessageContainer = () => {
  const searchValue = useSelector((state) => state.search)
  return (
    <Message searchValue={searchValue} />
  )
}

使用过的版本： "react-redux": "^7.1.0-alpha.5" "@types/react-redux": "^7.0.9"

【问题讨论】：

Typescript 尚未更新。您正在使用具有 7.0.9 版本的 @types/react-redux。这些钩子是在 7.1.0 中添加的。
目前是最新版本的类型，有没有什么办法可以导入函数避免报错？
显然可以通过自己添加模块定义来临时修复：github.com/DefinitelyTyped/DefinitelyTyped/pull/…

标签： reactjs typescript redux react-redux react-hooks

【解决方案1】：

以下代码取自关于 typescript 的 redux 文档本身
typescript redux offical

interface RootState {
      isOn: boolean
    }

// TS infers type: (state: RootState) => boolean
const selectIsOn = (state: RootState) => state.isOn

// TS infers `isOn` is boolean
const isOn = useSelector(selectIsOn)

正如它在稍后添加挂钩之前所说的那样，但是如果您使用挂钩，最好这样编写 Selector

【讨论】：