在 TypeScript 中初始化和键入Map

TypeScript 1年前 16

使用 Map() 构造函数在 TypeScript 中初始化 Map，例如 const map1: Map<string, string> = new Map([['name', 'Tom']])。构造函数接受一个包含键值对嵌套数组的数组，其中第一个元素是键，第二个元素是值。

// ✅ 用数组初始化 Map
// ?️ const map1: Map<string, string>
const map1: Map<string, string> = new Map([
  ['name', 'Tom'],
  ['country', 'Chile'],
]);

// ?️ {'name' => 'Tom', 'country' => 'Chile'}
console.log(map1);

// ✅ 用对象初始化 Map
const obj = { name: 'Tom', country: 'Chile' };
const map2 = new Map<string, string>(Object.entries(obj));

// ?️ {'name' => 'Tom', 'country' => 'Chile'}
console.log(map2);

Map() 构造函数接受一个数组，其元素是键值对。

我们在初始化 Map 时传递给 Map 泛型的第一种类型是键，第二种是值。

我们在示例中创建了一个具有字符串类型的键和值的 Map。

第一个示例展示了如何使用键值对数组初始化 Map，第二个示例展示了如何从对象创建 Map。

这是一个示例，我们将 Map 中的键的类型设置为字符串，将值的类型设置为 string[]。

// ?️ const map1: Map<string, string[]>
const map1: Map<string, string[]> = new Map([
  ['colors', ['blue', 'red', 'green']],
  ['languages', ['english', 'spanish', 'german']],
]);

// ?️ ['blue', 'red', 'green']
console.log(map1.get('colors'));

map1.forEach((value, key) => {
  console.log(value, key);
});

// ✅ 检查 Map 中是否存在键
console.log(map1.has('colors')); // ?️ true

// ✅ 在 Map 中设置新键
map1.set('countries', ['UK', 'Spain', 'Germany']);

代码片段显示了 Map 对象实现的一些方法。

现在我们已经将 Map 中值的类型设置为 string[]，我们将无法在 Map 中设置不同类型的值。

// ?️ const map1: Map<string, string[]>
const map1: Map<string, string[]> = new Map([
  ['colors', ['blue', 'red', 'green']],
  ['languages', ['english', 'spanish', 'german']],
]);

// ⛔️ Error: Argument of type 'number' is not
// assignable to parameter of type 'string[]'.
map1.set('age', 30);

在 TypeScript 中初始化和键入Map

我们尝试向 Map 添加一个值为 number 的新元素，但 TypeScript 出错了。

请注意 ，我们不必在创建 Map 时向其添加键值对。

我们可以稍后在代码中初始化一个空 Map，设置其类型并添加键值对。

// ?️ const map1: Map<string, string[]>
const map1: Map<string, string[]> = new Map([]);

map1.set('colors', ['blue', 'red', 'green']);
map1.set('languages', ['english', 'spanish', 'german']);

// ?️ {'colors' => ['blue', 'red', 'green'],
//     'languages' => ['english', 'spanish', 'german']
//    }
console.log(map1);

我们可能经常需要做的事情是将对象转换为地图。我们可以使用 Object.entries() 方法从对象创建 Map。

Object.entries 方法返回一个二维数组，其中嵌套数组包含 2 个元素 – 键和值。

const obj = { name: 'Tom', country: 'Chile' };

// ?️ [['name', 'Tom'], ['country', 'Chile']]
console.log(Object.entries(obj));

// ?️ const map2: Map<string, string>
const map2 = new Map<string, string>(Object.entries(obj));

// ?️ {'name' => 'Tom', 'country' => 'Chile'}
console.log(map2);