TypeScript 中声明一个返回类型为元组（Tuple）的函数

Z时代
2024-01-10
分类：综合

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


// 命名函数返回元组
functiongetTuple(): [number, number] {
return [5, 10];
}
// 使用箭头函数返回元组
const getTuple2 = (): [string, string] => {
return ['hello', 'world'];
};
// 使用 type 关键字
type Numbers = [number, number];
functiongetTuple4(): Numbers {
return [10, 10];
}

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

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


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

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

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


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

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


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

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


// function getTuple3(): readonly [10, 10]
functiongetTuple3() {
return [10, 10] asconst;
}

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

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


functiongetTuple(): [number, number] {
return [10, 100];
}
const t = getTuple();
t.push(1000);
console.log(t); // [10, 100, 1000]

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


functiongetTuple(): Readonly<[number, number]> {
return [10, 100];
}
const t = getTuple();
// Error: 类型'readonly [number, number]'.ts（2339）上不存在属性'push'
t.push(1000);