【JavaScript】【TypeScript】オブジェクトのプロパティ(キー)は文字列

はじめに

• 基本的なことなのですが混乱したためメモ
  • 「obj.prop のようなドット記法で参照」 = 「Ruby でいう"シンボル"？」なのかという点で勝手に混乱したため

---

結論

• オブジェクトのプロパティ (キー) は文字列である
  • Object.keys(XXX)で確認すると文字列として格納されているのが確認できる
  • ブラケット記法においても ["XXX"] で参照できる

sample.ts

const data = 'prop';
const obj: {
  name: string;
  age: number;
  123: 123;
  [data]: string;
} = {
  name: 'Mike',
  age: 20,
  123: 123,
  [data]: 'hello'
}


// キーの確認
console.log(Object.keys(obj));           //=> [ '123', 'name', 'age', 'prop' ]
console.log(typeof Object.keys(obj)[0]); //=> string
console.log(typeof Object.keys(obj)[1]); //=> string
console.log(typeof Object.keys(obj)[2]); //=> string
console.log(typeof Object.keys(obj)[3]); //=> string

// ドット記法
console.log(obj.name); //=> Mike
console.log(obj.age);  //=> 20
console.log(obj.prop); //=> hello

// ブラケット記法
console.log(obj["name"]); //=> Mike
console.log(obj["age"]);  //=> 20
console.log(obj[123]);    //=> 123
console.log(obj["123"]);  //=> 123
console.log(obj[prop]);   //=> hello

// エラー
console.log(obj[name]); // error TS2538: Type 'void' cannot be used as an index type.
console.log(obj.123);   // error TS1005: ',' expected.

• プロパティ（キー）に数値を用いるケースを見つけられなかったので一般的ではないかと思われます
  • 先述のコードよりドット記法だとエラーになるため使い勝手が悪い

例

const obj = {
  123: 1_234_567_890
}

console.log(obj["123"]);  //=> 1234567890
// console.log(obj.123);  // エラー

変わったプロパティの設定方法（動的プロパティ名）

• プロパティについて調査している際に 動的プロパティ名 という概念をしったため併せてメモ
  • これについて先述の『プロパティは文字列である』という点が関係してくる

sample.ts

const key1 = 'name';
const key2 = 'age';
const person = {
  [key1]: 'Alice',
  [key2]: 30,
};

// 動的にプロパティ名を指定して値を取得
console.log(person[key1]); //=> 'Alice'
console.log(person[key2]); //=> 30

// 新しいプロパティを追加
const additionalKey = 'location';
person[additionalKey] = 'Tokyo';

console.log(person); //=> { name: 'Alice', age: 30, location: 'Tokyo' }