TypeScript 从入门到进阶之基础篇(三) 元组类型篇

本文介绍了TypeScript中的元组类型,包括其定义、使用场景(如多值返回、固定数据处理和类型注解)、以及在函数参数中的应用。同时讨论了元组的异常情况,如长度不匹配、越界访问和类型不匹配的错误处理。
摘要由CSDN通过智能技术生成

在这里插入图片描述

系列文章目录

TypeScript 从入门到进阶系列

  1. TypeScript 从入门到进阶之基础篇(一) ts基础类型篇
  2. TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇
  3. TypeScript 从入门到进阶之基础篇(三) 元组类型篇
  4. TypeScript 从入门到进阶之基础篇(四) symbol类型篇
    持续更新中…


前言

在前面 我们学习了 在TypeScript 中如何使用、定义基础类型以及 TypeScript 中 引用类型的使用、定义,本章我们来讲解一个TypeScript 中独有的 元组 类型

在TypeScript中,元组类型是一种特殊的数组类型,它允许你在一个数组中存储多个不同类型的元素。元组类型使用固定的序列来定义每个元素的类型,并且元素的数量是有限的。
*注意:元组就是数组的变种是固定数量的不同类型的元素的组合

一、在TypeScript中使用元组

在TypeScript中使用元组,其实和数组的定义差不多,但和数组不同的是元组的数量是固定的,元组的好处在于可以把多个元素作为一个单元传递

//元组的定义 和数组差不多是吧 但是区别是每一项的类型可以不同,数量是固定的 且不能有数组的一些操作
let arr1:[string,number]=['我是元组中的一项'1]

//错误使用例子1
arr1.push('其实我添加不了')
arr1.pop()

二、TypeScript 中元组的使用场景

TypeScript中的元组(Tuple)主要用于表示具有固定数量和类型的元素的数组。元组可以在以下场景中使用:

1、让函数返回多个值:

通常情况下,函数只能返回一个值。但是通过使用元组,可以将多个相关的值打包成一个返回值。这在需要一次性返回多个结果的情况下非常有用。

function getUserInfo(): [string, number] {
  let name: string = "John";
  let age: number = 30;
  return [name, age];
}

let [name, age] = getUserInfo();
console.log(`Name: ${name}, Age: ${age}`); // 输出:Name: John, Age: 30

2. 处理具有固定数量和类型的数据:

有时需要处理某种特定类型的数据,且元素的数量和类型是固定的。例如,表示一个坐标的二维元组。

let coordinate: [number, number] = [10, 20];
console.log(`X: ${coordinate[0]}, Y: ${coordinate[1]}`); // 输出:X: 10, Y: 20

3. 作为函数参数的类型注解:

可以使用元组作为函数参数的类型注解,确保传入的参数与指定的数量和类型匹配。

function calculateArea(coordinates: [number, number]): number {
  let [x, y] = coordinates;
  return x * y;
}

let area = calculateArea([10, 20]);
console.log(area); // 输出:200

总之,元组可以用于处理具有固定数量和类型的数据,并且可以在函数返回多个值或作为函数参数的类型注解时非常有用。

三、 使用元组的异常情况

在TypeScript中,元组是指定数组中元素类型的一种特殊数组类型。与普通数组不同的是,元组中的每个位置可以有不同的类型。

以下是一些在使用元组时会报错的情况:

1、元组长度不匹配:

当元组声明的长度与实际使用时的长度不匹配时,会报错。

let tuple: [number, string] = [1, "hello", true]; // 报错:元组长度不匹配

2、越界访问:

当访问元组中不存在的位置时,会报错。

let tuple: [number, string] = [1, "hello"];
console.log(tuple[2]); // 报错:越界访问

3. 类型不匹配:

当给元组赋值时,类型不匹配会报错。

let tuple: [number, string] = [1, "hello"];
tuple[0] = "world"; // 报错:类型不匹配

需要注意的是,元组的类型声明在使用时是静态检查的,但在运行时是没有影响的。即使出现了类型错误,仍然可以编译成功,但可能会导致运行时错误。在TypeScript中,元组是指定数组中元素类型的一种特殊数组类型。与普通数组不同的是,元组中的每个位置可以有不同的类型。

  • 31
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枫ゞ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值