🦌

汎用的な型ガードメソッドを作る

2024/12/31に公開

TypeScript

TypeScriptを利用する際、APIから取得したデータの型が指定の型と異なるというエラーが出てしまうことはないでしょうか。その場合に役立つのが型ガードメソッドです。

単純な型ガードの例

型ガードメソッドを通した後は、自動で「指定の型」と見なしてくれるようになります。

const simpleTypeGuard = (x: unknown): x is number => {
  return typeof x === "number";
};

const data = response.data; // data = any

if (simpleTypeGuard(data)) {
  console.log(data); // data = number
} else {
  console.log(data); // data = any
}

汎用的な型ガードメソッドを作る

先ほどは例として、単純なnumber型等で利用する型ガードの例を挙げました。
ここからは自由なオブジェクト型に対して利用可能かつ汎用的な型ガードメソッドを作成したいと思います。

const typeGuard = <T extends object>(
  value: unknown,
  key: keyof T
): value is T => {
  // この条件は自分で詳細に設定することも可能
  return !!(value && key in (value as T));
};

type ApiType = {
  hoge: string;
};


...中略

const data = response.data; // data = any

if (typeGuard<ApiType>(data, "hoge")) {
  console.log(data); // data = ApiType
} else {
 console.log(data); // data = any
}

配列

const arrayTypeGuard = <T extends object>(
  value: unknown,
  key: keyof T
): value is T[] => {
  return !!(value && Array.isArray(value) && key in (value[0] as T));
};

const data = response.data; // data = any

if (arrayTypeGuard<ApiType>(data, "hoge")) {
  console.log(data); // data = ApiType[]
} else {
  console.log(data); // data = any
}

このように、型ガードのメソッドを通すことによってTypeScriptの型エラーを回避することが出来ます。as等で無理矢理捩じ込むことも出来ますが、思わぬバグを回避するためにも型ガードを利用してみてはいかがでしょうか。

お読みいただきありがとうございました。

単純な型ガードの例

汎用的な型ガードメソッドを作る

配列

Discussion