TypeScript 错误类型“{}”缺少类型中的以下属性答案

【问题标题】：TypeScript Error Type '{}' is missing the following properties from typeTypeScript 错误类型“{}”缺少类型中的以下属性
【发布时间】：2021-01-05 06:28:09
【问题描述】：

我通常是 TypeScript 的新手，我收到了这个错误。

类型“{}”缺少类型“Pick': 加载用户，用户

上述错误出现在 App.text 中并指向<AppRouter/>

我很困惑为什么我会得到这个以及可能的解决方法是什么？我假设我没有在应用程序路由器中正确声明某些内容，但我似乎无法弄清楚我收到了什么错误或错误？

App.tsx

import AppRouter from './router/AppRouter'

const App: React.FC = () => {
  return (
    <Fragment>
      <AppRouter />
    </Fragment>
  )
}

export default App

应用路由器


import React, {ExoticComponent, Fragment, useEffect} from 'react'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import FreeTextView from '../components/analytics/dashboard/freeTextView/FreeTextView'
import {connect, useDispatch, useSelector} from 'react-redux'
import {Nav, IconSvgs} from '@pxhub/shared-components'
import {AppState, UserI, AccessRecordsI} from '../store/actions/Types'
import {loadUser} from '../store/actions/UserActions'

interface PropsI {
  loadUser: () => void
  user: UserI
}

// Defualt Page
const Page = () => {
  return (
    <Fragment>
      <Switch>
        <Route path="/freeview" component={FreeTextView} />
      </Switch>
    </Fragment>
  )
}

// App Router
export const AppRouter: React.FC<PropsI> = ({loadUser, user}: PropsI) => {
  const userAccess = user.accessRecords.map((accessRecord: AccessRecordsI) => {
    return accessRecord.Access_Transaction
  })

  useEffect(() => {
    loadUser()
  })

  return (
    <Fragment>
      <IconSvgs />
      <Nav
        user={user}
        userAccess={userAccess}
        urlPrefix={process.env.REACT_APP_URL_PREFIX}
      />
      <Router>
        <Switch>
          <Route path="/" component={Page} />
        </Switch>
      </Router>
    </Fragment>
  )
}

const dispatch = useDispatch()

const mapDispatchToProps = () => () => {
  dispatch(loadUser())
}
const mapStateToProps = useSelector((state: AppState) => state.user)

export default connect(mapStateToProps, mapDispatchToProps)(AppRouter)

【问题讨论】：

标签： reactjs typescript redux types

【解决方案1】：

我不确定 mapDispatchToProps 语法。

不应该是这样的吗？

const mapDispatchToProps = () => {
  dispatch(loadUser())
}

【讨论】：

【解决方案2】：

您将 AppRouter 声明为需要道具 loaduser 和 user，但随后您在 App.tsx 中调用它时没有使用这些道具。

编辑：虽然不是问题中确定的特定 TS 错误的原因，如 cmets 中所述，但结合 useSelector 和 mapStateToProps 或 useDispatch 和 mapDispatchToProps 也可能导致问题。这些天你可能只想使用钩子。

【讨论】：

我明白了，但我有来自 redux 的道具？
@Jack 我也认为你的 redux 配置是错误的。您将useSelector 和mapStateToProps 组合在一起（它们是替代品，不应组合在一起。）。还有mapDispatchToProps 和useDispatch。
好点。并且，对不起，我的意思是 useDispatch 在我的评论中。 @yaya 关于等价的观点是正确的。旁注：如果你想跨越使用 TS 和 redux 的桥梁（值得，恕我直言），redux 工具包使这变得更容易，尤其是本教程：redux-toolkit.js.org/tutorials/advanced-tutorial
@yaya 点是正确的，我们不应该同时使用 [useSelector 和 mapStateToProps]。我遇到了类似的问题，这就是 ts2740 警告的原因。您应该在此处将其添加为答案
@yaya，我认为这不是 OP 问题的原因或直接回应问题，但是我已经编辑了它。