TypeScript 错误类型“”缺少类型中的以下属性
Posted
技术标签:
【中文标题】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)
【问题讨论】:
【参考方案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 问题的原因或直接回应问题,但是我已经编辑了它。以上是关于TypeScript 错误类型“”缺少类型中的以下属性的主要内容,如果未能解决你的问题,请参考以下文章
与 Typescript 反应 - 类型 缺少类型中的以下属性
VS Code 中的 Vue Array Prop JSDoc TypeScript 错误:“ArrayConstructor”类型缺少“MyCustomType []”类型中的以下属性
Typescript中的“无法调用类型缺少调用签名的表达式”?