javascript - 如何在函数组件中定义 Type 的属性？ 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 中运行得很好，但在 typescript 中它给出了以下错误。

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

问题显然变成了；如何使属性存在于类型 {} 上？ (或者，欺骗编译器认为它存在。为什么它首先给出此警告/编译器错误？

我不明白。

我尝试在接口(interface)中定义状态，然后是应用程序:React.Component<'any, Interface'>，(正如我看到的一篇文章，其中适用于类组件，但无济于事。)

如果有人能为我指明正确的方向，我们将不胜感激。

Answer 1

问题是上下文使用的类型是 {}，因为这是它初始化时使用的值。如果您更新对 createContext 的初始调用并传入正确的泛型类型，这应该可以解决您的问题。

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

这些是非常松散的类型，因为 state 可以是 any 值并且任何东西都可以被分派(dispatch)，所以你可能还想为实际上下文值定义更强的类型(但这取决于您和您的用例)。