TypeScript入门（二）-一一网

一、Map 对象

Map 是 ES6 中引入的一种新的数据结构，保存键值对，并且能够记住键的原始插入顺序。

Map使用方法：

new Map()：创建 Map
map.clear() – 移除 Map 对象的所有键/值对。
map.set() – 设置键值对，返回该 Map 对象。
map.get() – 返回键对应的值，如果不存在，则返回 undefined。
map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
map.size – 返回 Map 对象键/值对的数量。
map.keys() – 返回一个 Iterator 对象，包含了 Map 对象中每个元素的键。
map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);// Map { 'Google' => 1, 'Taobao' => 3 }

// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping); // Map {}

// 使用 es6 编译
tsc --target es6 test.ts
复制代码

迭代 Map方法：

TypeScript使用 for…of 来实现迭代：

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) { // Google、Runoob、Taobao
    console.log(key);                  
}
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {// 1、2、3
    console.log(value);                 
}
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {// Google 1、Runoob 2、Taobao 3
    console.log(entry[0], entry[1]);   
}
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {// Google 1、Runoob 2、Taobao 3
    console.log(key, value);            
}
复制代码

二、元组

数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

创建及访问方法：

var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) // 访问元组10
console.log(mytuple.length) // 元组长度
复制代码

操作方法：

push() 向元组添加元素，添加在最后面。
pop() 从元组中移除元素（最后一个），并返回移除的元素。
赋值即可更新元组中的元素。

三、联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

声明联合类型方法：

var val:string|number 
val = 12 
val = "Runoob" 

// 可以将数组声明为联合类型
var arr:number[]|string[]; 
arr = [1,2,4] 
arr = ["Runoob","Google","Taobao"] 
复制代码

四、接口

接口是一系列抽象方法的声明，是一些方法特征的集合，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

注意：接口不能转换为 JavaScript。它只是 TypeScript 的一部分。

定义及使用方法：

interface IPerson { // 定义接口
    firstName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { // 调用接口
    firstName:"Tom",
    sayHi: ():string =>{return "Hi there"} 
} 
复制代码

联合类型和接口

接口参数可使用多种数据类型

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]};  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
var fn:any = options.commandline; 
console.log(fn());
复制代码

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

// 索引为number，元素为string
interface namelist { 
   [index:number]:string 
} 
var list2:namelist = ["John",1,"Bran"] // 错误元素 1 不是 string 类型

 // 索引为string，元素为number
interface ages { 
   [index:string]:number 
} 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误
复制代码

接口继承

接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口，继承使用关键字 extends，多继承各个接口使用逗号,分隔。

// 单继承实例
interface Person { 
   age:number 
} 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
复制代码