使う前にたしかめる

01 / 05

まず `typeof` を思い出そう

string | number のままでは、文字列のメソッドを呼べなかった。でも、たしかめてからなら使えるんだ。

typeof は値の種類を文字で返す JavaScript の書き方だったね。文字列なら "string"、数値なら "number" が返ってくる。

console.log(typeof "ゆい");console.log(typeof 7);

実行結果

string
number

02 / 05

`if` の中では文字列として扱える

typeof の結果を if の条件に書くと、TypeScript はその中を「文字列だと分かっているところ」として扱ってくれる。だから length も呼べるようになる。

人間がふつうに書く条件分岐が、そのまま型の情報として読み取られるんだ。これを絞りこみと呼ぶよ。

function dasu(m: string | number) {  if (typeof m === "string") {    console.log(m.length);  }}dasu("ぱんだ");

実行結果

03 / 05

`else` のほうは数値になる

2つのうち片方でないと分かれば、残るのはもう片方だ。だから else の中では m は数値になる。

* 2 のような計算も、そこでは書けるようになるよ。

function dasu(m: string | number) {  if (typeof m === "string") {    console.log(m + "です");  } else {    console.log(m * 2);  }}dasu("ゆい");dasu(4);

実行結果

ゆいです
8

04 / 05

たしかめないと止められる

たしかめずに片方だけの操作を書くと、これまでどおり止まる。

エラーが出たら「まだ絞りこんでいないよ」という合図だと思ってほしい。if を1つ足せば通るようになる。

function dasu(m: string | number) {  console.log(m * 2);}

実行結果

型のエラー: 算術演算の左辺には、'any' 型、'number' 型、'bigint' 型、または列挙型を指定する必要があります。

05 / 05

`undefined` にも同じ手が効く

「まだ無いかもしれない」型にも同じやり方が使える。たしかめた中だけで中身を使い、else で無かったときの処理を書く。

ここから書いてみよう。使う前にたしかめる、それだけだ。

type Namae = string | undefined;function yobu(m: Namae) {  if (typeof m === "string") {    console.log(m + "さん");  } else {    console.log("なまえ無し");  }}yobu("ゆい");yobu(undefined);

実行結果

ゆいさん
なまえ無し