typescriptでundefinedとNULLをType guard

概要

APIからJSONで習得したデータを扱う場合、JSONはundefinedを取り扱えないのでNULLにするか、キー自体を取り除きます。

サーバーサイドのライブラリでJSONに変換するときNULLの時キーを自動で取り除くようなオプションはよくあるとは思いますが、取り除いてしまうと単純にマージしただけでは値あり=>値なしに更新できません。

いくつか思いついたのは

• フロント側でからの値はundefinedを使わないでNULLで統一する。
• if(foo) if(!foo)でチェックする。
• 値が空かどうか判断するときはfoo === undefined || foo === nullで判断する。

最初のは既にundefinedで初期化してるコードがいっぱいあるのと、やっぱりキーがなかった時にundefinedになるので危なっかしいのでやめました。

2番目は折角typescriptを採用してるし、空文字や０の扱いの問題もあるし、lintにもeqeqeqがあるくらいなので折角だからきっちりチェックしたいと思い却下。

最終的に3番目で、メソッドを作って対応することにしました。ただ普通メソッドを作っただけだとundefinedやNULLの可能性をtypescriptがチェックしてエラーを出すので型ガード付きのメソッドを作りました。

コード

export const isDefined = <T>(value: T | undefined | null): value is T => {
  return value !== undefined && value !== null;
};

export const isNotDefined = <T>(value: T | undefined | null): value is undefined | null => !isDefined(value);

使うときはGenericsに型は渡さないで推測させます。

if(isDefined(foo)){
  ...
}

解説

実はtypescript初導入で最近やっと少し慣れてきました。いくつかTipsはあると思いますが、Genericsの型推測を上手く使うのもその一つかと思いました。

今までJSでフロント書いてるときはif(foo) if(!foo)でチェックしてたので問題にならなかったんですよね。まあ、それで特にバグを作った記憶もないのですが、ベストプラクティスを踏襲しておいた方がいいだろうということでこんな感じにしてみました。