从 TypeScript 中的函数返回多个值

要从 TypeScript 中的函数返回多个值，请将值分组到一个数组中并返回该数组，例如return [myValue1, myValue2] as const.

然后，您可以解构并使用函数返回的值。

索引.ts


function getValues() {
  const str = 'bobbyhadz.com';
  const num = 100;

  return [str, num] as const;
}

// 👇️ const result: readonly ["bobbyhadz.com", 100]
const result = getValues();

const [str, num] = getValues();

console.log(str.toUpperCase()); // 👉️ "BOBBYHADZ.COM"
console.log(num.toFixed(2)); // 100.00

如果您需要定义具有多种返回类型的函数，请单击以下子标题：

在 TypeScript 中定义具有多个返回类型的函数

我们声明了一个函数，它通过将多个值分组到一个数组中来返回多个值。

请注意，变量的类型result（以及函数的返回类型）是["bobbyhadz.com", 100].

该as const语法在 TypeScript 中称为const 断言
。

const 断言将函数的返回类型设置为
readonly ["bobbyhadz.com", 100]，这正是我们想要的。

当我们从函数的返回值中解构它们时，我们希望这些值被正确键入。

如果我们省略 const 断言，让我们看看函数的
返回类型。

索引.ts


function getValues() {
  const str = 'bobbyhadz.com';
  const num = 100;

  return [str, num];
}

// 👇️ const result: (string | number)[]
const result = getValues();

const [str, num] = getValues();

// 👇️ Now str is string or number
// and num is string or number

如果没有as const语法，函数的类型将返回一个包含字符串或数字的数组。

这不是很好，因为当我们
将
数组中的值解构str为和num变量时，它们的类型为
string | number.

该string | number语法在 TypeScript 中称为联合类型。联合类型是通过组合两个或多个其他类型而形成的。

我已经写了一篇关于如何在 TS 中定义具有多种类型的数组的详细文章
。

改用元组返回类型

您可以通过将函数的返回类型显式设置为
包含 a和 a 的
元组来解决这个问题。stringnumber

索引.ts


function getValues(): [string, number] {
  const str = 'bobbyhadz.com';
  const num = 100;

  return [str, num];
}

// 👇️ const result: [string, number]
const result = getValues();

const [str, num] = getValues();

我们已经明确地键入函数以返回一个元组，其中第一个元素是一个字符串，第二个是一个数字。

现在，当我们将值解构为str和变量时，它们的类型是正确的。 num

赋值左侧带有方括号的语法称为解构。

索引.ts


const [a, b] = ['bobby', 'hadz'];

console.log(a); // 👉️ "bobby"
console.log(b); // 👉️ "hadz"

一种简单的思考方式是我们将数组的元素分配给变量。请注意，赋值顺序和数组中值的顺序是相同的。

如果您不想使用解构，则可以使用方括号表示法显式访问这些值。

索引.ts


function getValues() {
  const str = 'bobbyhadz.com';
  const num = 100;

  return [str, num] as const;
}

// 👇️ const result: [string, number]
const result = getValues();

const str = result[0];
const num = result[1];

在 TypeScript 中定义一个具有多个返回类型的函数

在 TypeScript 中使用联合类型定义具有多个返回类型的函数。

索引.ts


function getValue(num: number): string | number {
  if (num > 5) {
    return 100;
  }

  return 'bobbyhadz.com';
}

// 👇️ const result1: string | number
const result = getValue(4);

if (typeof result === 'string') {
  // 👇️ result is a string here
  console.log(result.toUpperCase());
} else {
  // 👇️ result is a number here
  console.log(result.toFixed(2));
}

该函数必须返回一个以联合类型表示的值，否则类型检查器会抛出错误。

使用箭头函数

在使用箭头函数时，您可以使用相同的方法。

索引.ts


const getValue = (num: number): string | number => {
  if (num > 5) {
    return 100;
  }

  return 'bobbyhadz.com';
};

联合类型是由两个或多个其他类型组合而成的类型，表示可以是任何一种指定类型的值。

您可以根据需要在联合中包含任意数量的类型。只需用管道分隔类型|。

索引.ts


const getValue = (num: number): string | number | boolean => {
  if (num === 0) {
    return true;
  }

  if (num > 5) {
    return 100;
  }

  return 'bobbyhadz.com';
};

上例中的函数返回一个stringor number。

使用类、类型别名或接口

同样的方法可以用于类型别名、
接口或类。

索引.ts


class Animal {
  run() {
    console.log('the animal runs');
  }
}

class Human {
  walk() {
    console.log('the human walks');
  }
}

function getValue(num: number): Animal | Human {
  if (num > 5) {
    const animal = new Animal();
    return animal;
  }

  const human = new Human();
  return human;
}

下面是一个返回字符串数组或数值数组的函数示例。

索引.ts


function getValue(num: number): string[] | number[] {
  if (num > 5) {
    return [100];
  }

  return ['bobbyhadz.com'];
}

在访问属性之前使用类型保护

示例中的函数有多个返回类型，因此我们必须在访问特定于类型的方法或属性之前使用
类型保护。

索引.ts


function getValue(num: number): string | number {
  if (num > 5) {
    return 100;
  }

  return 'bobbyhadz.com';
}

// 👇️ const result1: string | number
const result = getValue(4);

if (typeof result === 'string') {
  // 👇️ result is a string here
  console.log(result.toUpperCase());
} else {
  // 👇️ result is a number here
  console.log(result.toFixed(2));
}

该result变量存储 astring或 a number，因此 TypeScript 不允许我们访问特定于字符串的内置方法，直到toUpperCase我们可以缩小类型范围。

存储的值的类型是块result中的字符串if。

该函数仅返回2可能的类型，因此 TypeScript 知道值的类型是块number中的a else 。

根据函数返回值的类型，缩小类型的方式可能会有所不同。

例如，如果您必须
检查一个数组，您将使用
Array.isArray(myArray)；如果您必须检查一个值是否是特定类的实例，您将使用myInstance instanceof myClass。

# 使用类型断言

A quick and dirty way to get around having to check the type is to use a
type assertion.

index.ts


function getValue(num: number): string | number {
  if (num > 5) {
    return 100;
  }

  return 'bobbyhadz.com';
}

// 👇️ const result1: string
const result = getValue(4) as string; // 👈️ type assertion

console.log(result.toUpperCase()); // 👉️ "bobbyhadz.com"

The as keyword is a type assertion and sets the type of the result variable
to string without us having to use a type guard.

This approach should generally be avoided as it isn’t type safe and would cause
a runtime error if the result variable stored a number.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials:

从 TypeScript 中的函数返回多个值

目录

Return Multiple values from a Function in TypeScript