Redux useSelector with Typescript:为什么对象是 'unknown' 类型?
Redux useSelector with Typescript: Why is the object of type 'unknown'?
我一直在阅读有关将 Redux 与 Typescript 结合使用的文档,我认为我的一切都正确,但我的编译器无论如何都会抱怨。
这是有问题的行:
// Widget.tsx
const error = useTypedSelector(state => state.error.widgetError)
// ^
// Object is of type 'unknown'. TS2571
useTypedSelector
是 docs 自定义挂钩推荐的,因此您不必在使用选择器时将 state
类型转换为 RootState
。
// store.ts
export type RootState = ReturnType<typeof store.getState>
// hooks.ts
import { TypedUseSelectorHook, useSelector } from 'react-redux'
import { RootState } from './store'
export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector
我不明白这是什么问题。我的整个状态树都是类型化的,回调中的 state
参数也是如此。将鼠标悬停在 VS Code 中的对象上可以确认这一点。
我试过各种类型转换来绕过它,我仍然遇到同样的错误。
const error = useSelector((state: RootState) => state.error.widgetError) // no
const error = useSelector<RootState, string | null>(state => state.error.widgetError) // nup
const error = useTypedSelector(state => (state as RootState).error.widgetError) // nuh-uh
唯一有效的方法是添加 @ts-ignore
,但这种做法使使用 typescript 开始的目的达到了一半。
在这一点上,我既没有聪明的想法也没有愚蠢的想法。请停一下?
如果定义了 RootState,那么 const error = useSelector((state) => state.error).widgetError; 将完成工作
我无法在 codesandbox 上重现此问题,也无法在使用 typescript 模板的新 React 应用程序中重现此问题。这很可能是由于(错误地?)将 ts 添加到现有的 js react 应用程序引起的。
我一直在阅读有关将 Redux 与 Typescript 结合使用的文档,我认为我的一切都正确,但我的编译器无论如何都会抱怨。
这是有问题的行:
// Widget.tsx
const error = useTypedSelector(state => state.error.widgetError)
// ^
// Object is of type 'unknown'. TS2571
useTypedSelector
是 docs 自定义挂钩推荐的,因此您不必在使用选择器时将 state
类型转换为 RootState
。
// store.ts
export type RootState = ReturnType<typeof store.getState>
// hooks.ts
import { TypedUseSelectorHook, useSelector } from 'react-redux'
import { RootState } from './store'
export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector
我不明白这是什么问题。我的整个状态树都是类型化的,回调中的 state
参数也是如此。将鼠标悬停在 VS Code 中的对象上可以确认这一点。
我试过各种类型转换来绕过它,我仍然遇到同样的错误。
const error = useSelector((state: RootState) => state.error.widgetError) // no
const error = useSelector<RootState, string | null>(state => state.error.widgetError) // nup
const error = useTypedSelector(state => (state as RootState).error.widgetError) // nuh-uh
唯一有效的方法是添加 @ts-ignore
,但这种做法使使用 typescript 开始的目的达到了一半。
在这一点上,我既没有聪明的想法也没有愚蠢的想法。请停一下?
如果定义了 RootState,那么 const error = useSelector
我无法在 codesandbox 上重现此问题,也无法在使用 typescript 模板的新 React 应用程序中重现此问题。这很可能是由于(错误地?)将 ts 添加到现有的 js react 应用程序引起的。