title: Typescript react generic service with functional components
body: <p>I was trying to build a generic service to load from an endpoint. It works, but I would like to use</p>
  <pre><code>const useService = &lt;T&gt;(endpoint: string) =&gt; {...}
  </code></pre>
  <p>but it doesn't work. Is it possible to type a function with this syntax, or sugar?</p>
  <pre><code>export interface ISubscription&lt;T&gt; {
    payload: T[];
  }
  
  type Service&lt;T&gt; = Service&lt;ISubscription&lt;T&gt;&gt;;
  
  const useService = function&lt;T&gt;(endpoint: string) {
    const [result, setResult] = useState&lt;Service&lt;T&gt;&gt;({
      status: 'loading'
    });
  
    useEffect(() =&gt; {
      API.axiosClient.get&lt;ISubscription&lt;T&gt;&gt;(`xxx/${endpoint}`)
        .then(response =&gt; {
          setResult({ status: 'loaded', payload: { payload: response.data.payload }  });
        })
        .catch(error =&gt; setResult({ status: 'error', error }));
    }, [endpoint]);
  
    return result;
  };
  </code></pre>
  <p>where <code>Service</code> is</p>
  <pre><code>interface ServiceInit {
      status: 'init';
  }
  interface ServiceLoading {
      status: 'loading';
  }
  export interface ServiceLoaded&lt;T&gt; {
      status: 'loaded';
      payload: T;
  }
  interface ServiceError {
      status: 'error';
      error: Error;
  }
  
  export type Service&lt;T&gt; =
    | ServiceInit
    | ServiceLoading
    | ServiceLoaded&lt;T&gt;
    | ServiceError;
  </code></pre>