TypeScript 中的函数返回多个值

TypeScript 2年前 141

要从 TypeScript 中的函数返回多个值，请将值分组到一个数组中并返回该数组，例如 return [myValue1, myValue2] as const。然后，我们可以解构并使用函数返回的值。

function getValues() {
  const str = 'hello';
  const num = 100;

  return [str, num] as const;
}

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

const [str, num] = getValues();

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

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

请注意 ，结果变量的类型（以及函数的返回类型）是 ["hello", 100]。

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

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

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

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

function getValues() {
  const str = 'hello';
  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

现在我们已经删除了 const，该函数被键入以返回一个包含字符串或数字的数组。

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

string | number语法在 TypeScript 中称为联合类型。联合类型由两个或多个其他类型组合而成。

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

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

  return [str, num];
}

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

const [str, num] = getValues();

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

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

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

const [a, b] = ['hello', 'world'];

console.log(a); // 👉️ "hello"
console.log(b); // 👉️ "world"

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

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

function getValues() {
  const str = 'hello';
  const num = 100;

  return [str, num] as const;
}

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

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