title: How do i define a property on a Type in a function component? TS2339 ERROR
body: <p>I have the following code; </p>
  
  <pre><code>import React, { useContext, useReducer, useEffect, } from 'react';
  
  const AppContext = React.createContext({});
  
  
  
  const App = () =&gt; {
      let initialState = { lang: 'en', color: 'blue'};
  
      let reducer = (state, action) =&gt; {
          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 (
          &lt;AppContext.Provider value={value}&gt;
              &lt;LanguagePicker /&gt;
              &lt;Menu /&gt;
          &lt;/AppContext.Provider&gt;
      );
  }
  
  const Menu = () =&gt; &lt;MenuItem /&gt;;
  
  
  
  const LanguagePicker = () =&gt; {
      const  {state, dispatch}  = useContext(AppContext);
      let setLanguage = lang =&gt; () =&gt; dispatch({ type: "change-language", payload: lang });
  
      useEffect(() =&gt; {
          localStorage.setItem("state", JSON.stringify(state));
        }, [state]);
      return (
          &lt;div&gt;
              &lt;button onClick={setLanguage('en')}&gt;English&lt;/button&gt;
              &lt;button onClick={setLanguage('fr')}&gt;French&lt;/button&gt;
          &lt;/div&gt;  
      );
  }
  
  const MenuItem = () =&gt; {
      const { state, dispatch } = useContext(AppContext);
      return (
          &lt;div&gt;
              &lt;p&gt;Locale: {state.lang}&lt;/p&gt;
          &lt;/div&gt;   
      );
  }
  
  export default App;
  </code></pre>
  
  <p>Now, this code runs perfectly fine in JS/JSX, but in typescript it gives the following error.</p>
  
  <pre><code>Property 'state' does not exist on type '{}'.ts(2339)
  Property 'dispatch' does not exist on type '{}'.ts(2339)
  </code></pre>
  
  <p>@ </p>
  
  <pre><code>const LanguagePicker = () =&gt; {
      const  {state, dispatch}  = useContext(AppContext);
  </code></pre>
  
  <p>Question obviously becomes; how do i make the property exist on type {}? (Or, fool the compiler into thinking it exists.
  Why does it give this warning/compiler error in the first place?</p>
  
  <p>I don't get it.</p>
  
  <p>I've tried to define the state in an Interface, then App: React.Component&lt;'any, Interface'>, (as i saw a post where that worked for class components, but to no avail.)</p>
  
  <p>Someone pointing me in the right direction would be highly appreciated.</p>