Как определить свойство типа в компоненте функции?TS2339 ОШИБКА

Question

У меня есть следующий код;

import React, { useContext, useReducer, useEffect, } from 'react';

const AppContext = React.createContext({});



const App = () => {
    let initialState = { lang: 'en', color: 'blue'};

    let reducer = (state, action) => {
        if (action === null ) {
            localStorage.removeItem("action");
            return initialState;
        }
        switch (action.type) {
            case "change-language":
                return { ...state, lang: action.payload };
                 default: return {initialState}
        }
    };

    const localState = JSON.parse(localStorage.getItem("state")!);

    let [state, dispatch] = useReducer(reducer, localState || initialState );
    let value = { state, dispatch };

    return (
        <AppContext.Provider value={value}>
            <LanguagePicker />
            <Menu />
        </AppContext.Provider>
    );
}

const Menu = () => <MenuItem />;



const LanguagePicker = () => {
    const  {state, dispatch}  = useContext(AppContext);
    let setLanguage = lang => () => dispatch({ type: "change-language", payload: lang });

    useEffect(() => {
        localStorage.setItem("state", JSON.stringify(state));
      }, [state]);
    return (
        <div>
            <button onClick={setLanguage('en')}>English</button>
            <button onClick={setLanguage('fr')}>French</button>
        </div>  
    );
}

const MenuItem = () => {
    const { state, dispatch } = useContext(AppContext);
    return (
        <div>
            <p>Locale: {state.lang}</p>
        </div>   
    );
}

export default App;

Теперь этот код прекрасно работает в JS / JSX, но в машинописном тексте выдает следующую ошибку:

Property 'state' does not exist on type '{}'.ts(2339)
Property 'dispatch' does not exist on type '{}'.ts(2339)

@

const LanguagePicker = () => {
    const  {state, dispatch}  = useContext(AppContext);

Вопросочевидно становится;как сделать так, чтобы свойство существовало для типа {}?(Или обмануть компилятор, заставив его думать, что он существует. Почему он вообще выдает это предупреждение / ошибку компилятора?

Я не понимаю.

Я пытался определитьсостояние в интерфейсе, затем приложение: React.Component <'any, Interface'>, (как я видел сообщение, где это работает для компонентов класса, но безрезультатно.)

Кто-то указал мне направильное направление будет высоко ценится.

Answer 1

Проблема в том, что для контекста используется тип {}, потому что это значение, с которым он инициализируется.Если вы обновите исходный вызов до createContext и передадите правильный универсальный тип, это должно решить вашу проблему.

const AppContext = React.createContext<{
  state?: any;
  dispatch?: React.Dispatch<any>;
}>({});

Это довольно слабые типы, потому что state может иметь значение any и что угоднобыть отправленным, поэтому вы также можете определить более сильные типы для фактического значения контекста (но это зависит от вас и вашего варианта использования).

Answer 2

useContext может вывести его типы из объекта контекста, который передается в качестве аргумента, который является AppContext.

const AppContext = React.createContext({});

Предполагаемый тип - {}, и поэтому выполучить эту ошибку.

Вы можете исправить это, передав универсальный тип в createContext:

interface ContextType {
  state?: any;
  dispatch?: any;
}
const AppContext = React.createContext<ContextType>({});

Как сказал @skovy, вы должны иметь лучшее представление о state иdispatch типов.