TypeScript Map – 包含示例的完整指南

要在 TypeScript 中定义 Map 对象,请使用泛型来设置 Map 的键和值的类型。 我们添加到 Map 的所有键值对都必须符合指定的类型,否则类型检查器会抛出错误。

// 👇️ Map with string keys and string | number values
const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.set('country', 'Germany');

const country = map1.get('country');
console.log(country); // 👉️ "Germany"

console.log(map1.has('name')); // 👉️ true

map1.delete('name');

console.log(map1.has('name')); // 👉️ false

console.log(map1.size); // 👉️ 2 (Map has 2 elements)

我们使用泛型来声明具有字符串键和字符串或数字值的 Map。

我们添加到 Map 中的所有键值对都必须符合指定的类型,否则会抛出错误。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

// ⛔️ Error: Argument of type 'boolean' is not
// assignable to parameter of type 'string | number'.ts(2345)
map1.set('country', true);

我们使用联合类型将 Map 的值设置为字符串或数字,但布尔值不是联合的成员,因此我们得到一个错误。

因为我们已经将 Map 的值键入为字符串或数字,所以当我们使用 Map.get 方法时,我们将取回字符串、数字或未定义类型的值。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
  ['country', 'Germany'],
]);

// 👇️ const country: string | number | undefined
const country = map1.get('country');

if (typeof country === 'string') {
  console.log(country.toUpperCase());
}

if 语句用作类型保护,因为它直接检查值的类型。 country 变量保证是 if 块中的字符串。

我们可以使用 Map.set 方法将键值对添加到 Map。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.set('country', 'Germany');

console.log(map1.get('country')); // 👉️ "Germany"

console.log(map1.delete('country')); // 👉️ true

console.log(map1.has('country')); // 👉️ false

确保我们传递给 Map.set() 方法的键的类型和值的类型符合您在定义 Map 时指定的类型。

上面的代码片段展示了如何使用 Map.delete() 方法从 Map 中删除键值对。

如果 Map 中存在指定的键,则 Map.has() 方法返回 true。

我们可以使用 Map.forEach 方法在 TypeScript 中迭代 Map。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.forEach((value, key) => {
  console.log(value, key); // 👉️ James name, 30 age
});

for (const [key, value] of map1) {
  console.log(key, value); // 👉️ name James, age 30
}

上面的代码片段显示了如何使用 Map.forEach() 方法和 for…of 循环来迭代 Map。

我们可能经常需要将 Map 的键或值转换为数组,因为数组有许多有用的内置方法。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

const values = Array.from(map1.values());
console.log(values); // 👉️ ['James', 30]

const keys = Array.from(map1.keys());
console.log(keys); // 👉️ ['name', 'age']

我们使用 Map.values 方法获取包含 Map 值的迭代器对象。

我们将迭代器作为唯一参数传递给 Array.from 方法。

我们可能需要做的另一件常见事情是检查 Map 有多少元素。 Map.size 方法返回 Map 中的元素数。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

console.log(map1.size); // 👉️ 2

map1.set('country', 'Germany');

console.log(map1.size); // 👉️ 3

如果我们需要从 Map 对象中删除所有键值对,请使用 Map.clear 方法。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.clear();

console.log(map1.size); // 👉️ 0