使用 React useContext 时如何正确定义类型接口？

Question

我有：

export interface AppStateType {
    isOnline: boolean
}

const AppContext = createContext([{}, () => { }]);

const AppProvider = (props) => {
    const [appState, setAppState] = useState<AppStateType>({
        isOnline: true
    })

    return <AppContext.Provider value={[appState, setAppState]}>
        {props.children}
    </AppContext.Provider>
}
export { AppContext, AppProvider }

当我尝试使用它时：

const [appState, setAppState] = useContext<AppStateType>(AppContext)

我收到 Typescript 错误：

Argument of type 'Context<{}[]>' is not assignable to parameter of type 'Context<AppStateType>'.
  The types of 'Provider.propTypes.value' are incompatible between these types.
    Type 'Validator<{}[]>' is not assignable to type 'Validator<AppStateType>'.
      Type '{}[]' is not assignable to type 'AppStateType'.

Answer 1

出现此错误的原因是 return 类型的 Context 不是 AppStateType 而是具有两个值的数组。 第一个是 AppState，第二个是调度程序

使用打字稿，您可以在创建上下文时输入上下文，例如

const AppContext = createContext<[AppStateType, React.Dispatch<any>]>(null);

Post这个，你可以像

一样简单地使用它

const [appState, setAppState] = useContext(AppContext);

Sample Demo

注意： 将 createContext 的默认值定义为 null，因为只有在层次结构树中没有提供程序时才会使用它。在这种情况下，它主要可能是一个错误

Answer 2

createContext 的参数是上下文的默认值见here 因此，如果您的上下文类型是状态并像这样设置状态

[AppStateType,React.Dispatch<React.SetStateAction<AppStateType>>]

你需要给一个默认值

const AppContext = createContext([{}, () => { }]);

应该是

const AppContext = createContext<[AppStateType,React.Dispatch<React.SetStateAction<AppStateType>>]>([{isOnline:false},()=> false]);

使用 React useContext 时如何正确定义类型接口？

How can I properly define a type interface when using React useContext?

typescript

reactjs

react-hooks

use-context