Typescript 中的数组、元组和枚举类型

简介: 本文介绍了`Typescript` 的数组类型和元组类型,声明数组有两种方式,可以声明为静态类型的数组,也可以使用 `any` 声明为动态类型的数组。元组是一种特殊的数组,特点是长度固定,元素类型固定。然后介绍了 `Typescript` 的枚举类型,枚举类型在开发中经常使用,配合 `switch` 语句十分强大。

数组

创建数组有两种方式。比如创建一个元素类型是 number 类型的数组:

let arr:number[] = [1, 2, 3, 4, 5];

还可以使用泛型创建数组:

let arr2:Array<number> = [1, 2, 3, 4, 5];

强类型语言中泛型使用的非常广泛,它不需要提前指定类型,直到真正要使用的时候再将类型通过参数的形式传递进来。

JS 中的数组非常灵活,长度不固定,元素类型任意。TS 也可以定义元素类型任意的数组:

// 元素类型是 number 或者 string
let arr3:(number|string)[] = [1, '2'];

使用 any 处理为动态类型的数组,表现就和 JS 一致了:

let arr3:any[] = [1, '2', false];

元组

元组类型是 TS 扩展的类型,原生 JS 中没有这个类型。

元组是一种特殊的数组,特点是长度固定元素类型固定

let person:[string, number] = ['kw', 18];

变量 person 的长度固定,类型也必须和声明的类型保持一一对应。如果将 person 的第一个元素改为其他非数字 string 类型,或者新增一个元素,都会报错:

person[0] = 20; // 报错:Type 'number' is not assignable to type 'string'.

person[2] = 30; // 报错:Type '30' is not assignable to type 'undefined'.

但是使用数组的 push 方法来给元组新增元素是不会报错的,并能能影响元组的值:

person.push(30);
console.log(person); // [ 'kw', 18, 30 ]

在使用元组时需要注意这一点。

还有,在声明元组时一定要指定类型,否则将会处理为普通的数组使用。

元组类型适合组织有规律的数据,比如定义一个学生,有姓名和学号,就适合使用元组类型来描述,方便代码进行处理。

枚举

枚举就是将一个类型的所有可能的值都列举出来。

枚举是一个很有用的功能。ES3 中就将 enum 作为保留字,但是直到现在,ECMAScript 规范中仍然没有实现枚举类型。

在 JS 中通常会使用一个对象模拟枚举来使用,比如要使用一个 Color,它有三个值:

let Color = {
    red:0,
    green: 1,
    blue: 2
}

如果使用枚举类型,应该这样定义:

enum Color {
    red,
    green,
    blue
}

枚举类型的成员的值默认从 0 开始。使用枚举:

let red = Color.red; // 0

变量 red 的类型就是 Color

image-20220910143613392

也可以自定义枚举成员的值:

enum Color {
    red = 5,
    green,
    blue
}

后面没有定义值的成员,将从 6 开始计算。

注意枚举和对象的区别,对象的 keyvalue 中间使用冒号 : 分割,枚举使用的赋值 =

枚举值除了是数字类型,还可以定义为其他类型,比如字符串类型:

enum Color {
    red = 'red',
    green = 'green',
    blue = 'blue'
}

let green = Color.green;
console.log(green); // 'green'

小结

本文介绍了Typescript 的数组类型和元组类型,声明数组有两种方式,可以声明为静态类型的数组,也可以使用 any 声明为动态类型的数组。元组是一种特殊的数组,特点是长度固定,元素类型固定。然后介绍了 Typescript 的枚举类型,枚举类型在开发中经常使用,配合 switch 语句十分强大。

目录
相关文章
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
47 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript中的枚举类型有哪些优点和缺点
【8月更文挑战第4天】 TypeScript中的枚举类型有哪些优点和缺点
54 3
|
1月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript
typeScript基础(6)_数组类型
本文介绍了TypeScript中数组的类型表示方法,包括直接使用类型加`[]`定义数组类型,以及使用数组泛型`Array<类型>`定义数组。同时,还展示了如何定义包含多种数据类型的数组。
39 1
|
2月前
|
JavaScript
typeScript进阶(12)_枚举类型
TypeScript中的枚举类型(Enum)允许值限定在一定范围内,枚举成员默认从0开始递增,也支持手动赋值及反向映射。枚举可以用于定义常量,提高代码可读性和维护性。枚举项可以是整数、浮点数或字符串,未手动赋值的项将按顺序递增。
31 0
|
3月前
|
JavaScript 安全 前端开发
TypeScript中的枚举类型有哪些应用场景
【8月更文挑战第4天】TypeScript中的枚举类型有哪些应用场景
67 5
|
4月前
|
JavaScript 前端开发 索引
TypeScript 的数组类型
TypeScript 的数组类型
46 1
|
5月前
|
JavaScript 网络架构 存储
6.【TypeScript 教程】TypeScript 元组(Tuple)
6.【TypeScript 教程】TypeScript 元组(Tuple)
35 2
|
5月前
|
JavaScript 安全
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
|
5月前
|
JavaScript 前端开发 C#
TypeScript 元组 枚举
TypeScript 元组 枚举