迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/08/06 浏览次数:

要声明具有元组(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 实用程序类型构造一个所有属性都设置为只读的类型。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便