如何将 Promise.all() 与 Typescript 一起使用

Question

这是我想做的：

Promise.all([aurelia.start(), entityManagerProvider.initialize()])
    .then((results:Array<any>) => {
        let aurelia: any = results[0];
        aurelia.setRoot();
    });

aurelia.start() 返回 Aurelia 类型，而 initialize() 返回 void。

编译器给出一个错误消息，指出无法从用法中推断出类型。

我想要实现的是让它们同时运行，因为它们都是非常长的过程，然后运行Aurelia.setRoot();

Answer 1

通常最好有类型一致的数组。您可以手动执行以下操作（传入通用参数）：

Promise.all<Aurelia, void>(
  [aurelia.start(), entityManagerProvider.initialize()
])
.then(results => {
    let aurelia = results[0];
    aurelia.setRoot();
});

Answer 2

由于Promise::all是一个泛型函数，你可以像这样声明每个promise的返回类型：

Promise.all<Aurelia, void>([
  aurelia.start(),
  entityManagerProvider.initialize()
])
.then(([aurelia]) => aurelia.setRoot());

Answer 3

至少从 TypeScript 2.7.1 开始，编译器似乎可以在没有帮助的情况下解析类型，语法如下：

Promise.all([fooPromise, barPromise]).then(([foo, bar]) => {
  // compiler correctly warns if someField not found from foo's type
  console.log(foo.someField);
});

帽子提示：@JamieBirch（来自@AndrewKirkegaard 的回答的评论）

Answer 4

如果您想保持类型安全，可以扩展 Promise 对象（类型为 PromiseConstructor）的本机类型定义，并为 when @ 添加额外的重载签名987654323@ 使用有限数量的非必要可相互赋值的值调用：

interface PromiseConstructor
{
    all<T1, T2>(values: [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>]): Promise<[T1, T2]>;
    all<T1, T2, T3>(values: [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>]): Promise<[T1, T2, T3]>;
    ...
}

根据需要添加尽可能多的重载。这种方法为onfulfilled 回调的value 参数中的所有元素提供了完整的类型安全性：

Promise.all([1, "string", true]).then(value =>
{
    let a: number = value[0]; // OK
    let b: number = value[1]; // Type 'string' is not assignable to type 'number'.
    ...
});

Answer 5

第 1 部分

有一些功能你需要了解 A)Promise.all 和 B)Promise.then:

A)Promise.all的类型定义是一个函数：

    all<T>(values: readonly (T | PromiseLike<T>)[]): Promise<T[]>;

B) Promise.then 的类型定义是一个稍微复杂一点的函数：

    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

第 1 部分.a

Promise.then的类型定义很多但是可以分解成小部分：

then<TResult1 = T, TResult2 = never> 一个函数 then 和 2 个泛型 TResult1, TResult2。 < > 意味着我们可以稍后在其中设置和使用值——它们被称为generics。

then 函数本身：(onfulfilled?: ..., onrejected?: ...): Promise<TResult1 | TResult2>。

PromiseLike 是一个辅助类型，与Promise 相同（用于介绍课程）。

onfulfiled 和 onrejected 是以下形式的函数：(value: T) => (TResult1 OR PromiseLike<TResult1>) OR undefined OR null。注意这里使用了通用的T。

第 2 部分 -

Promise 本身有一个通用接口：interface Promise<T>。 <T> 是一个/generic。

所以当你打电话时

Promise.all<SomeCoolType>([a(), b(), c()]).then( value => doSomething(value) )

你的泛型是SomeCoolType，在这个例子中一些很酷的类型是

interface SomeCoolType = [A() => string, B() => boolean, C() => number]

现在请记住，A B C 必须是 Promise。这样一来，.then( value => ... 中的 value 将成为 SomeCoolType 的结果，对我们来说，它调用了所有这些函数，结果是 [string, boolean, number]。

结论 -

具体来说，您传递给您的函数/承诺数组Promise.all<T> 是.then(result => ...) 中使用的泛型。这些承诺的返回/解析值将成为result 的值/类型。

示例：Promise.all<[Promise<() => string>]>([returnStringAsync()]).then(result => console.log(typeof result === "string")); # => true

Answer 6

对于任何想在 React TypeScript 中使用 Promise.all 的人：

Promise.all<Foo, Bar>(fooPromise, barPromise)

其中fooPromise 和barPromise 是您要并行执行的承诺，fooPromise 返回一个foo 类型的响应，barPromise 返回一个bar 类型的响应。

如果您查看.then 的响应，您会看到响应是一个元组：[Foo, Bar]。

Answer 7

当使用返回值的承诺时，我最喜欢使用Promise.all() 是使用数组解构，如下所示。使用await 更具可读性，并且解构填充了正确的变量。

export interface IDeveVersionHubDataService {
    getBuildFilterDeveVersions(): Promise<IBuildFilterDeveVersionDto[]>;
    getBuildFilterUsers(): Promise<IBuildFilterUserDto[]>;
}

const loadDeveVersions = deveVersionHubDataService.getBuildFilterDeveVersions();
const loadUsers = deveVersionHubDataService.getBuildFilterUsers();

const [deveVersions, users] = await Promise.all([loadDeveVersions, loadUsers]);     

Answer 8

一个完整的例子：

type returnString = string;
type returnNumberType = number;
type jobsType = [Promise<returnString>, Promise<returnNumberType>];

const returnString = async (): Promise<returnString> => {
  return 'This is a string';
};

const returnNumber = async (): Promise<returnNumberType> => {
  return 123;
};

const jobs = [];

jobs.push(returnString());

if (Math.random() > 0.5) {
  jobs.push(returnNumber());
}

(async () => {
  const results = await Promise.all(jobs as jobsType);
  // results now has the correct.
  // tslint:disable-next-line: no-console
  console.log(results);
})();

Answer 9

我在寻找 Promise.all() 的返回类型时不知何故来到了这里，因为简单的 [Promise<any>, Promise<any>] 显然不起作用。

最终证明它比看起来更简单：

const severalMongoDbOperations: Promise<[DeleteWriteOpResultObject, UpdateWriteOpResult]> =
  () => Promise.all([
    mongo.deleteOne({ ... }),
    mongo.updateOne({ ... })
  ]);

以后可以和.then()一起使用或者：

try {
  const ops: [DeleteWriteOpResultObject, UpdateWriteOpResult] = await severalMongoDbOperations();
} catch (e) {
  // Process rejection
}

Answer 10

我和你有同样的问题，但是使用这段代码，一切都很好。

type TList = Promise<Aurelia> | Promise<void>;

const foo: TList[] = [aurelia.start(), entityManagerProvider.initialize()];

Promise.all<TList>(foo).then((results) => {
    let aurelia = results[0];
    aurelia.setRoot();
});

Answer 11

Promise.all 返回一个承诺列表。如果你等待所有的承诺，你可以得到所有承诺的结果。

        const [tomorrow, today, yesterday] = await Promise.all([
            fun('tomorrow'),
            fun('today'),
            fun('yesterday')
        ]);