迹忆客 专注技术分享

要声明具有元组(Tuple)返回类型的函数，将函数的返回类型设置为函数参数列表之后的元组，例如 函数 getTuple(): [number，number] {}。 如果没有设置函数的返回类型，TypeScript 会认定它为 type[]。

// 命名函数返回元组
function getTuple(): [number, number] {
  return [5, 10];
}

// 使用箭头函数返回元组
const getTuple2 = (): [string, string] => {
  return ['hello', 'world'];
};

// 使用 type 关键字
type Numbers = [number, number];

function getTuple4(): Numbers {
  return [10, 10];
}

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

要将函数的返回类型设置为元组，在方括号之间传递元组的类型，就像将元素传递给数组一样。

function getTuple(a: number, b: number): [number, number] {
  return [a, b];
}

上面的例子展示了如何将函数的返回类型设置为包含不同值的元组。

显式设置函数的返回类型的好处是，如果我们尝试返回不同类型的元组，类型检查器会抛出错误。

function getTuple(): [number, number] {
  // 错误: 类型 '[number, number, number]'
  // 不可分配给类型“[number，number]”
  return [10, 100, 1000];
}

如果你没有显式设置函数的返回类型，TypeScript 会推断它是 number[] 而不是 [number, number]。

// function getTuple(): number[]
function getTuple() {
  return [10, 100];
}

可能还会看到 const 断言的使用方式与我们输入函数返回值的方式类似。

// function getTuple3(): readonly [10, 10]
function getTuple3() {
  return [10, 10] as const;
}

示例中的函数返回一个只读数组，其中包含 2 个值为 10 的数字。

这两种方法之间存在一些差异。 请注意，如果没有明确地将类型设置为只读或使用 const 断言，它仍然可以被模拟。

function getTuple(): [number, number] {
  return [10, 100];
}

const t = getTuple();
t.push(1000);

console.log(t); // [10, 100, 1000]

如果想使用这种方法但希望元组是只读的，请将函数的返回类型传递给 Readonly 实用程序类型。

function getTuple(): Readonly<[number, number]> {
  return [10, 100];
}

const t = getTuple();
// Error: 类型'readonly [number, number]'.ts（2339）上不存在属性'push'
t.push(1000);

Readonly 实用程序类型构造一个所有属性都设置为只读的类型。