【超基礎】TypeScript、Mapオブジェクトについて

# 前提
この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

https://typescriptbook.jp/

# 環境
記事内のコードは以下の環境で動作確認済みです。

- Node.js: v22.10.0
- TypeScript: Version 5.6.3

`tsc`でそのままコンパイルしたところ、
```terminal
error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing he 'lib' compiler option to 'es2015' or later.
```
のエラーが出たため
```terminal
tsc increment.ts --lib "es2015,dom"
```
でコンパイルしています。

# Mapオブジェクトについて
- **キーとバリュー(値)のペアを取り扱う**オブジェクト
- 一つのキーに一つの値
- キーと値それぞれに任意の型を指定できる
- メソッドによる操作が可能
- **キーの判別は厳密等価**
```typescript
const humanAge = new Map<string,number> ([
    ["taro", 20]
    ["hanako", 18]
    ["tome", 81]
]);

console.log(humanAge.get("taro")); //=>20
```

# Mapオブジェクトと型
Mapオブジェクトそのものの型注釈は`Map<Type,Type>`
```typescript
function func(humanAge: Map<string,number>) {}
```
宣言時に型引数を省略した場合、コンストラクタに引数があれば型推論が発生し、無ければ`<any,any>`で初期化される。
```typescript
//型引数の省略
const humanAge = new Map([ //const humanAge: Map<string,number>
    ["taro",20]
];

//型引数とコンストラクタへの引数の省略
const humanAge = new Map(); //const humanAge: Map<any,any>
```
# Mapオブジェクトの操作
次の`humanAge`オブジェクトについて考える
```typescript
const humanAge = new Map<string,number> ([
    ["taro", 20]
    ["hanako", 18]
    ["tome", 81]
]);
```
### 要素追加・上書き　`set()`
- setメソッドを使用
- **キーが既に存在する場合は値が上書きされる**
- `const`で宣言されていても追加可能
```typescript
humanAge.set("sota",30);
```
### キーから値を取得　`get()`
- getメソッドを使用
- `.get("キー名")`で取得
- 値がないときは`undefined`が返される
```typescript
console.log(humanAge.get("taro")); //=>20
console.log(humanAge.get("goku")); //=>undefined
```

### 要素の削除 `delete()`
- deleteメソッドを使用
- `.delete(キー名)`で削除
- キーがあればtrue,なければfalseを返す
```typescript
humanAge.delete("sota");
console.log("sota"); //=>undefind;
```
### キーの存在確認 `has()`
- hasメソッドを使用
- `.has("キー名")`で調べる
- `true`/`false`で返ってくる
console.log(humanAge.has("taro")); //=>true
console.log(humanAge.has("goku")); //=>false

### 要素の個数 `size`
- sizeプロパティを参照する
:::note warn
メソッドでないことに注意
:::
```typescript
console.log(humanAge.size);//=>3
```
### 全要素の削除 `clear()`
- clearメソッドを使用
```typescript
humanAge.clear();
```
### キーの列挙　`keys()`
- keysメソッドを使用
- 反復可能オブジェクトを返す
:::note info
反復可能オブジェクト(iterables object)とは、イテレータを持ち、反復処理が可能なオブジェクトを指す
:::

```typescript
const humans = [...humanAge.keys()];
console.log(human);//=>["taro","hanako","tome"]
```

### 値の列挙 `values()`
- valuesメソッドを使用
- 反復可能オブジェクトを返す
```typescript
const ages = [...humanAge.values()];
console.log(age);//=>[20,18,81]
```

### キーと値の列挙　`entries`
- entriesメソッドを使用
- 反復可能オブジェクトを返す
- 後述する配列への変換と動作は同じであるが、**キーと値の列挙を明示的に行う**ことができる
```typescript
const humanAges = [...humanAge.entries()];
console.log(humanAges);//=>[["taro",20],["hanako",18],["tome",81]]
```
# 反復処理
- `for...of`や`forEach`を使い、要素を取り出すことができる。
- 順番は**追加した順**
```typescript
for (const [human,age] of humanAge{
    console.log(human,age) //=>"taro",20  "hanako",18  "tome",81
}
```

# 他の型との変換
### Map ➡ 配列
- Mapにスプレッド構文を使う
- 先述した`entries`メソッドに比べて、簡潔に記述できる
```typescript
const humanAgeArray = [...humanAge];
console.log(humanAgeArray)[["taro",20],["hanako",18],["tome",81]]
```
### Map ➡ オブジェクト
`Object.formEntries()にMapオブジェクトを渡す
```typescript
const humanAgeObj = Object.fromEntries(humanAge);
```
### オブジェクト ➡ Map
`Object.entries(オブジェクト)`の戻り値をMapコンストラクタ引数にする。
```typescript
const humanAgeObj = {taro:20}

const humanAge = new Map(object.entries(humanAgeObj));
```

# まとめ
以上になります。

慣例から外れた部分があれば指摘していただけると幸いです！！