2024-09-19
🔷TypeScriptの学習_7 (オブジェクト)
オブジェクトとはデータや機能をひとまとまりにして扱える
そのうち、データ部分をプロパティといい、機能部分をメソッドという
プロパティはキー(key)と値(value)の対からなる
メソッドはオブジェクトに関連づいた関数
オブジェクトリテラル
JavaScriptではクラス定義がなくてもオブジェクトリテラル{}というデータ形式で簡単にオブジェクトが作れる
オブジェクトリテラルとは、キー(key)と値(value)の対を{}で囲んだカンマ区切りで記述する、オブジェクトの記述法
code:オブジェクトリテラルの構文
{
キー: 値,
キー: 値,
....
}
※なお、new Object();とすることでもオブジェクトを作れる
プロパティの参照
オブジェクトのプロパティにアクセスするには.を使うドット記法と、[]を使うブラケット記法がある
code:プロパティにアクセス
const obj = {
key1: "value1",
key2: "value2"
};
// ドット記法
console.log(obj.key1); // "value1"
// ブラケット記法
console.log(obj"key2"); // "value2" ドット記法の場合、キーが変数名と同じ命名規則を満たしている必要がある
数字から始まっている、数字のみのキーや、_、$以外の記号を含むなどの場合はドット記法が使えない
ブラ-ケット記法の場合、数字のみのキーや、-などの記号を使用したキーの他、変数を指定することもできる
code:ブラケット記法
const obj2 = {
key: "value",
123: "value123",
"test-key": "test-value",
blue: "#002266",
red: "#cc0000"
};
const color = "red";
console.log(obj2"123"); // "value123" console.log(obj2color); // "#cc0000" オブジェクトの型注釈
オブジェクトの型注釈はオブジェクトリテラルのようにキーと値の対で書く(オブジェクトリテラルとは違い、;で区切る)
typeで型を定義し、それを使って型注釈を行う方法
同じ型を複数の場所で再利用できる利点がある
code:typeを使う方法
type Box = {
name: string;
width: number;
height: number;
};
let box: Box;
box = {
name: "hako",
width: 150,
height: 150
};
オブジェクトリテラルに直接型注釈をつける方法
code:オブジェクトリテラルに型注釈をつける
let person: {
name: string;
age: number;
};
person = {
name: "山田太郎",
age: 25
};
キーの名前を指定せずにキーのデータ型と、値のデータ型を指定する方法
オブジェクトのキーが動的な場合や、キーの名前が固定されていない時に役に立つ
code:キーが動的な場合や、固定されていない時の型注釈
taro: 25,
hanako: 18,
ichiro: 30
};