title: How to type correctly fetch in React/Redux/TS app?
body: <p>I'm writing an app with React, Redux and TS. Right now I stuck into problem with Promises and TS. Could you help me to type functions/Promises?</p>
  <ol>
  <li>API call returns a list of posts id e.g. [1, 2, ..., 1000].</li>
  <li>I need to render only 100 posts on a page.</li>
  <li>To do that I created four functions:</li>
  </ol>
  <ul>
  <li><strong>checkResponse()</strong> - checks if res.ok then return res.json() or
  throws an error.</li>
  <li><strong>fetchStoryIdList()</strong> - makes API call for an array of all ids.</li>
  <li><strong>fetchStoryList()</strong> - makes API call for every single id and returns
  and array of 100 posts.</li>
  <li><strong>fetchStories()</strong> - dispatches to store array of posts.</li>
  </ul>
  <p>At the moment TS shows an error in <code>fetchStories()</code> in this line <code>dispatch(fetchStorySuccessAction(storyList))</code> .</p>
  <p>Error message</p>
  <pre><code>Argument of type '[unknown, ..., unknown]' is not assignable to parameter of type 'IStory[]'.
    Type 'unknown' is not assignable to type 'IStory'.
  </code></pre>
  <p>IStory interface</p>
  <pre><code>export interface IStory {
    by: string;
    descendants: number;
    id: number;
    kids: number[];
    score: number;
    time: number;
    title: string;
    type: string;
    url: string;
  }
  </code></pre>
  <p>IStoryState interface</p>
  <pre><code>export interface IStoryState {
    storyList: IStory[];
    storyError: null | string;
    isStoryLoading: boolean;
  }
  </code></pre>
  <p>Action fetchStorySuccessAction</p>
  <pre><code>export const fetchStorySuccessAction = (storyList: IStory[]): IFetchStoryDataSuccessAction =&gt; {
    return {
      type: StoryActionTypes.FETCH_STORY_DATA_SUCCESS,
      payload: storyList,
    };
  };
  </code></pre>
  <p>API functions</p>
  <pre><code>const checkResponse = (response: Response) =&gt; {
    return response.ok ? response.json() : Promise.reject(`Ошибка с фронта`);
  };
  
  const fetchStoryIdList = async (): Promise&lt;any&gt; =&gt; {
    try {
      const response = await fetch(`${BASE_URL}/newstories.json`);
      const idJson: number[] = await checkResponse(response);
      return idJson;
    } catch (error) {
      console.log(error);
    }
  };
  
  
  const fetchStoryList = async () =&gt; {
    const idList = await fetchStoryIdList();
    const promises = idList.slice(0, 100).map(async (id: number) =&gt; {
      try {
        const response = await fetch(`${BASE_URL}/item/${id}.json`);
        const storyData: IStory = await checkResponse(response);
        return storyData;
      } catch (err) {
        console.log(err);
      }
    });
    const storyList = await Promise.all(promises);
  
    return storyList;
  };
  
  
  const fetchStories = () =&gt; {
    return async (dispatch: Dispatch&lt;StoryActions&gt;) =&gt; {
      try {
        dispatch(fetchStoryAction());
        const storyList = await fetchStoryList();
  
      // TS error happens here
      // but I thinks all functions have to be typed somehow
        dispatch(fetchStorySuccessAction(storyList));
      } catch (error) {
        console.log(error);
      }
    };
  };
  </code></pre>