[TypeScript入門] 作業効率化のためによく利用するオブジェクト処理用ヘルパー関数まとめ

TypeScriptの開発では「オブジェクト」を利用しないケースはほぼないと言えるでしょう。WebAPIのリクエスト/レスポンスデータやデータベースのレコードデータなど、様々なオブジェクトを扱う機会が多いのが現状です。

今回は、よく利用しているオブジェクトに対するヘルパー関数をまとめてみました。

TypeScriptとは

TypeScriptとは、Microsoftによって開発されたJavascriptを拡張して作られたプログラミング言語です。

TypeScriptで記載したコードをコンパイルすることでjavascriptのコードに変換されて実行されるだけでなく、javascriptライブラリもTypeScriptで利用できるといった互換性があり、とても柔軟な言語であるといえます。

TypeScriptのインストール

まずTypeScriptを利用するために、以下の状態になっているかどうか確認します。

$ npv -v
8.5.5
$tsc -v
Version 4.7.3

インストールされていない場合は、下記コマンドでTypeScriptをインストールします。

npm install -g typescript

オブジェクト処理用ヘルパー関数

hasAnyProperty

オブジェクトにプロパティがあるかどうかをチェックし、そのプロパティの数を返します。

const hasAnyProperty = (obj: T): number => {
  return Object.keys(obj).filter((key) => obj[key as keyof T]).length;
};

var sampleObj = {
  id: 1,
  name: 'John',
  age: 30,
  isAdmin: true,
};

var sampleData1 = 1;

console.log(hasAnyProperty(sampleObj));
// 4
console.log(hasAnyProperty(sampleData1));
// 0

fillObject

指定したオブジェクトに対して、別のオブジェクトを指定し置き換えます。attrsはundefinedを許容しており、指定なしの場合はそのままのオブジェクトを返します。
指定した場合は、そのオブジェクト情報を書き換える仕組みとなっています。

const fillObject = (model: T, attrs: Partial = {}): T => {
  Object.keys(attrs).forEach((attr) => {
    model[attr as keyof T] = attrs[attr as keyof {}];
  });
  return model;
}

const SampleObj2 = 
{
  id: 1,
  name: 'John',
  age: 30,
  isAdmin: true,
};

console.log(fillObject(SampleObj2, { name: 'Joe'}));
// { id: 1, name: 'Joe', age: 30, isAdmin: true }

IsAnyPropertyExist

指定したオブジェクトのプロパティが存在している場合はその数を返す関数となります。
プロパティが存在していない場合は「0」を返す仕組みです。
(getPropertyは必要に応じて作成してください)

var sampleObj = {
  id: 1,
  name: 'John',
  age: 30,
  isAdmin: true,
};

// getProperty関数は必要に応じて作成
function getProperty(obj: T, key: K) {
  return obj[key];
}

const isAnyPropertyExist = (obj: any, props: Array): number =>
  props.filter((key) => getProperty(obj, key)).length;

console.log(isAnyPropertyExist(sampleObj, ['name', 'age1']));
// 1

except

指定したオブジェクトから、指定したプロパティを除外する関数となります。
あらかじめ全てのプロパティを用意しておき、用途に応じて除外するなど利用ケースは様々かと思います。

const except = (obj: T, except: Array): Partial => {
  return Object.keys(obj).filter((key) => !except.includes(key))
    .reduce((result: Partial, key): Partial => {
      result[key as keyof T] = obj[key as keyof T];
      return result;
    }, {});
}

var sampleObj = {
  id: 1,
  name: 'John',
  age: 30,
  isAdmin: true,
};
console.log(except(sampleObj, ['name', 'age']));
// { id: 1, isAdmin: true }

pick

exceptとは逆に、指定したオブジェクトの指定したプロパティのみを取得するヘルパー関数です。

const pick = (obj: T, props: Array): Object => {
  return Object.keys(obj).filter((key) => props.includes(key))
    .reduce((result: { [key: string]: any }, key): Object => {
      result[key] = obj[key as keyof T];
      return result;
  }, {});
}

var sampleObj = {
  id: 1,
  name: 'John',
  age: 30,
  isAdmin: true,
};
console.log(pick(sampleObj, ['name', 'age']));
// { name: 'John', age: 30 }

最後に

ヘルパー関数を作っておくことで、コード記述量を減らすだけでなく、エラー率も低下します。

是非、参考にしてみてください。