unknown で受け取って絞り込む

01 / 03

外から来るデータは何が入っているか分からない

サーバーから来た JSON をパースすると、中身は何でもありうる。オブジェクトかもしれないし、文字列かもしれないし、null かもしれない。

TypeScript では何か分からないものを unknown で受けるよ。any と違って、確かめないと使えない。

const data: unknown = JSON.parse('{"namae": "ゆい"}');// data.namae とは書けない（unknown だから）

02 / 03

typeof で絞り込む

typeof data === "string" と書くと、その中では TypeScript が string だと分かってくれる。

これは ch3 で学んだナローイングと同じ。unknown に対しても同じやり方が使えるよ。

function show(data: unknown): void {  if (typeof data === "string") {    console.log(data.toUpperCase());  } else {    console.log("文字列じゃない");  }}show("hello");

実行結果

HELLO

03 / 03

オブジェクトかどうかを確かめる

API のレスポンスはたいていオブジェクト。typeof data === "object" && data !== null で確かめてから、"namae" in data でプロパティがあるかも見る。

面倒に思えるかもしれないけれど、壊れたデータが黙って通るよりずっと安全だよ。

function getName(data: unknown): string {  if (    typeof data === "object" &&    data !== null &&    "namae" in data  ) {    return String((data as Record<string, unknown>).namae);  }  return "不明";}console.log(getName({ namae: "ゆい" }));

実行結果

ゆい