使用 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

您收到此错误的原因是因为 Context 的返回类型不是AppStateType，而是一个包含两个值的数组。 首先是 AppState，其次是调度程序

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

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

发布这个，你可以像使用它一样简单地使用它

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]);