TypeScript中如何为多类型Promise数组标注类型并适配Promise.all？

问题场景 #

需要异步执行两个Promise：一个始终执行，另一个仅在满足条件时执行，同时要保证Promise.all返回值的类型符合预期。原实现代码如下：

type Promises = [Promise<string>, Promise<number>?]

const promises: Promises = [Promise.resolve('Lorem')]

if (someCondition) {
  promises.push(Promise.resolve(1))
}

// 'resolvedString' should be string
// 'resolvedNumber' should be number | undefined
const [resolvedString, resolvedNumber] = await Promise.all(promises)

遇到的问题 #

1. VSCode类型提示错误：resolvedNumber被推断为number，而非预期的number | undefined
2. TypeScript编译报错，错误信息如下：

The last overload gave the following error.
  Argument of type 'Promises' is not assignable to parameter of type 'Iterable<string | PromiseLike<string>>'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<Promise<string> | Promise<number>, any>' is not assignable to type 'IteratorResult<string | PromiseLike<string>, any>'.
        Type 'IteratorYieldResult<Promise<string> | Promise<number>>' is not assignable to type 'IteratorResult<string | PromiseLike<string>, any>'.
          Type 'IteratorYieldResult<Promise<string> | Promise<number>>' is not assignable to type 'IteratorYieldResult<string | PromiseLike<string>>'.
            Type 'Promise<string> | Promise<number>' is not assignable to type 'string | PromiseLike<string>'.
              Type 'Promise<number>' is not assignable to type 'string | PromiseLike<string>'.
                Type 'Promise<number>' is not assignable to type 'PromiseLike<string>'.
                  Types of property 'then' are incompatible.
                    Type '<TResult1 = number, TResult2 = never>(onfulfilled?: (value: number) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>) => Promise<...>' is not assignable to type '<TResult1 = string, TResult2 = never>(onfulfilled?: (value: string) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>) => PromiseLike<...>'.
                      Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
                        Types of parameters 'value' and 'value' are incompatible.
                          Type 'number' is not assignable to type 'string'.

93           const [resolvedString, resolvedNumber] = await Promise.all(promises)

使用TypeScript版本：4.3.5

解决方案 #

方法一：显式指定泛型参数并填充默认Promise #

通过手动指定Promise.all的泛型返回类型，同时为可选Promise设置默认的undefined值，让TypeScript正确推断类型：

const someCondition = false; // 示例条件

// 定义最终解析值的类型
type ResolvedResult = [string, number | undefined];

// 初始化数组，第二个元素默认返回undefined的Promise
const promises: [Promise<string>, Promise<number | undefined>] = [
  Promise.resolve('Lorem'),
  Promise.resolve(undefined)
];

if (someCondition) {
  // 条件满足时替换第二个Promise
  promises[1] = Promise.resolve(1);
}

// 显式指定Promise.all的泛型参数
const [resolvedString, resolvedNumber] = await Promise.all<ResolvedResult>(promises);
// resolvedString: string
// resolvedNumber: number | undefined

方法二：通过条件分支拆分逻辑 #

直接通过条件判断分别处理两种场景，让TypeScript自动推断正确的类型：

const someCondition = false; // 示例条件

let resolvedString: string;
let resolvedNumber: number | undefined;

if (someCondition) {
  // 条件满足时执行两个Promise
  [resolvedString, resolvedNumber] = await Promise.all([
    Promise.resolve('Lorem'),
    Promise.resolve(1)
  ]);
} else {
  // 条件不满足时仅执行第一个Promise
  resolvedString = await Promise.resolve('Lorem');
  resolvedNumber = undefined;
}

问题根源 #

1. 原代码使用的可选元组[Promise<string>, Promise<number>?]与Promise.all的类型重载不兼容，Promise.all期望迭代器返回统一类型的PromiseLike，而可选元组会产生Promise<string> | Promise<number>的混合类型，导致编译报错。
2. TypeScript 4.3.5对可选元组的类型推断存在局限，无法自动将可选位置的解析值推断为T | undefined，因此resolvedNumber被错误推断为number。

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