一.TypeScript的Map对象

类型脚本映射对象。
map对象保存键值对，可以记住键的原始插入顺序。任何值（对象或原始值）都可以用作键或值。Map是ES6中引入的新数据结构。
Typescript使用地图类型和new关键字创建Map：

let myMap = new Map();
1

初始化映射，可以以数组的形式传入键值对：

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 
1
2
3
4

Map对象相关功能和属性：

• MapClear（）–删除映射对象的所有键/值对。
• MapSet（）–设置键值对并返回映射对象。
• MapGet（）–返回与键对应的值。如果不存在，则返回undefined。
• MapHas（）–返回一个布尔值，用于确定映射是否包含与键对应的值。
• MapDelete（）–删除映射中的元素，如果删除成功则返回true，如果删除失败则返回false。
• MapSize–返回映射对象键/值对的数目。
• MapKeys（）-返回一个迭代器对象，其中包含map对象中每个元素的键。
• MapValues（）–返回一个新的迭代器对象，其中包含map对象中每个元素的值。

let nameSiteMapping = new Map();
1

设置 Map 对象

nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
1
2
3

获取键对应的值

console.log(nameSiteMapping.get("Runoob"));
1

判断 Map 中是否包含键对应的值

console.log(nameSiteMapping.has("Taobao"));   
console.log(nameSiteMapping.has("Zhihu"));  
1
2

返回 Map 对象键/值对的数量

console.log(nameSiteMapping.size);
1

删除 Runoob

console.log(nameSiteMapping.delete("Runoob"));  
console.log(nameSiteMapping);
1
2

移除 Map 对象的所有键/值对 ， 清除 Map

nameSiteMapping.clear();           
console.log(nameSiteMapping);
1
2

使用 es6 编译：

tsc --target es6 test.ts
1

执行上述JavaScript代码，输出结果为：

2
true
false
3
true
Map { 'Google' => 1, 'Taobao' => 3 }
Map {}
1
2
3
4
5
6
7

在Vue组件中使用 TypeScript的方法

pdf 0星 超过10%的资源 135KB

下载

1.1迭代 Map

地图对象中的元素按顺序插入。我们可以迭代map对象，每次迭代都返回[key，value]数组。
Typescript用于…Of来实现迭代：

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
1
2
3
4
5

迭代 Map 中的 key

for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
1
2
3

迭代 Map 中的 value

for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
1
2
3

迭代 Map 中的 key => value

for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
1
2
3

使用对象解析

for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}
1
2
3

二.TypeScript 联合类型

联合类型可以通过管道（|）将变量设置为多种类型。指定值时，可以根据设置的类型指定值。
注意：只能指定类型。如果分配了其他类型，将报告错误。
创建联合类型的语法格式如下：

Type1|Type2|Type3

如何在vue中使用ts的示例代码

pdf 0星 超过10%的资源 238KB

下载

声明一个联合类型：

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)
1
2
3
4
5

编译上述代码以获得以下JavaScript代码：

var val;
val = 12;
console.log("数字为 " + val);
val = "Runoob";
console.log("字符串为 " + val);
1
2
3
4
5

数字为 12
字符串为 Runoob

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i