title: Typescript for React createContext and useContext
body: <p>I have a React Context file with a stateful Provider to manage cookie preferences. It all works as expected but I'm having 1 issue with Typescript. My file looks like this:</p>
  
  <pre><code>import Cookies from 'js-cookie';
  import React, { Component, ReactNode } from 'react';
  
  interface Props {
    children: ReactNode | ReactNode[];
    functionalCookiesOn: boolean;
    performanceCookiesOn: boolean;
  };
  
  interface State {
    functionalCookiesOn: boolean;
    performanceCookiesOn: boolean;
  };
  
  // Initialise context storage
  const CookiesContext = React.createContext({});
  const { Consumer: CookiesConsumer } = CookiesContext;
  
  class CookiesProvider extends Component&lt;Props, State&gt; {
    constructor(props: Props) {
      super(props);
  
      const {
        functionalCookiesOn,
        performanceCookiesOn,
      } = this.props;
  
      this.state = {
        functionalCookiesOn,
        performanceCookiesOn,
      };
    }
  
    componentDidUpdate(_prevProps: Props, prevState: State) {
      const {
        functionalCookiesOn,
        performanceCookiesOn,
      } = this.state;
  
      // Set cookie to store functional cookies setting
      if (functionalCookiesOn !== prevState.functionalCookiesOn) {
        Cookies.set('functionalCookiesOn', functionalCookiesOn.toString());
      }
  
      // Set cookie to store performance cookies setting
      if (performanceCookiesOn !== prevState.performanceCookiesOn) {
        Cookies.set('performanceCookiesOn', performanceCookiesOn.toString());
      }
    }
  
    toggleAllCookies = () =&gt; {
      // Store reversed state for functional and performance cookies
      this.setState((prevState: State) =&gt; ({
        functionalCookiesOn: !prevState.functionalCookiesOn,
        performanceCookiesOn: !prevState.performanceCookiesOn,
      }));
    }
  
    render() {
      const { children } = this.props;
  
      const {
        functionalCookiesOn,
        performanceCookiesOn,
      } = this.state;
  
      const value = {
        functionalCookiesOn,
        performanceCookiesOn,
        toggleAllCookies: this.toggleAllCookies,
      };
  
      return (
        &lt;CookiesContext.Provider value={value}&gt;
          {children}
        &lt;/CookiesContext.Provider&gt;
      );
    }
  }
  
  export default CookiesContext;
  export { CookiesConsumer, CookiesProvider };
  </code></pre>
  
  <p>When I use this in another function component it looks like this:</p>
  
  <pre><code>const AnotherComponent = () =&gt; {
    const {
      functionalCookiesOn,
      performanceCookiesOn,
      toggleAllCookies,
    } = useContext(CookiesContext);
  
    return (
      ...
    );
  }
  </code></pre>
  
  <p>This throws errors such as:</p>
  
  <pre><code>Property 'functionalCookiesOn' does not exist on type '{}'.
  </code></pre>
  
  <p>This seems to me to do with the following line in the original file:</p>
  
  <pre><code>const CookiesContext = React.createContext({});
  </code></pre>
  
  <p>Because I initialise the context with an empty object (because at that stage it's got no values).</p>
  
  <p>What's the correct way to initialise this or apply types to avoid this error?</p>