TypeScript实战：Map对象与联合类型的使用详解

一、TypeScript Map对象实战

Map对象是ES6引入的一种新数据结构，能够保存键值对，且记忆键的原始插入顺序。它支持将任何值（包括对象或原始值）作为键或值使用，相较于普通对象，在处理复杂键值映射时更为高效。

第1步：创建与初始化Map

目的：掌握两种常用的Map实例化方式。

• 空Map创建：new Map() 创建一个空的Map实例。
• 数组初始化：传入一个二维数组，内部包含若干 [key, value] 格式的元组。

// 创建空 Map
let myMap = new Map();

// 初始化合法键值对
let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 

第2步：配置与检索关键属性

目的：演示Map的核心CRUD（增删改查）操作。

1. 设置值：set(key, value) 添加或更新键值对，返回Map本身以支持链式调用。
2. 获取值：get(key) 返回对应值，若键不存在则返回 undefined。
3. 检查存在性：has(key) 返回布尔值，判断键是否存在。
4. 删除元素：delete(key) 移除指定键值对，成功返回 true，否则返回 false。
5. 清空映射：clear() 移除所有条目。
6. 查看数量：size 属性返回当前的键值对总数。

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

执行以下操作进行验证：

// 获取对应值
console.log(nameSiteMapping.get("Runoob")); // 输出: 2

// 判断是否包含特定键
console.log(nameSiteMapping.has("Taobao"));   
console.log(nameSiteMapping.has("Zhihu"));  

// 获取映射长度
console.log(nameSiteMapping.size);  // 输出: 3

// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));  
console.log(nameSiteMapping); // 显示剩余条目

// 清除所有映射
nameSiteMapping.clear();           
console.log(nameSiteMapping); // 输出: Map {}

第3步：编译与迭代遍历

目的：学习如何将TS编译为ES6标准JS，并按需遍历不同维度的数据。

tsc --target es6 test.ts

Map元素按插入顺序排列，可通过多种方式迭代：

1. 仅遍历Key：for (let key of map.keys())
2. 仅遍历Value：for (let value of map.values())
3. 遍历Entries：for (let entry of map.entries())，解构得到 [key, value]。
4. 直接解构：for (let [key, value] of map)，这是最常用的简洁写法。

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

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

二、TypeScript 联合类型原理与应用

联合类型允许变量接受多种类型，通过管道符号（|）连接。这在处理不确定最终状态的数据（如API返回可能是字符串也可能是数字）时非常有用。

第4步：定义联合类型变量

目的：理解声明方式及赋值规则。

语法格式为 Type1 | Type2。定义后的变量只能被赋予这些联合类型的值，其他类型将引发编译错误。

var val:string|number;
val = 12; // OK
console.log("数字为 " + val);
val = "Runoob"; // OK
console.log("字符串为 " + val); // 编译后 JS 逻辑不变

第5步：函数参数的联合类型处理

目的：解决无法确定参数具体类型时的编程问题。

当接收联合类型参数时，编译器无法确认当前值的准确类型，因此只能访问该联合类型中所有成员共有的属性和方法。若访问了某一特定子类型特有的方法，将报错。

function sayRes(res: number | string) {
    // 错误示范：number 没有 length 属性
    if (res.length > 0) { 
       ...
    }
}

正确的做法是先进行类型守卫（Type Guard），例如使用 typeof 检查：

function disp(name:string|string[]) { 
    if(typeof name == "string") { 
        console.log(name);
    } else {
        // 此时 TypeScript 识别为 string[] 类型
        for(let i = 0; i<name.length; i++) { 
            console.log(name[i]);
        }
    } 
}
disp("Runoob"); 
disp(["Runoob","Google","Taobao"]); 

扩展注意点

• 联合类型变量的作用域受限，仅限使用共有接口。
• 分配非联合类型内的值会被编译器拦截。
• 利用类型推断和类型断言可以更安全地操作联合类型数据。

以上就是TypeScript的Map对象及联合类型使用的详细内容，更多关于前端开发中类型系统优化的资料请关注本站其它相关文章！