title: Using react context with react hooks in typescript
body: <p>Code below demonstrates how I'm trying to implement react's context with react hooks, idea here is that I will be able to easily access context from any child component like this</p>
  
  <pre><code>const {authState, authActions} = useContext(AuthCtx);
  </code></pre>
  
  <p>To begin with I create a file that exports context and provider.</p>
  
  <pre><code>import * as React from 'react';
  
  const { createContext, useState } = React;
  
  const initialState = {
    email: '',
    password: ''
  };
  
  const AuthCtx = createContext(initialState);
  
  export function AuthProvider({ children }) {
    function setEmail(email: string) {
      setState({...state, email});
    }
  
    function setPassword(password: string) {
      setState({...state, password}); 
    }
  
    const [state, setState] = useState(initialState);
    const actions = {
      setEmail,
      setPassword
    };
  
    return (
      &lt;AuthCtx.Provider value={{ authState: state, authActions: actions }}&gt;
        {children}
      &lt;/AuthCtx.Provider&gt;
    );
  }
  
  export default AuthCtx;
  </code></pre>
  
  <p>This works, but I get error below in <code>value</code> of provider, probably because I add actions in, hence the question, is there a way for me to keep everything typed and still be able to export context and provider?</p>
  
  <p>I beliebe I also can't place <code>createContext</code> into my main function since it will re-create it all the time?</p>
  
  <blockquote>
    <p>[ts] Type '{ authState: { email: string; password: string; };
    authActions: { setEmail: (email: string) => void; setPassword:
    (password: string) => void; }; }' is not assignable to type '{ email:
    string; password: string; }'.   Object literal may only specify known
    properties, and 'authState' does not exist in type '{ email: string;
    password: string; }'. [2322] index.d.ts(266, 9): The expected type
    comes from property 'value' which is declared here on type
    'IntrinsicAttributes &amp; ProviderProps&lt;{ email: string; password:
    string; }>' (property) authState: {
        email: string;
        password: string; }</p>
  </blockquote>