如何为Promise.all返回的Axios响应可迭代对象定义正确类型？

在TypeScript中，要解决你遇到的联合类型导致的属性访问报错问题，可以通过显式指定元组类型来确保每个响应的类型是确定的，具体有两种常用方式：

方式1：给Promise.all指定泛型元组 #

直接在Promise.all的泛型参数里定义每个位置的响应类型，这样返回的Promise会自动推断为对应的元组类型，解构后的变量类型也会完全匹配：

import axios from 'axios';

// 假设已定义A、B、C接口类型
interface A { /* A的结构 */ }
interface B { test: string; /* B的其他结构 */ }
interface C { /* C的结构 */ }

Promise.all<[axios.AxiosResponse<A>, axios.AxiosResponse<B>, axios.AxiosResponse<C>]>([
  axios.get<A>('/api/a'), // 返回Promise<AxiosResponse<A>>
  axios.get<B>('/api/b'), // 返回Promise<AxiosResponse<B>>
  axios.get<C>('/api/c')  // 返回Promise<AxiosResponse<C>>
]).then(([aa, bb, cc]) => {
  // aa 类型为 AxiosResponse<A>
  // bb 类型为 AxiosResponse<B>，可安全访问 bb.test
  // cc 类型为 AxiosResponse<C>
  console.log(bb.test); // 无编译报错
});

方式2：在then回调的参数里标注元组类型 #

如果不想给Promise.all加泛型，也可以直接在解构参数上标注完整的元组类型：

Promise.all([
  axios.get<A>('/api/a'),
  axios.get<B>('/api/b'),
  axios.get<C>('/api/c')
]).then(([aa, bb, cc]: [axios.AxiosResponse<A>, axios.AxiosResponse<B>, axios.AxiosResponse<C>]) => {
  // 每个变量的类型已被显式指定，访问独有属性无报错
  console.log(bb.test);
});

为什么原来的写法会报错？ #

TypeScript默认会把Promise.all接收的可迭代对象推断为数组类型（而非元组），因此返回的结果类型是Promise<AxiosResponse<A | B | C>[]>，解构后每个元素都是AxiosResponse<A | B | C>的联合类型。当你访问某个类型独有的属性时，TypeScript无法确定当前元素是否包含该属性，因此会触发编译报错。

通过显式指定元组类型，我们告诉TypeScript数组中每个位置的具体类型，从而避免联合类型带来的类型安全问题。

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