在 TypeScript 中初始化包含数组的 Map

David Mbochi Njonge 2023年1月30日
  1. 使用 TypeScript 中的 Array 类初始化包含数组的 Map
  2. 在 TypeScript 中使用方括号 [] 初始化包含数组的 Map
在 TypeScript 中初始化包含数组的 Map

Map 是一种以键值对形式保存数据的数据结构。你可以对键和值使用你喜欢的任何数据类型。

在本教程中,我们将学习创建一个使用数字作为键和自定义类型数组作为值的 Map。

使用 TypeScript 中的 Array 类初始化包含数组的 Map

转到 Visual Studio Code 并创建一个名为 map-initialization 的文件夹或使用任何首选名称。在文件夹下创建一个名为 array-class-map.ts 的文件。

将以下代码复制并粘贴到文件中。

type Post = {
    postID: number
    postTitle: string
    message: string
}

let mapOfPosts: Map<number, Array<Post>> =
new Map([
    [1,[{postID:1,
        postTitle: 'Job promotion',
        message: 'Just promoted got promoted in my job'
    }]],
    [2,[{postID:2,
         postTitle:'Birthday',
         message:'Just turned an year older'
    }]]
])

mapOfPosts.forEach((post) => console.log(post))

在上面的代码中,我们定义了名为 Post 的自定义对象,我们将在 Map 中将其用作值。

由于 Map 是通用的,尖括号的第一个参数表示键是 number 类型。第二个参数使用另一种名为 Array<Post> 的类型来指示该值是一个帖子数组。

Array 是一个通用类,用于通过在尖括号中指定元素的类型来创建元素数组。在我们的例子中,我们将 Post 作为尖括号中的元素类型传递。

ForEach() 是一个函数式方法,它在后台遍历 Map 中的元素数组并将它们打印到控制台。

要执行上面的示例,请转到终端并 cd 到该文件夹​​的位置。使用以下命令生成 tsconfig.json 文件。

david@david-HP-ProBook-6470b:~/Documents/map-initialization$ tsc --init

确保 tsconfig.json 文件具有以下配置。

{
    "compilerOptions":{
        "target": "es5"
        "noEmitOnError": true,
    }
}

Map API 是在 es5 中引入的,因此我们添加了该库以防止代码中出现任何编译错误。

使用以下命令将 TypeScript 代码转换为可以使用 node 执行的 JavaScript 代码。

david@david-HP-ProBook-6470b:~/Documents/map-initialization$ tsc

编译代码后,将生成一个名为 array-class-map.js 的文件。使用以下命令执行 JavaScript 文件。

david@david-HP-ProBook-6470b:~/Documents/map-initialization$ node array-class-map.js

输出:

[
  {
    postID: 1,
    postTitle: 'Job promotion',
    message: 'Just promoted got promoted in my job'
  }
]
[
  {
    postID: 2,
    postTitle: 'Birthday',
    message: 'Just turned an year older'
  }
]

在 TypeScript 中使用方括号 [] 初始化包含数组的 Map

在这个例子中,我们将使用大多数开发人员都知道的基本方法,即使是对数组有基本了解的人。

在同一文件夹下创建一个名为 maps.ts 的文件。将以下代码复制并粘贴到文件中。

type Post = {
    postID: number
    postTitle: string
    message: string
}

let mapOfPosts: Map<number, Post[]> =
new Map([
    [1,[{postID:1,
        postTitle: 'Job promotion',
        message: 'Just promoted got promoted in my job'
    }]],
    [2,[{postID:2,
         postTitle:'Birthday',
         message:'Just turned an year older'
    }]]

])

mapOfPosts.forEach((post) => console.log(post))

在上面的代码中,我们定义了一个 Map,它接受类型为 number 的键和一个 Post 数组作为值。

创建数组的基本方法是定义类型,后跟方括号,如 Post[] 所示。地图已使用 new 关键字在一行上进行了初始化,并且已将两个具体元素添加到地图中。

此示例的工作方式与上一个示例相同,除了它使用方括号为 Map 值创建帖子数组这一事实。

要执行此示例,请使用与上一个示例相同的方法来获取以下输出。

输出:

[
  {
    postID: 1,
    postTitle: 'Job promotion',
    message: 'Just promoted got promoted in my job'
  }
]
[
  {
    postID: 2,
    postTitle: 'Birthday',
    message: 'Just turned an year older'
  }
]
David Mbochi Njonge avatar David Mbochi Njonge avatar

David is a back end developer with a major in computer science. He loves to solve problems using technology, learning new things, and making new friends. David is currently a technical writer who enjoys making hard concepts easier for other developers to understand and his work has been published on multiple sites.

LinkedIn GitHub

相关文章 - TypeScript Map

相关文章 - TypeScript Array