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

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

我有:

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'.

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

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

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

Post这个,你可以像

一样简单地使用它
const [appState, setAppState] = useContext(AppContext);

Sample Demo

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

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

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

你需要给一个默认值

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

应该是

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