在 TypeScript 中初始化并键入地图

作者

在 TypeScript 中初始化并键入地图

Initialize and Type a Map in TypeScript

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

索引.ts
// ✅ Initialize Map from Array
// 👇️ const map1: Map<string, string>
const map1: Map<string, string> = new Map([
  ['name', 'Tom'],
  ['country', 'Chile'],
]);

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

// ✅ Initialize Map from Object
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具有类型的键和值的对象。string

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

这是一个示例，其中我们将键的类型设置为Mapto string，将值的类型设置为string[]。

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

// ✅ Get value from Map
// 👇️ ['blue', 'red', 'green']
console.log(map1.get('colors'));

// ✅ Iterate over Map
map1.forEach((value, key) => {
  console.log(value, key);
});

// ✅ Check if key exists in Map
console.log(map1.has('colors')); // 👉️ true

// ✅ Set new key in Map
map1.set('countries', ['UK', 'Spain', 'Germany']);

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

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

索引.ts
// 👇️ 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);

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

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

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

索引.ts
// 👇️ 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);

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

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

索引.ts
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);

这是一个完美的匹配，因为Map()构造函数需要一个包含键值对嵌套数组的数组。

–

发表评论