Typescriptで極力undefinedを書かない方法

はじめに

Typescriptで未定義になる可能性のある変数や戻り値にundefinedやnullを出来るだけ割り当てたくないって話。

例

注: users.findは見つからなかった場合、undefinedを返すとします。

function getUser(id: number): User | undefined {
  return users.find(v => v.id === id);
}

const a = getUser(1);

// しばらくのち
if (a) {...} // 'boolean'か'undefined'か'null'か曖昧

a.name // <- ガード忘れもあるよ

通常、このようにundefinedやnullを返さざるをえないパターンってあると思いますが、これが長い式の間に入っていたりすると文脈上、正に不明な値になってしまったりするわけです。

という訳で一工夫してみます。

一工夫

function getUser(id: number): { ['*']?: User } {
  const maybeUser = users.find(v => v.id === id);
  
  return maybeUser ? { ['*']: maybeUser } : {}
}

const a = getUser(1)

if (a['*']) {...} // 主張感あると思いません？

a.name // <- コンパイルが通らない

a['*'].name // <- こんなガード忘れしないでしょ

これで戻り値は{ ['*']: value }か{}のいずれかになり、文脈上でもしっかり主張してくれます。

['*']が気持ち悪かったら何でも良いです。個人的にピンとくる名前がなかったので記号にしちゃえってだけなので・・・。

参考

TypeScript Deep Dive 日本語版 NullとUndefined: https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined