LoginSignup
2
3

TypeScriptで辞書型を表現してみよう

Posted at

はじめに

業務でReactを使用している際に、以下のような形で辞書型を記述していたのですが、もう少し汎用的にしたほうがメンテナンスもしやすいか?と思い立ったのがきっかけになります。

const carID: { [carName: string]: string } = {};

辞書型(連想配列、ハッシュマップ)とは

配列やリストは、インデックス情報をもとに値を取り出すことができますが、辞書型はキーバリューのセットであるためキーをもとに値を取り出します。
メリットとしては、以下が挙げられます。(配列との比較)

  • 高速な検索
    • 配列は要素検索時に中身を走査するケースが主ですが、辞書型はキーを使用して値を直接取得できるため、要素が増えても一貫して高速です。
  • 可読性向上
    • 配列のインデックスは、基本的に意味を持ちませんが、辞書型はキーに意味をつけることができます。これにより可読性向上が狙えます。

辞書型を定義する

結論以下のようにしました。.NETをよく使うので名前はDictionary!

type Dictionary<TKey extends string | number | symbol, TValue> = {
    [key in TKey]: TValue;
};

export default Dictionary;

使用例

interface ICar {
    carID: Dictionary<string, string>
}

const carList: ICar = {
    carID: {
        "lexus": "001",
        "prius": "002"
    }
}

const getCarID = (data: ICar): Dictionary<string, string> =>{
    const carData = data;
    return carData.carID;
}

console.log(getCarID(carList));
// 以下出力結果
[LOG]: {
  "lexus": "001",
  "prius": "002"
} 

まとめ

今回は辞書型をより汎用的な形で記述できるようにDictionaryという型エイリアスを作成しました。
拙い使用例でしたが、一般化したことで記述が楽になり、扱いやすくはなったのかなと思います。
何か改善点あればコメントください!!

2
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3