【TypeScript】値なし4姉妹の紹介

はじめに

これ知ってる人にとっては当たり前じゃーん！な内容だと思うのですが、型初心者の中にはわからないけどなんとなく使っているという方もいらっしゃるのではないでしょうか。

と思って簡単に解説してみます。

登場人物の紹介

1. null

2. undefined

3. void

4. never

解説

null：しっかり者の長女

値が存在しないことが明示的に確定している
nullは「値はない！」と言い切っている型です。

undefinedと異なり明示的にnullとしない限りnullになることはないです。

undefined：存在がフワフワしてる次女

存在しているか、していないかすらわからない状態
例えば、データをfetchする際、データを取得する前の値はundefinedです。
取得前だからまだレスポンスのデータがあるかないかわからない(isLoading)という状態、それがundefinedです。

void：処理をこなす寡黙な三女

明示的に何も返さない関数の戻り値の型
処理をするだけで値をreturnしない(例えばconsole.log出力するだけとか)関数の戻り値の型がvoidです。

undefinedはvoidに含まれているので、undefinedを返す関数の型はvoidになります！

never：ぶっ飛び系で帰ってこない四女

決して戻ることのない関数の戻り値の型
エラーをthrowする関数や無限ループする関数等の関数の型がneverになります。

voidとneverは関数の戻り値の型です。

具体例

null

//const func: () => null
const func = () => {
  return null;
};

undefined

//const func: () => undefined
const func = () => {
  return undefined
}

void

//const func: (text: string) => void
const func = (text:string) => {
  console.log(text)
}

下記は戻り値undefinedですが、明示的にundefinedとしない場合voidになります。

//const func: () => void
const func = () => {
  console.log("");
  return;
};

never

//const func: () => never
const func = () => {
  while(true) {
    console.log("a")
  }
}

共通点

これらの型はすべて値がないことを示していますが、その意味合いや使用する場面は異なります。
nullは明示的に「値がない」と宣言する
undefinedは「まだ値が設定されていない」状態
voidは関数が何も返さないことを示す
neverは関数が決して終了しないことを示す

TypeScriptでは関数の戻り値は推論でいけることが多いのであまり明示的に書かないかもしれませんが、nullとundefinedはデータを取得した時や型定義で書くこともあると思いますので押さえておきたいところかと思います。

おわりに

私は今回記事を書くにあたり、TypeScriptの書籍を使って再度確認しながら書きましたが、サバイバルTypeScriptのサイトにも詳しく書いてありますので、自信のない方や興味ある方はぜひお目通しください。

使い分けについても触れてます。興味深いです。