在 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