5. TypeScript中的数组和元组

在TypeScript中,数组和元组是组织和管理数据的重要工具。本文将深入探讨TypeScript中数组和元组的使用,包括它们的定义、操作方法以及在实际开发中的应用。

数组的使用

数组是一种线性数据结构,尽管在JavaScript可以存取不同的数据类型,但是在TypeScript中用于存储相同类型的元素集合。在TypeScript中,数组可以通过两种方式定义:一种是使用元素类型后跟[],另一种是使用泛型数组类型Array<元素类型>。更推荐第一种方式,不建议使用泛型,因为他可能在JSX中与一些标签冲突。

数组类型定义

// 方式一:元素类型后跟[]
let list: number[] = [1, 2, 3];// 方式二:泛型数组类型
let list: Array<number> = [1, 2, 3];

数组操作

TypeScript数组支持JavaScript数组的所有操作方法,如pushpopslicemapfilter等。

let fruits: string[] = ['Apple', 'Orange', 'Banana'];// 添加元素
fruits.push('Mango');// 移除元素
let lastFruit = fruits.pop();// 遍历数组
fruits.forEach((fruit) => console.log(fruit));// 映射新数组
let lengths = fruits.map((fruit) => fruit.length);

数组解构

TypeScript支持数组解构,这是一种便捷的赋值方式,可以直接从数组中提取值到变量中。

let [firstFruit, secondFruit] = fruits;
console.log(firstFruit); // 输出 'Apple'
console.log(secondFruit); // 输出 'Orange'

只读数组

TypeScript提供了ReadonlyArray<T>类型,确保数组创建后不可以被修改。

let readonlyFruits: ReadonlyArray<string> = ['Apple', 'Orange'];
readonlyFruits.push('Banana'); // 错误:`push`方法在`ReadonlyArray`上不存在

元组的使用

元组是另一种TypeScript中的数据类型,它允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

元组类型定义

// 定义一个元组类型
let userInfo: [string, number];
userInfo = ['Alice', 28]; // 正确
userInfo = [28, 'Alice']; // 错误:类型不匹配

元组操作

元组的操作和数组类似,但需要注意的是,当直接对元组进行索引操作时,TypeScript会进行严格的类型检查。

let person: [string, number] = ['Bob', 25];// 访问元素
let name = person[0]; // 类型为string
let age = person[1]; // 类型为number// 错误的操作
person[1] = '25'; // 错误:不能将类型“string”分配给类型“number”

元组的可选元素和剩余元素

TypeScript 2.6引入了元组中的可选元素,允许某些元素是可选的。TypeScript 3.0引入了剩余元素,允许元组有任意数量的尾随元素。

// 可选元素
let optionalTuple: [string, number?][] = [['Tom'], ['Jerry', 30]];// 剩余元素
let restTuple: [string, ...number[]] = ['hello', 1, 2, 3];

元组的解构

元组也支持解构,这使得从元组中提取值变得非常方便。

let [userName, userAge] = userInfo;

实际应用

在实际开发中,数组和元组的使用场景非常广泛。数组通常用于存储一组相同类型的数据,而元组则适用于那些需要管理不同类型数据的场景,例如从函数返回多个值。

函数中使用元组

function getStudentInfo(): [string, number] {// 返回一个元组return ['John', 22];
}let [studentName, studentAge] = getStudentInfo();

TypeScript中的枚举和元组结合

enum Color {Red, Green, Blue}
let colorName: [Color, string] = [Color.Red, 'Red'];

总结

元组在原生javascript中不存在,通过在TypeScript中进行扩展,可以充分发挥它的安全性检查和约束规范的作用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

script标签中defer和async的区别

如果没有defer或async属性&#xff0c;浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素&#xff0c;读取到就会开始加载和执行&#xff0c;这样就阻塞了后续文档的加载。 js脚本网络加载时间&#xff0c;红色代表js脚本执行时间&#xff0c;绿色代表html解析…

每日OJ题_两个数组dp⑥_力扣97. 交错字符串

目录 力扣97. 交错字符串 解析代码 力扣97. 交错字符串 97. 交错字符串 难度 中等 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子…

day21-二叉树part08

235. 二叉搜索树的最近公共祖先 相对于 二叉树的最近公共祖先 本题就简单一些了&#xff0c;因为 可以利用二叉搜索树的特性无需全部遍历。特点&#xff1a;当前节点在p&#xff0c;q节点之前则必为最近公共祖先 class Solution {public TreeNode lowestCommonAncestor(TreeNo…

Leetcode面试经典150_Q80删除有序数组中的重复项 II

题目&#xff1a; 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件…

C# WinForm —— 06 常用控件

公共控件功能Label标签&#xff0c;UI上的提示性文字TextBox文本框RadioButton单选按钮CheckBox复选框ComboBox下拉框&#xff0c;只能选择一个选项CheckedListBox带复选框的列表项&#xff0c;可以选择多个选项的下拉菜单DateTimePicker日期时间选择控件ListBox列表框ListView…

C++ 学习笔记

文章目录 【 字符串相关 】C 输入输出流strcpy_s() 字符串复制输出乱码 【 STL 】各个 STL 支持的常见方法 ? : 运算符switch case 运算符 switch(expression) {case constant-expression :statement(s);break; // 可选的case constant-expression :statement(s);break; //…

HarmonyOS实战开发-如何实现电话服务中SIM卡相关功能

介绍 本示例使用sim相关接口&#xff0c;展示了电话服务中SIM卡相关功能&#xff0c;包含SIM卡的服务提供商、ISO国家码、归属PLMN号信息&#xff0c;以及默认语音卡功能。 效果预览 使用说明&#xff1a; 1.若SIM卡槽1插入SIM卡则SIM卡1区域显示为蓝色&#xff0c;否则默认…

创建个人百度百科需要什么条件?

互联网时代&#xff0c;创建百度百科词条可以给个人带来更多的曝光和展现&#xff0c;相当于一个镀金的网络名片&#xff0c;人人都想上百度百科&#xff0c;但并不是人人都能创建上去的。 个人百度百科词条的创建需要满足一定的条件&#xff0c;今天伯乐网络传媒就来给大家聊聊…

P1123 取数游戏(dfs算法)

题目描述 一个 NM 的由非负整数构成的数字矩阵&#xff0c;你需要在其中取出若干个数字&#xff0c;使得取出的任意两个数字不相邻&#xff08;若一个数字在另外一个数字相邻 8个格子中的一个即认为这两个数字相邻&#xff09;&#xff0c;求取出数字和最大是多少。 输入格式 第…

关联式容器——map和set详解

troop主页 今日鸡汤&#xff1a;Never bend your head.Always hold it high.Look the world straight in the face. 加油&#xff01;成为最好的编程大师 前言 我们前几篇文章讲了搜索二叉树&#xff0c;我们提到了搜索二叉树的应用就是K结构和KV结构&#xff0c;今天我们要提…

Vue3中的computed,watch和watchEffect的特点

1.computed 1&#xff09;computed拥有缓存性&#xff0c;多次调用会直接从缓存中获取&#xff0c;而不会重新执行&#xff0c;只有相依赖的数据发生改变才会重新计算&#xff0c;所以说computed性能很高。 例&#xff1a;下面是同时调用三次计算属性firstTotal和三次函数first…

扬帆出海扩规模,仍是比亚迪未来的发展关键?

又到了新能源车企公布阶段性成果的时期。 日前&#xff0c;乘联会预估2024年3月全国新能源乘用车厂商批发销量82万辆&#xff0c;同比增长33%&#xff0c;环比增长84%。其中&#xff0c;比亚迪继续领跑&#xff0c;3月销量超30万辆&#xff0c;环比增长147.8%&#xff0c;而这…

ABAP 的 AT NEW 语法

AT NEW一般用在LOOP里面。 当我们在LOOP里面处理数据的时候&#xff0c;经常要执行的是当一个字段值改变了&#xff0c;然后我们怎么怎么做。这个就是要用AT NEW。其实有点像分组。 解释起来就是&#xff0c;我有一个内表itab里面有很多行数据&#xff0c;我现在一条一条的lo…

简单用Nodejs + express 编写接口

文章目录 get接口示范post接口示范注意点 准备工作可以看上一篇文章&#xff1a;文章链接》》 get接口示范 app.get(/, (req, res) > {res.send("Hello World"); })因为是get接口&#xff0c;所以可以直接在浏览器上请求&#xff08;端口地址接口名&#xff09;…

测开面经(Git经典题目,Git入门)

1. GitHub是什么 a. Git是一个分布式版本控制系统&#xff0c;作用是跟踪、管理和协调软件开发项目中的代码更改。 b. 提供了一种有效的方式来管理代码的版本历史&#xff0c;以及多人协作开发的能力。 2. Git的作用有哪些 a. 版本控制&#xff1a;Git可以记录每次代码更改的…

基于51单片机轮胎胎压监测系统—数码管显示

基于51单片机轮胎胎压监测系统 &#xff08;仿真&#xff0b;程序&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.MPX4115压力传感器胎压检测&#xff1b; 2.ADC0832进行模数转换后&#xff0c;51单片机处理控制&#xff1b; 3.数码管显示胎压&#xff…

想要品牌传播有效,先清楚这三个本质问题

在互联网时代&#xff0c;企业想要提高市场竞争力就需要做好品牌传播。然而有许多企业在做品牌传播时都会踩坑&#xff0c;原因是因为忽视了这三点&#xff0c;接下来就让媒介盒子和大家分享&#xff1a; 一、 文案本质是“购买理由” 在文案技巧中经常会出现一些词&#xff…

1. TypeScript: JavaScript 的超集,为大型应用而生

引言 在现代的前端开发领域&#xff0c;JavaScript 无疑是一门极其流行的语言。然而&#xff0c;随着前端项目的日益复杂&#xff0c;JavaScript 本身的一些特性使得维护和扩展大型代码库变得困难。这就是 TypeScript 应运而生的背景。TypeScript 是一种由微软开发的开源语言&…

java中如何使用Rabbitmq?

1、添加相关的依赖 在Java中使用RabbitMQ&#xff0c;你需要先确保RabbitMQ服务器已经安装并运行在你的机器上或者某个服务器上。然后&#xff0c;你需要在Java项目中添加RabbitMQ的Java客户端库作为依赖。对于Maven项目&#xff0c;你可以在pom.xml文件中添加以下依赖&#x…

SSL的起源和发展史

随着网络技术的发展&#xff0c;当前各大浏览器厂商都对尚未使用SSL证书&#xff0c;切换到HTTPS的网站做了风险预警。SSL证书的如此重要&#xff0c;你了解SSL证书的诞生和发展史吗&#xff1f;跟随本文一起来了解SSL的前世今生。 SSL协议的诞生 Netscape&#xff08;网景通…