TypeScript中使用Fetch返回Promise<Array<any>>时出现类型错误

我来帮你搞定这个TypeScript类型报错的问题。

首先，这个报错的核心原因很明确：你的catch分支没有返回一个符合Promise<Array<any>>要求的值。当你在catch里只执行console.error(error)而没有返回值时，这个分支会默认返回undefined（对应TypeScript里的void类型），这就导致整个Promise的类型变成了Promise<void | any[]>——和你声明的返回类型Promise<Array<any>>自然匹配不上。

修复方案 #

你只需要在catch分支里返回一个合法的数组（比如空数组，或者根据业务需求返回的默认数组），就能让整个Promise的类型统一为Promise<Array<any>>，解决类型不匹配的问题。修改后的代码如下：

(q: any): Promise<Array<any>> => { 
  return fetch('http://speedtest.net', { mode: 'no-cors' }) 
    .then(response => response.json()) 
    .then((data: any) => [data]) 
    .catch(error => {
      console.error(error);
      // 返回空数组满足类型要求，也可根据业务场景返回其他合法数组
      return [];
    }); 
};

关于“仅返回data而非[data]也有问题”的补充 #

如果直接返回data也报错，那是因为data本身的类型不是数组。这时候你需要确认：要么data确实是数组类型（那你可以直接返回它，同时可以把类型声明更具体，比如Promise<YourDataType[]>）；要么就像你原来的写法一样，把data包装成数组返回，确保返回值符合Array<any>的类型要求。

内容的提问来源于stack exchange，提问作者Andrew