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"] 

四、交叉类型

将多个类型合并为一个类型，可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

interface IPerson {
  id: string;
}

interface IWorker {
  companyId: string;
}

type IStaff = IPerson & IWorker;// 交叉类型
const staff: IStaff = {
  id: 'E1006',
  companyId: 'EFT'
};

五、函数

JavaScript	TypeScript
无类型	有类型
无函数类型	函数类型
所有参数都是可选的	必填和可选参数
无函数重载	函数重载、方法重载

// 必填和可选参数(通过 ? 号来定义可选参数,可选参数要放在普通参数的后面，不然会导致编译错误)
function createUserId(name: string, id: number, age?: number): string {
  return name + id;
}

// 函数重载:使用相同名称和不同参数数量或类型创建多个方法,编译器会根据参数选择函数调用。
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// 方法重载:同函数重载，不过在同一个类中。
class Calculator {
  add(a: number, b: number): number;
  add(a: string, b: string): string;
}

六、接口

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

注意：接口不能转换为 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"