title: Typescript error when using React useContext and useReducer
body: <p>I'm new to Typescript and I'm getting the following error on my variable <code>state</code> in using <code>useContext</code> and <code>useReducer</code> hooks:</p>
  
  <blockquote>
    <p>Type '{ state: {}; dispatch: Dispatch; }' is not assignable to
    type '{ latlng: null; searchTerm: null; bookingId: null; myPin: null;
    selectedPin: null; selectedCard: null; selectedCardPin: null; }'.<br>
    Object literal may only specify known properties, and 'state' does not
    exist in type '{ latlng: null; searchTerm: null; bookingId: null;
    myPin: null; selectedPin: null; selectedCard: null; selectedCardPin:
    null; }'.ts(2322)</p>
  </blockquote>
  
  <p>This is my <code>app.tsx</code>:</p>
  
  <pre><code>const App = () =&gt; {   
    const initialState = useContext(Context)   
    const [state, dispatch] = useReducer(reducer, initialState)    
    return(
      &lt;Context.Provider value={{ state // &lt;-this is where the error occurs//, dispatch }}&gt;
           ...
      &lt;/Context.Provider&gt;    
    )
  </code></pre>
  
  <p>Following is my <code>context.jsx</code>:</p>
  
  <pre><code>const Context = createContext({
      latlng: null,
      searchTerm: null,
      bookingId: null,
      myPin: null,
      selectedPin: null,
      selectedCard: null, 
      selectedCardPin: null,
  })
  </code></pre>
  
  <p>Revision:</p>
  
  <p>according to the advise, I've changed my `context.tsx' to the following, but still getting the error message:</p>
  
  <blockquote>
    <p>Argument of type '{ latlng: null; searchTerm: null; bookingId: null;
    myPin: null; selectedPin: null; selectedCard: null; selectedCardPin:
    null; }' is not assignable to parameter of type 'MyContextType'.<br>
    Object literal may only specify known properties, and 'latlng' does
    not exist in type 'MyContextType'.ts(2345)</p>
  </blockquote>
  
  <pre><code>import { createContext } from 'react'
  
  interface MyContextType {
      dispatch: React.Dispatch&lt;any&gt;,
      state: {
        latlng?: any,
        searchTerm?: any,
        bookingId?: any,
        myPin?: any,
        selectedPin?: any,
        selectedCard?: any, 
        selectedCardPin?: any,
      }
  }
  
  const Context = createContext&lt;MyContextType&gt;({
      latlng: null,
      searchTerm: null,
      bookingId: null,
      myPin: null,
      selectedPin: null,
      selectedCard: null, 
      selectedCardPin: null,
  })
  
  export default Context
  </code></pre>
  
  <p>2nd revision: </p>
  
  <p>When I change my <code>context.jsx</code> to match the contents of <code>createContext</code> as following: </p>
  
  <pre><code>interface MyContextType {
      latlng?: any,
      searchTerm?: any,
      bookingId?: any,
      myPin?: any,
      selectedPin?: any,
      selectedCard?: any, 
      selectedCardPin?: any,
  }
  
  const Context = createContext&lt;MyContextType&gt;({
      latlng: null,
      searchTerm: null,
      bookingId: null,
      myPin: null,
      selectedPin: null,
      selectedCard: null,
      selectedCardPin: null,
  })
  </code></pre>
  
  <p>the error is gone in <code>context.jsx</code>, but it causes a type error in app.jsx. </p>
  
  <blockquote>
    <p>Type '{ state: {}; dispatch: Dispatch; }' is not assignable to
    type 'MyContextType'.   Object literal may only specify known
    properties, and 'state' does not exist in type
    'MyContextType'.ts(2322)</p>
  </blockquote>
  
  <pre><code>    &lt;Context.Provider value={{ state //&lt;-- here //, dispatch }}&gt;
      &lt;/Context.Provider&gt;
  
  </code></pre>