Как я могу правильно определить интерфейс типа при использовании 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)

Я получаю ошибку машинописного текста:

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

Пример демонстрации

ПРИМЕЧАНИЕ. Определите значение по умолчанию для createContext как null, поскольку оно будет использоваться только тогда, когда в дереве иерархии нет поставщика. В этом случае чаще всего это может быть ошибка

Answer 2

Параметр для createContext - это значение контекста по умолчанию, см. Здесь Итак, если ваш тип контекста - это состояние, и установите состояние следующим образом

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

Вам нужно указать значение по умолчанию

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

Должно быть

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