太仓网站优化,做食品检测的网站,岳阳优化公司,网站服务公司案例大家好#xff0c;我是半虹#xff0c;这篇文章来讲 TypeScript 中的数组以及元组类型 1、概述
在 JavaScript 中的数组#xff0c;在 TypeScript 里#xff0c;可具体分为数组以及元组两种类型
先来简单对比一下区别#xff1a;
JavaScript 中的数组#xff0c;可以用…大家好我是半虹这篇文章来讲 TypeScript 中的数组以及元组类型 1、概述
在 JavaScript 中的数组在 TypeScript 里可具体分为数组以及元组两种类型
先来简单对比一下区别
JavaScript 中的数组可以用于存放类型不同、数量不定的元素TypeScript 中的数组通常用于存放类型相同、数量不定的元素TypeScript 中的元组通常用于存放类型不同、数量确定的元素
下面我们再来详细介绍 TypeScript 中数组以及元组的相关概念和使用 2、数组
1特征
TypeScript 中的数组本质上也是特殊的对象这与 JavaScript 中的数组是一样的
除此之外TypeScript 中的数组有两个关键的特征
元素类型必须相同【重要】元素数量可以改变【重要】
这些特征决定着 TypeScript 数组的使用场景 2声明
显式声明数组类型写法有二
类型后加方括号 []泛型这里只介绍写法关于泛型的详细说明后面会写一篇文章单独介绍
// 写法一类型后加方括号
// 情况一普通类型
let arr1:number[] [1, 2, 3];// 写法一类型后加方括号
// 情况二复杂类型
let arr2:(number|string)[] [1, 2, 3];// 写法一类型后加方括号
// 情况三多维数组
let arr3:(number|string)[][] [[1], [2, 3]];// 写法二泛型
// 情况一普通类型
let arr4:Arraynumber [1, 2, 3];// 写法二泛型
// 情况二复杂类型
let arr5:Arraynumber|string [1, 2, 3];// 写法三泛型
// 情况三多维数组
let arr6:ArrayArraynumber|string [[1], [2, 3]];// 验证二元素数量可以改变arr1.pop(); // 编译正常
arr1.push(4); // 编译正常// 验证一元素类型必须相同arr1.push(56); // 编译报错
arr1.push(true); // 编译报错如果没有显式声明就会进行隐式推导
let arr0 []; // 此时推断为never[]
let arr1 [1, 2, 3]; // 此时推断为number[]
let arr2 [1, 2, 3]; // 此时推断为(number|string)[]
let arr3 [[1], [2, 3]]; // 此时推断为(number|string)[][]arr1.push(1); // 编译报错
arr0.push(1); // 只是语法提示错误但是编译没有报错3只读数组
如果想要声明一个只读数组你可能会第一时间想到使用 const 关键字
但是就和对象一样使用 const 只是不能重新赋值但仍可以修改元素不是真正意义上的只读
const arr0:number[] [1, 2, 3];// 删、增、改都可执行
// 但重新赋值不被允许arr0.pop(); // 编译正常
arr0.push(4); // 编译正常
arr0[0] 0; // 编译正常arr0 [1, 3, 5]; // 编译报错想要实现真正意义上的只读可以使用 readonly 关键字或特殊泛型 Readonly / ReadonlyArray
// 声明只读数组使用 readonly 关键字注意 readonly 关键字不能和泛型一起使用const arr1:readonly number[] [1, 2, 3];arr1.pop(); // 编译报错
arr1.push(4); // 编译报错
arr1[0] 0; // 编译报错// 声明只读数组使用 Readonly 或 ReadonlyArray 泛型const arr2:Readonlynumber[] [1, 2, 3];
const arr3:ReadonlyArraynumber [1, 2, 3];const arr4:ReadonlyArraynumber [1, 2, 3];实际上只读数组没有 pop、push 等修改元素的方法因此可进行的操作是普通数组操作的子集
【引理】由于子类型会在继承父类型的基础上增加自己的方法
【推论】也就是说普通数组是只读数组的子类型只读数组是普通数组的父类型
【引理】由于任何能使用父类型的地方都可以使用子类型代替但反之不行
【推论】所以只读数组无法代替普通数组直接使用
想要解决这一问题可以用类型断言告诉编译器某个值确实就是某种类型
function sumArr(arr: number[]) {return arr.reduce((prev, curr) prev curr);
}// 普通数组
const arr1:number[] [1, 2, 3];
sumArr(arr1); // 编译正常// 只读数组
const arr2:readonly number[] [1, 2, 3];
sumArr(arr2); // 编译报错
sumArr(arr2 as number[]); // 类型断言编译正常3、元组
1特征
元组本质上就是特殊的数组可以看作是数组的子类型
元组关键的特征也是有两个正好与数组相反
元素类型可以不同但在声明时需要指定【重要】元素数量无法改变也在声明时就要指定【重要】
这些不同的特征决定着二者有不同的应用场景 2声明
元组类型必须显式声明因为元组的赋值语法和数组赋值一模一样
并且就像上面说的那样声明元组时需要单独为每个元素指定类型
// 显式声明时
// 若是成员的类型写在方括号之外则说明是数组类型
// 若是成员的类型写在方括号之内则说明是元组类型【重要注意区别】// 声明元组
// 单一类型数量为三
let tuple1:[number, number, number] [1, 2, 3]; // 赋值的语法数组和元组一样// 声明元组
// 不同类型数量为三
let tuple2:[number, string, number] [1, 2, 3]; // 赋值的语法数组和元组一样如果没有进行显式声明那么就会被默认推导为数组
let arr1 [1, 2, 3]; // 这个语句在介绍数组时已经出现过3可选元素
就和对象类型一样元组类型同样支持可选元素这样赋值时该元素就可以被忽略不算
只需声明元组类型时在该元素后面加上问号即可但要注意可选元素要在必选元素之后
// 声明时
let tuple1:[number?, string]; // 编译报错可选元素要在必选元素之后
let tuple2:[number, string?]; // 编译正常// 赋值时
tuple2 [1, 2]; // 可选元素既能赋值
tuple2 [1]; // 也能省略元组中的元素数量通常在声明时就能确定具体值但是使用可选元素之后就没这么简单了
编译器在进行访问检查时会认为所有可能的元素数量都是合法的
// 声明时
let tuple2:[number, string?] [1];// 访问时
tuple2[0]; // 编译正常元素数量有可能是 1当可选元素被赋值时运行时访问结果也符合预期为 1
tuple2[1]; // 编译正常元素数量有可能是 2当可选元素被忽略时运行时访问结果不符合预期为 undefined
tuple2[2]; // 编译报错元素数量不可能是 34剩余元素
元组类型支持剩余元素表示可以接收任意多个指定类型的元素
声明时可以在任意位置使用拓展运算符来展开一个数组或元组
// 剩余元素放在最后拓展运算符 (...) 后面是布尔类型数组
let tuple1:[number, string, ...boolean[]];// 剩余元素放在中间拓展运算符 (...) 后面是布尔类型数组
let tuple2:[number, ...boolean[], string];// 剩余元素放在最前拓展运算符 (...) 后面是布尔类型数组
let tuple3:[...boolean[], number, string];// 赋值
tuple1 [1, 2]; // 剩余元素赋予零个值也行
tuple1 [1, 2, true]; // 剩余元素赋予一个值也行
tuple1 [1, 2, true, false]; // 剩余元素赋予两个值也行// 使用场景如
// 指定一个至少接收一个字符串的元组
let tuple4:[string, ...string[]];5只读元组
最后再来介绍只读元组就和数组一样const 关键字无法做到真正意义上的只读
正确的做法是使用 readonly 关键字或特殊泛型 Readonly
// 声明只读元组使用 readonly 关键字
let tuple1:readonly [number, string];// 声明只读元组使用 Readonly 泛型
let tuple2:Readonly[number, string];好啦本文到此结束感谢您的阅读
如果你觉得这篇文章有需要修改完善的地方欢迎在评论区留下你宝贵的意见或者建议
如果你觉得这篇文章还不错的话欢迎点赞、收藏、关注你的支持是对我最大的鼓励 (/ω)
