TypeScript 的数组类型

简介: TypeScript 的数组类型

简介

JavaScript 数组在 TypeScript 里面分成两种类型,分别是:

  • 数组(array
  • 元组(tuple)

TypeScript 数组有一个根本特征:所有成员的类型必须相同,但是成员数量是不确定的,可以是无限数量的成员,也可以是零成员。

数组的类型有两种写法。第一种写法是在数组成员的类型后面,加上一对方括号。

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

上面示例中,数组arr的类型是number[],其中number表示数组成员类型是number。

如果数组成员的类型比较复杂,可以写在圆括号里面。

let arr: (number | string)[];

上面示例中,数组arr的成员类型是number|string。

这个例子里面的圆括号是必须的,否则因为竖杠|的优先级低于[],TypeScript 会把number|string[]理解成number和string[]的联合类型。

如果数组成员可以是任意类型,写成any[]。当然,这种写法是应该避免的。

let arr: any[];

数组类型的第二种写法是使用 TypeScript 内置的 Array 接口。

let arr: Array<number> = [1, 2, 3];

上面示例中,数组arr的类型是Array,其中number表示成员类型是number。

这种写法对于成员类型比较复杂的数组,代码可读性会稍微好一些。

let arr: Array<number | string>;

这种写法本质上属于泛型,这里只要知道怎么写就可以了,详细解释参见《泛型》一章。另外,数组类型还有第三种写法,因为很少用到,本章就省略了,详见《interface 接口》一章。

数组类型声明了以后,成员数量是不限制的,任意数量的成员都可以,也可以是空数组。

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

上面示例中,数组arr无论有多少个成员,都是正确的。

这种规定的隐藏含义就是,数组的成员是可以动态变化的。

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

arr[3] = 4;
arr.length = 2;

arr; // [1, 2]

上面示例中,数组增加成员或减少成员,都是可以的。

正是由于成员数量可以动态变化,所以 TypeScript 不会对数组边界进行检查,越界访问数组并不会报错。

let arr: number[] = [1, 2, 3];
let foo = arr[3]; // 正确

上面示例中,变量foo的值是一个不存在的数组成员,TypeScript 并不会报错。

TypeScript 允许使用方括号读取数组成员的类型。

type Names = string[];
type Name = Names[0]; // string

上面示例中,类型Names是字符串数组,那么Names[0]返回的类型就是string。

由于数组成员的索引类型都是number,所以读取成员类型也可以写成下面这样。

type Names = string[];
type Name = Names[number]; // string

上面示例中,Names[number]表示数组Names所有数值索引的成员类型,所以返回string。

数组的类型推断

如果数组变量没有声明类型,TypeScript 就会推断数组成员的类型。这时,推断行为会因为值的不同,而有所不同。

如果变量的初始值是空数组,那么 TypeScript 会推断数组类型是any[]。

// 推断为 any[]
const arr = [];

后面,为这个数组赋值时,TypeScript 会自动更新类型推断。

const arr = [];
arr; // 推断为 any[]

arr.push(123);
arr; // 推断类型为 number[]

arr.push("abc");
arr; // 推断类型为 (string|number)[]


上面示例中,数组变量arr的初始值是空数组,然后随着新成员的加入,TypeScript 会自动修改推断的数组类型。

但是,类型推断的自动更新只发生初始值为空数组的情况。如果初始值不是空数组,类型推断就不会更新。

只读数组,const 断言

JavaScript 规定,const命令声明的数组变量是可以改变成员的。

const arr = [0, 1];
arr[0] = 2;

上面示例中,修改const命令声明的数组的成员是允许的。

但是,很多时候确实有声明为只读数组的需求,即不允许变动数组成员。

TypeScript 允许声明只读数组,方法是在数组类型前面加上readonly关键字。

const arr: readonly number[] = [0, 1];


arr[1] = 2; // 报错
arr.push(3); // 报错
delete arr[0]; // 报错


上面示例中,arr是一个只读数组,删除、修改、新增数组成员都会报错。


TypeScript 将readonly number[]与number[]视为两种不一样的类型,后者是前者的子类型。


这是因为只读数组没有pop()、push()之类会改变原数组的方法,所以number[]的方法数量要多于readonly number[],这意味着number[]其实是readonly number[]的子类型。

我们知道,子类型继承了父类型的所有特征,并加上了自己的特征,所以子类型number[]可以用于所有使用父类型的场合,反过来就不行。

let a1: number[] = [0, 1];
let a2: readonly number[] = a1; // 正确

a1 = a2; // 报错

上面示例中,子类型number[]可以赋值给父类型readonly number[],但是反过来就会报错。

由于只读数组是数组的父类型,所以它不能代替数组。这一点很容易产生令人困惑的报错。

function getSum(s: number[]) {
  // ...
}

const arr: readonly number[] = [1, 2, 3];
getSum(arr); // 报错

上面示例中,函数getSum()的参数s是一个数组,传入只读数组就会报错。原因就是只读数组是数组的父类型,父类型不能替代子类型。这个问题的解决方法是使用类型断言getSum(arr as number[]),详见《类型断言》一章。


注意,readonly关键字不能与数组的泛型写法一起使用。

// 报错
const arr: readonly Array<number> = [0, 1];

上面示例中,readonly与数组的泛型写法一起使用,就会报错。

实际上,TypeScript 提供了两个专门的泛型,用来生成只读数组的类型。

const a1: ReadonlyArray<number> = [0, 1];

const a2: Readonly<number[]> = [0, 1];

上面示例中,泛型ReadonlyArray和Readonly<T[]>都可以用来生成只读数组类型。两者尖括号里面的写法不一样,Readonly<T[]>的尖括号里面是整个数组(number[]),而ReadonlyArray的尖括号里面是数组成员(number)。


只读数组还有一种声明方法,就是使用“const 断言”。

const arr = [0, 1] as const;

arr[0] = [2]; // 报错

上面示例中,as const告诉 TypeScript,推断类型时要把变量arr推断为只读数组,从而使得数组成员无法改变。

多维数组

TypeScript 使用T[][]的形式,表示二维数组,T是最底层数组成员的类型。

var multi: number[][] = [
  [1, 2, 3],
  [23, 24, 25],
];


上面示例中,变量multi的类型是number[][],表示它是一个二维数组,最底层的数组成员类型是number。

目录
相关文章
|
8天前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
25 1
typeScript进阶(9)_type类型别名
|
8天前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
25 4
|
8天前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
23 1
|
8天前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
20 0
|
8天前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
21 0
|
3月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
8天前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
12 1
|
8天前
|
JavaScript
typeScript基础(6)_数组类型
本文介绍了TypeScript中数组的类型表示方法,包括直接使用类型加`[]`定义数组类型,以及使用数组泛型`Array<类型>`定义数组。同时,还展示了如何定义包含多种数据类型的数组。
20 1
|
6天前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
8天前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
10 0
下一篇
无影云桌面