Map と Set に型をつける

01 / 06

Map のキーと値に型がある

JavaScript コースでは触れなかったけれど、Map はキーと値を対にして持つ入れものだよ。オブジェクトに似ているけれど、キーに文字列以外も使える。

TypeScript では Map<キーの型, 値の型> と山かっこで宣言する。

const scores = new Map<string, number>();scores.set("ゆい", 80);scores.set("けい", 65);console.log(scores.get("ゆい"));

実行結果

02 / 06

Set は「重複しない集まり」

Set は同じ値を2回入れても1つしか入らない集まりだよ。配列で重複を消したいときによく使う。

型は Set<中身の型> と書く。

const tags = new Set<string>();tags.add("HTML");tags.add("CSS");tags.add("HTML");console.log(tags.size);

実行結果

03 / 06

山かっこは ch6 と同じ

Map<string, number> も Set<string> も、ch6 で読んだ Array<string> と同じ仕組みだよ。型に型を渡して、具体的な型を作る。

Map はキーと値の2つ、Set は中身の1つを渡す。山かっこの数が変わるだけで、考え方は同じだよ。

const m: Map<string, number> = new Map();const s: Set<string> = new Set();console.log(m.size, s.size);

実行結果

0 0

04 / 06

キーは文字列以外でもいい

オブジェクトのキーは文字列しか使えなかったけれど、Map のキーは何でも選べる。数値をキーにすることもある。

Map<number, string> と書けば「数値のキーに文字列の値」という組み合わせになる。

const users = new Map<number, string>();users.set(1, "ゆい");users.set(2, "けい");console.log(users.get(1));

実行結果

ゆい

05 / 06

違う型を入れようとすると止まる

Map<string, number> と宣言したのに、値のところに文字列を渡すと型エラーになる。実行する前に気づけるのが型のありがたいところだよ。

const scores = new Map<string, number>();scores.set("ゆい", "はちじゅう");

実行結果

型のエラー: 型 'string' の引数を型 'number' のパラメーターに割り当てることはできません。

06 / 06

forEach で順番に処理する

for...of のほかに、Map は forEach も持っている。渡したコールバック関数が「値・キー」の順で毎回呼ばれるよ。

配列の forEach と似た感覚で使えるね。

const scores = new Map<string, number>();scores.set("ゆい", 80);scores.set("けい", 65);scores.forEach((value, key) => {  console.log(`${key}: ${value}`);});

実行結果

ゆい: 80
けい: 65