在 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 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