在 TypeScript 中声明具有 Promise 返回类型的函数

作者

目录

Declare a function with a Promise return type in TypeScript

  1. 在 TypeScript 中声明具有 Promise 返回类型的函数
  2. 获取 TypeScript 中 Promise 的返回类型

在 TypeScript 中声明一个具有 Promise 返回类型的函数

要声明具有 promise 返回类型的函数，请在函数参数列表之后将函数的返回类型设置为 promise。

如果未设置函数的返回类型，TypeScript 将对其进行推断。

索引.ts
// ✅ Named function
function getPromise(): Promise<number> {
  return Promise.resolve(5);
}

// 👇️ Unwrap promise type if necessary
// 👇️ type T = number
type T = Awaited<ReturnType<typeof getPromise>>;

// ✅ Named async function
async function getPromise2(): Promise<number> {
  return 10;
}

// ✅ Arrow function
const getPromise3 = (): Promise<string> => {
  return Promise.resolve('bobbyhadz.com');
};

这里还有3个例子。

索引.js
// ✅ Class method
class A {
  async getPromise(): Promise<string> {
    return 'bobbyhadz.com';
  }
}

// ✅ Using a type as Promise<Type>
type Person = {
  name: string;
  age: number;
};

async function getPromise4(): Promise<Person[]> {
  return [
    {
      name: 'Bobby Hadz',
      age: 30,
    },
  ];
}

您可以在参数列表之后设置函数的返回类型。

索引.ts
function getPromise(a: number): Promise<number> {
  return Promise.resolve(a);
}

从函数的返回类型中解包 Promise 的类型

如果您需要从函数的返回类型中解包 Promise 的类型
，请使用
Awaited
实用程序类型。

索引.ts
function getPromise(a: number): Promise<number> {
  return Promise.resolve(a);
}

// 👇️ Unwrap promise type if necessary
// 👇️ type T = number
type T = Awaited<ReturnType<typeof getPromise>>;

实用程序Awaited类型递归地解开承诺并返回其类型。

索引.ts
// 👇️ type A = string
type A = Awaited<Promise<string>>;

上面的示例显示了如何将
函数的返回类型设置
为包含不同值的承诺。

显式设置函数返回类型的优点是，如果您尝试返回不同类型的承诺，类型检查器会抛出错误。

索引.ts
async function getPromise2(): Promise<number> {
  // ⛔️ Type 'string' is not assignable to type 'number'.ts(2322)
  return 'bobbyhadz.com';
}

如果你没有显式设置函数的返回类型，TypeScript 会推断它。

索引.ts
// 👇️ function getPromise2(): Promise<string>
async function getPromise2() {
  return 'bobbyhadz.com';
}

使用联合类型的函数返回多种类型的Promise

如果您的函数返回一个可能包含不同值的 Promise，请使用联合
来指定函数的返回类型。

索引.ts
async function getPromise2(): Promise<string | null> {
  if (Math.random() > 0.5) {
    return null;
  }

  return 'bobbyhadz.com';
}

上面的函数返回一个包含一个string或一个null值的 Promise。

如果您的函数返回一个 Promise 并展开为一个
对象数组，那么使用类型或
接口更具可读性。

索引.ts
type Person = {
  name: string;
  age: number;
};

async function getPromise4(): Promise<Person[]> {
  return [
    {
      name: 'Bobby Hadz',
      age: 30,
    },
  ];
}

上面的函数返回一个包含 type 对象数组的 Promise
Person。

获取 TypeScript 中 Promise 的返回类型

使用Awaited实用程序类型获取 TypeScript 中承诺的返回类型。

实用程序Awaited类型用于递归解包 Promise 并获取它们的返回类型。

索引.ts
// 👇️ type A = string
type A = Awaited<Promise<string>>;

// 👇️ type B = string
type B = Awaited<Promise<Promise<string>>>;

// 👇️ C = boolean | number
type C = Awaited<boolean | Promise<number>>;

async function sum(a: number, b: number): Promise<number> {
  return a + b;
}

// 👇️ type D = number
type D = Awaited<ReturnType<typeof sum>>;

我们使用
Awaited
实用程序类型来获取示例中几个 Promise 的返回类型。

该类型用于递归解包 Promise 并获取其返回类型。

第二个例子表明我们可以解包 promise 的类型，即使它是嵌套的。

索引.ts
// 👇️ type B = string
type B = Awaited<Promise<Promise<string>>>;

从函数的返回类型中解包 Promise 的返回类型

如果您需要从函数的返回类型中解包 promise 的返回类型，请使用ReturnType实用程序类型。

索引.ts
function multiply(a: number, b: number): Promise<number> {
  return Promise.resolve(a * b);
}

// 👇️ type E = number
type E = Awaited<ReturnType<typeof multiply>>;

实用程序ReturnType类型构造一个由函数的返回类型组成的类型。

async展开函数的返回类型

您可以使用相同的方法来解包async函数的返回类型。请注意，async函数总是返回一个 Promise。

索引.ts
async function sum(a: number, b: number): Promise<number> {
  return a + b;
}

// 👇️ type D = number
type D = Awaited<ReturnType<typeof sum>>;

这种方法也适用于内置方法，例如Promise.all和
Promise.race。

索引.ts
async function getArr(a: number, b: number): Promise<[number, string]> {
  const result = await Promise.all([
    Promise.resolve(5),
    Promise.resolve('bobbyhadz.com'),
  ]);

  return result;
}

// 👇️ [number, string]
type E = Awaited<ReturnType<typeof getArr>>;

如果您需要将函数作为参数传递，请查看
以下文章。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：