nullと型｜コードで実践 - ゆめさくコード

無いかもしれない値を型にする

プロフィールのニックネームのように、入っているかもしれないし空かもしれない項目があります。そういう値は string だけでは表せません。縦棒でつないで「文字列または null」と書きます。

const nickname: string | null = null;

この書き方をユニオン型と呼びます。くわしくは第5章で扱いますが、null と組み合わせる形はとてもよく出るので、ここで先に覚えます。

このコースの設定では strictNullChecks という検査が有効になっています。これが有効だと、null は string の仲間ではなくなります。

const nickname: string = null;
// エラー Type 'null' is not assignable to type 'string'.

つまり string と書いた場所には、必ず文字列が入っていると信じてよくなります。この設定が無いと、あらゆる文字列が「実は null かもしれない」ものになり、型を付けた意味がほとんど無くなります。

string | null の値に文字列のメソッドを呼ぶと、その場で止められます。

function label(nickname: string | null): string {
  return nickname.trim();
  // エラー 'nickname' is possibly 'null'.
}

これは意地悪ではなく、実行時に Cannot read properties of null で落ちる場所を先に教えてくれているだけです。JavaScript で一番よく見るエラーが、書いている最中に出るようになったということです。

null かどうかを先に確かめると、その後ろでは文字列として扱えます。

function label(nickname: string | null): string {
  if (nickname === null) {
    return "（未設定）";
  }
  return nickname.trim();
}

if を抜けた先には null が来ないと TypeScript も分かるので、trim が使えます。無い場合をどう扱うかを必ず書かせる、というのがこの型の狙いです。

演習では、名前とニックネームから表示名を作る関数を直します。ニックネームは string | null で、しかも空文字が入っていることもあります。両方の場合を落とさずに扱ってください。