3. TypeScript—数组类型
在 TypeScript 中,数组类型有多种定义方式,比较灵活。
最简单的方法是使用类型 []
来表示数组:
let fibonacci: number[] = [1, 1, 2, 3, 5];
数组的项是不允许出现其他的类型,否则编译会报错:
let fibonacci: number[] = [1, '1', 2, 3, 5];
数组的一些方法的参数也会根据数组在定义时约定的类型进行限制:
let fibonacci: number[] = [1, 1, 2, 3, 5]; fibonacci.push('8');
上例中,push 方法只允许传入 number 类型的参数,但是却传了一个 “8” 类型的参数,所以编译也会报错了。
用数组泛型表示数组
我们也可以使用数组泛型Array<elemType> 来表示数组:
let nums: Array<number> = [1, 1, 2, 3, 5];
关于泛型,可以下面会具体讲解。这里主要是想介绍数组泛型可以定义数组。
用接口表示数组
接口也可以用来描述数组(接口后面也会具体讲解):
interface NumberArray { [index: number]: number; } let fibonacci: NumberArray = [1, 1, 2, 3, 5];
上面的NumberArray 表示:只要索引的类型是数字时,那么值的类型必须是数字。虽然接口也可以用来描述数组,但是我们一般不会这么做,因为这种方式比前两种方式复杂多了,只是稍微了解一下而已。
类数组
类数组(Array-like Object)不是数组类型,比如 arguments:
function sum() { let args: number[] = arguments; }
上例中,arguments 实际上是一个类数组,不能用普通的数组的方式来描述,而应该用接口:
function sum() { let args: { [index: number]: number; length: number; callee: Function; } = arguments; }
在这个例子中,我们除了约束当索引的类型是数字时,值的类型必须是数字之外,也约束了它还有 length 和 callee 两个属性。
事实上常用的类数组都有自己的接口定义,如 IArguments, NodeList, HTMLCollection 等:
function sum() { let args: IArguments = arguments; }
其中 IArguments
是 TypeScript 中定义好了的类型,它实际上就是:
interface IArguments { [index: number]: any; length: number; callee: Function; }
any 在数组中的应用
一个比较常见的做法是,用 any 表示数组中允许出现任意类型:
let list: any[] = ['xcatliu', 25, { website: 'http://www.baidu.com' }];
通过Array对象创建数组
我们也可以使用 Array 对象new Array()
创建数组。Array 对象的构造函数接受以下两种值:表示数组大小的数值。初始化的数组列表,元素使用逗号分隔值。
//指定数组初始化大小: let arr_names:number[] = new Array(4) arr_names[1]=12 //或者直接初始化时声明数组元素: let sites:string[] = new Array("Google","csdn","haiexijun","Facebook")
数组解构
我们也可以把数组元素赋值给变量,如下所示:
let arr:number[] = [12,13] let [x,y] = arr // 将数组的两个元素赋值给变量 x 和 y console.log(x) console.log(y)
数组迭代
我们可以使用 for in语句来循环输出数组的各个元素:
let j:any; let nums:number[] = [1001,1002,1003,1004] //迭代打印 for(j in nums) { console.log(nums[j]) }
多维数组
一个数组的元素可以是另外一个数组,这样就构成了多维数组。最简单的多维数组是二维数组,定义方式如下:
let multiArr:number[][] = [[1,2,3],[23,24,25]] console.log(multi[0][1]) //输出2
数组在函数中的使用
数组可以作为参数传递给函数:
let sites:string[] = new Array("Google","CSDN","Taobao","haiexijun") function alertSite(arr_sites:string[]) { for(let i = 0;i<arr_sites.length;i++) { console.log(arr_sites[i]) } } alertSite(sites); //输出结果为 Google CSDN Taobao haiexijun
数组还可以作为函数的返回值:
function alertName():string[] { return new Array("Google", "CSDN", "Taobao", "haiexijun"); } let sites:string[] = alertName() for(let i in sites) { console.log(sites[i]) } //输出结果为 Google CSDN Taobao haiexijun
常用数组方法总结
这些数组方法的具体用法不清楚可以再去百度,这里不再代码举例,毕竟那些东西都是js的内容了。
4. TypeScript—联合类型
联合类型(Union Types)表示取值可以为多种类型中的一种。语法为:类型1|类型2|类型3
let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; myFavoriteNumber = 7; myFavoriteNumber = true; //这里报错
这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型。
联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:
let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; console.log(myFavoriteNumber.length); // 5 myFavoriteNumber = 7; console.log(myFavoriteNumber.length); // 编译时报错 number类型没有length属性
上例中,第二行的 myFavoriteNumber 被推断成了 string,访问它的 length 属性不会报错。
而第四行的 myFavoriteNumber 被推断成了 number,访问它的 length 属性时就报错了。
5. TypeScript—Map对象
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。Map 是 ES6 中引入的一种新的数据结构,可以参考 ES6 Map 与 Set。
创建 Map对象并对其进行操作
TypeScript 使用 Map 类型和 new 关键字来创建 Map:
//创建 Map对象 let myMap = new Map(); // 设置 Map 对象用set(key,value)方法 myMap.set("Google", 1); myMap.set("CSDN", 2); myMap.set("Taobao", 3); // 获取键对应的值用get()方法 console.log(myMap.get(" CSDN")); //2 // 判断 Map 中是否包含键对应的值用has()方法 console.log(myMap.has("Taobao")); // true console.log(myMap.has("Zhihu")); // false // 返回 Map 对象键/值对的数量 console.log(nameSiteMapping.size); // 3 // 删除 CSDN console.log(myMap.delete("CSDN")); // true console.log(myMap); // 移除 Map 对象的所有键/值对 myMap.clear(); console.log(myMap); // 迭代 Map 中的 key for (let key of myMap.keys()) { console.log(key); } // 迭代 Map 中的 value for (let value of myMap.values()) { console.log(value); } // 迭代 Map 中的 key => value for (let entry of myMap.entries()) { console.log(entry[0], entry[1]); }