TypeScript基础常用知识点总结(二)

简介: TypeScript基础常用知识点总结

3. TypeScript—数组类型


在 TypeScript 中,数组类型有多种定义方式,比较灵活。

最简单的方法是使用类型 [] 来表示数组:


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


数组的项是不允许出现其他的类型,否则编译会报错:


let fibonacci: number[] = [1, '1', 2, 3, 5];


1333cae96a24420089355de23ca779cb.png


数组的一些方法的参数也会根据数组在定义时约定的类型进行限制:


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)


e72463146201401e80a69fba3495945e.png


数组迭代

我们可以使用 for in语句来循环输出数组的各个元素:


let j:any; 
let nums:number[] = [1001,1002,1003,1004] 
 //迭代打印
for(j in nums) { 
    console.log(nums[j]) 
}

65e8d48aafa74a28ab38ddac72286cdd.png


多维数组

一个数组的元素可以是另外一个数组,这样就构成了多维数组。最简单的多维数组是二维数组,定义方式如下:


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


常用数组方法总结


image.pngimage.png

这些数组方法的具体用法不清楚可以再去百度,这里不再代码举例,毕竟那些东西都是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]);   
}


相关文章
|
6月前
|
JavaScript 前端开发 安全
TypeScript基础知识点
TypeScript基础知识点
81 0
|
6月前
|
JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(下)
一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)。
|
6月前
|
存储 JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(上)
数组对象是使用单独的变量名来存储一系列的值。
|
6月前
|
JavaScript 前端开发 程序员
总结TypeScript 的一些知识点:TypeScript 声明文件
程序来输出 "Hello World" :当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好
总结TypeScript 的一些知识点:TypeScript 声明文件
|
JavaScript 前端开发 开发工具
TypeScript编程语言学习知识点总结
TypeScript编程语言学习知识点总结
64 0
|
JavaScript 前端开发 API
搭建 Vite + Vue 3 + TypeScript 的基础项目模板
搭建 Vite + Vue 3 + TypeScript 的基础项目模板
791 0
|
JavaScript
TypeScript基础笔记(小满版本)(六)
TypeScript基础笔记(小满版本)(六)
147 0
|
JavaScript 前端开发 编译器
TypeScript基础笔记(小满版本)(四)
TypeScript基础笔记(小满版本)(四)
231 0
|
XML JSON JavaScript
TypeScript基础笔记(小满版本)(五)
TypeScript基础笔记(小满版本)(五)
239 0
|
JavaScript 前端开发 数据库
TypeScript基础笔记(小满版本)(二)
TypeScript基础笔记(小满版本)(二)
245 0