TypeScript で配列を含むマップを初期化する
マップは、キーと値のペアの形式でデータを保持するデータ構造です。キーと値の両方に任意のデータタイプを使用できます。
このチュートリアルでは、数値をキーとして使用し、カスタムタイプの配列を値として使用するマップを作成する方法を学習します。
TypeScript の Array クラスを使用して、配列を含むマップを初期化する
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 は汎用であるため、山括弧の最初のパラメーターは、キーのタイプが number であることを示します。2 番目のパラメーターは、Array<Post> と呼ばれる別のタイプを使用して、値が投稿の配列であることを示します。
配列は、山括弧内の要素のタイプを指定することによって要素の配列を作成するために使用される汎用クラスです。この例では、山括弧内の要素のタイプとして Post を渡しました。
ForEach() は、マップ内の要素の配列を舞台裏で繰り返し、それらをコンソールに出力する機能メソッドです。
上記の例を実行するには、ターミナルに移動し、このフォルダの場所に 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 で角括弧 [] を使用して配列を含むマップを初期化する
この例では、アレイの基本を理解している開発者も含め、ほとんどの開発者が知っている基本的な方法を使用します。
同じフォルダの下に 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))
上記のコードでは、タイプ number のキーと Post の配列を値として受け入れるマップを定義しました。
配列を作成する基本的な方法は、Post[] で示されるように、タイプの後に角括弧を定義することです。マップは new キーワードを使用して 1 行で初期化され、2つの具体的な要素がマップに追加されました。
この例は、角括弧を使用してマップ値の記事の配列を作成するという事実を除けば、前の例と同じように機能します。
この例を実行するには、前の例と同じアプローチを使用して、次の出力を取得します。
出力：
[
{
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