TypeScriptでオブジェクト配列の特定の値の合計を算出する方法【reduce】

この記事の最終更新日: 2023年2月20日

JavaScriptの静的型付け言語であるTypeScriptは、Web開発において人気が高まっています。

オブジェクト配列内の特定の値を合計する方法は、よく使われる処理の1つです。

本記事では、TypeScriptでオブジェクト配列の特定の値の合計を算出する方法を紹介します。

まずは、特定のキーのvalueの合計値を算出する方法から説明します。

Keyが動的の場合

以下のようなインターフェースを定義します。

interface Item {
  [key: string]: number;
}

このインターフェースは、キーが文字列で、値が数値であるオブジェクトを表します。次に、sumByKey関数を定義します。

function sumByKey(items: Item[], key: string): number {
  return items.reduce((total: number, item: Item) => {
    return total + (item[key] || 0);
  }, 0);
}

sumByKey関数は、itemsとkeyの2つの引数を受け取り、items配列内のすべてのオブジェクトの中からkeyに対応する値を合計して返します。

reduceメソッドを使用して、配列内のすべてのオブジェクトのkeyに対応する値を合計しています。

keyが動的で無い場合は、以下のように算出します。

Keyが動的で無い場合

以下のようなpriceというキーを持った配列の、合算は以下のように行います。

interface Item {
  price: number;
}

function sumPrice(items: Item[]): number {
  return items.reduce((acc: number, cur: Item) => {
    return acc + cur.price;
  }, 0);
}

daigoro

大阪のエンジニアが書いているブログ。