#16 TypeScriptで学ぶ辞書型(マップ)の基本

TypeScriptの辞書に相当する仕組みは、JavaScriptと同じですが、キーと値の型をあらかじめ決めておけるのが特徴です。この記事では、TypeScriptにおける辞書の扱い方と、用途別の型の選び方を解説します。

型付きのオブジェクト

interface Person {
    name: string;
    age: number;
}

const person: Person = { name: "太郎", age: 20 };

キーの型が決まっていない辞書

キーの名前が事前に決まっていない辞書のような使い方をしたい場合は、次のように書きます。

const scores: { [key: string]: number } = {};
scores["太郎"] = 90;

同じ意味をRecordというユーティリティ型で簡潔に書くこともできます。

const scores: Record = {};

Mapを使う場合

const person = new Map();
person.set("name", "太郎");
console.log(person.get("name"));

Map<string, string>のように、キーと値それぞれの型を指定できます。Objectと違い、キーの数をperson.sizeで正確に取得できる、キーの型を文字列以外にもできるといった利点があります。

値が存在しないかもしれない場合

キーが実在するとは限らない辞書の場合、値の型に| undefinedを含めておくと、より正確な型になります。

const scores: { [key: string]: number | undefined } = {};
const value = scores["三郎"]; // number | undefined 型

こうしておくと、存在しないキーへのアクセスがコンパイル時に見過ごされにくくなります。

存在しないキーへのアクセスを防ぐ

tsconfig.jsonでnoUncheckedIndexedAccessを有効にすると、{ [key: string]: number }のような辞書へのアクセス結果に自動的に| undefinedが付くようになり、存在確認を忘れたコードをコンパイル時に検出できます。

TypeScriptならではの注意点

型付きのオブジェクト(interface)を使うと、存在しないキーにアクセスしようとした際に、実行前の段階でエラーとして教えてもらえます。データの形が決まっている場合は、キーが自由な辞書よりもinterfaceを使うほうが安全です。

まとめ

TypeScriptの辞書は、形が決まっているならinterface、自由なキーを扱うならRecordやMapを使います。用途に応じて型の付け方を選びましょう。

---

本ページはプロモーションを含みます。

参考書籍(PR)

TypeScriptをもっと学びたい方には「プロを目指す人のためのTypeScript入門」がおすすめです。

---

PR

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方は こちらをご覧ください。