[TypeScript]オブジェクトにキー（プロパティ）と値の要素を追加するには？

どうも、ちょげ(@chogetarou)です。

オブジェクト(Object)にキー（プロパティ）と値(value)の要素を追加する方法を紹介します。

方法

オブジェクト(Object)にキー（プロパティ）と値(value)の要素を追加する方法は、３つあります。

[]

１つ目は、[]を使う方法です。

まず、「=」の左辺に、オブジェクト名と[]を記述し、[]内に追加するキー（プロパティ）を指定します。

そして、「=」の右辺に、追加する値を指定します。

//obj=対象のオブジェクト, key=追加するキー（プロパティ）, value=追加する値
obj[key] = value;

上記の代入で、オブジェクト(Object)にキー（プロパティ）と値の要素を追加できます。

使用例

type Numbers = {
    [key: string]: number
}

const nums: Numbers = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

nums["six"] = 6;
nums["seven"] = 7;

console.log(nums);

出力：
[LOG]: {
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5,
  "six": 6,
  "seven": 7
} 

.（ドット）

２つ目は、「.（ドット）」を使う方法です。

まず、「=」の右辺で、「.(ドット)」を使い、オブジェクトの新しいキー（プロパティ）にアクセスします。

そして、「=」の右辺に、追加する値を指定します。

//obj=対象のオブジェクト, key=追加するキー（プロパティ）, value=追加する値
obj.key = value;

上記の代入で、オブジェクト(Object)にキー（プロパティ）と値の要素を追加できます。

使用例

type Numbers = {
    [key: string]: number
}

const nums: Numbers = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

nums.six = 6;
nums.seven = 7;

console.log(nums);

出力：
[LOG]: {
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5,
  "six": 6,
  "seven": 7
} 

Object.assign()

３つ目は、Object.assign()を使う方法です。

まず、Object.assign()を呼び出します。

Object.assign()の第１引数に対象のオブジェクト、第２引数に追加する要素をまとめたオブジェクトを指定します。

//obj=対象のオブジェクト
Object.assign(obj, {key1: value1, key2: value2, ・・・}); //{}内の要素を追加

上記のObject.assign()は、対象のオブジェクト(Object)に第２引数のオブジェクトの要素を追加します。

使用例

type Numbers = {
    [key: string]: number
}

const nums: Numbers = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

Object.assign(nums, {"six": 6, "seven": 7, "eight": 8});

console.log(nums);

出力：
[LOG]: {
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5,
  "six": 6,
  "seven": 7,
  "eight": 8
} 

まとめ

オブジェクト(Object)にキー（プロパティ）と値(value)の要素を追加する方法は、次の３つです。

• []を使う方法
  obj[key] = value;
• 「.（ドット）」を使う方法
  obj.key = value;
• Object.assign()を使う方法
  Object.assign(obj, {key1: value1, key2: value2, ・・・});