【TypeScript】 連想配列(Dictionary)の定義方法や使い方を解説

TypeScript

今回は、TypeScriptにおける連想配列について解説していきます。

連想配列の定義方法や基本的に使い方など、基礎知識を身につけていきましょう。

スポンサーリンク

連想配列とは?

まず初めに、そもそも連想配列とは何かということについて触れていこうと思います。

こちらを理解されている方は次項に進んでください。

連想配列とは簡単にいうとkeyとvalueを紐づけたデータの管理方法です。

“name”というkeyに対して”奥野”というvalueを管理するといったデータの管理方法です。

実際にTypeScriptにおける連想配列の定義方法を見ていきましょう。

連想配列の定義方法

TypeScriptにおける連想配列の定義方法を解説していきます。

定義方法の基本フォーマットは以下です。

var 変数名: { [key: keyのデータ型]: valueのデータ型; } = {};

具体的な例は以下です。

var person1: { [key: string]: any; } = {
  ‘name’: ’奥野’,
  ’age’: 25,
};

var weather; { [key: string]: string; } = {
  ‘telop’: ‘sunny’
  ‘temperature’: ‘12℃’,
  ’date’: ’2022/02/15’
};

このように’name’に紐づけて’奥野’ を、’telop’に紐づけて’sunny’を管理することができます。

値を追加する方法

連想配列に新しい値を追加する方法を紹介していきます。

値の追加の基本フォーマットは以下です。

変数名[新しいkey] = value;

こちらを実際に行なった例が以下のコードです。

//変数を定義
var person1: { [key: string]: any; } = {
  ‘name’: ’奥野’,
  ’age’: 25,
};

//新しい値を追加
person1['address'] = '大阪';

//結果: {‘name’: ’奥野’, ’age’: 25, 'address': '大阪'};

定義しているkeyとvalueのデータ型を確認して、新しく追加するデータ型との齟齬がないように気をつけましょう。

値を取り出す方法

連想配列の値を取り出して活用する方法を解説していきます。

値を取り出す際のコードのフォーマットは以下です。

変数名[key名]

実際の活用場面を見ていきましょう。

//変数を定義
var person1: { [key: string]: any; } = {
  ‘name’: ’奥野’,
  ’age’: 25,
};

//nameの値を取り出す
console.log(person1['name']);

//結果: 奥野

おわりに

今回は、TypeScriptにおける連想配列について解説させていただきました。

連想配列は開発効率をグッと上げてくれるのでぜひ活用してみてください。

当ブログでは他にもプログラミングの学習に関する記事を執筆しております。TypeScriptにおける型変換の記事も上げておりますので、興味がある方は合わせてご覧ください。

最後まで読んでくださりありがとうございました。

コメント

タイトルとURLをコピーしました