型述語 is — 自作の型ガードのサンプルコード — TypeScript

1typeofの判定に名前を付ける

型述語の最も基本の形です。中身は typeof の判定そのものですが、戻り値の型を value is string と書くことで「true なら string」とコンパイラに伝わり、if 文の中で絞り込みが働きます。判定ロジックに名前が付くので、同じ判定を何度も書かずに済みます。

TypeScript

// 戻り値の「value is string」が型述語
function isText(value: string | number): value is string {
  return typeof value === "string";
}

const mixedValues: (string | number)[] = ["hello", 42, "world"];

for (const item of mixedValues) {
  if (isText(item)) {
    console.log(item.toUpperCase()); // ここでは string
  } else {
    console.log(item.toFixed(1)); // ここでは number
  }
}

2filterでnullを取り除く

型述語が最も効く場面の1つが filter との組み合わせです。value !== null を返すだけの関数でも、型述語を付けて filter に渡すと結果の配列が string[] に絞り込まれ、以降は null の心配なく扱えます。未回答が混ざるアンケートやAPIの欠損データの整理で頻出します。

TypeScript

// true を返したら「value は string」と伝える
function isPresent(value: string | null): value is string {
  return value !== null;
}

const surveyAnswers: (string | null)[] = ["good", null, "excellent", null];

// 型述語の関数を渡すと、結果は string[] に絞り込まれる
const submitted = surveyAnswers.filter(isPresent);

console.log("回答数: " + submitted.length);
for (const answer of submitted) {
  console.log(answer.toUpperCase()); // null の心配なく string として使える
}

3inの判定を型述語関数にして使い回す

オブジェクト同士のユニオンは in 演算子で絞り込めますが、同じ in の条件をあちこちに書くと修正漏れのもとになります。型述語関数にまとめれば、判定方法を一箇所で管理しながら、呼んだ場所すべてで絞り込みが働きます。図形のように種類ごとの計算が分かれるデータで便利です。

TypeScript

type Circle = { radius: number };
type Square = { sideLength: number };

// in による判定を関数にまとめて名前を付ける
function isCircle(shape: Circle | Square): shape is Circle {
  return "radius" in shape;
}

const drawings: (Circle | Square)[] = [
  { radius: 2 },
  { sideLength: 3 },
  { radius: 1 },
];

for (const shape of drawings) {
  if (isCircle(shape)) {
    console.log("円の面積: " + shape.radius * shape.radius * 3.14);
  } else {
    console.log("正方形の面積: " + shape.sideLength * shape.sideLength);
  }
}

4外部入力をリテラル型ユニオンに検証する

クエリパラメータやフォームの値はただの string で届くため、そのままではリテラル型の変数に代入できません。候補と一致するかを調べる型述語を通せば、検証済みの値だけが Priority 型として扱えます。「外から来た文字列を型の世界に入れる関所」として実務で多用される形です。

TypeScript

type Priority = "low" | "medium" | "high";

// ただの string が Priority かどうかを検証する関所
function isPriority(value: string): value is Priority {
  return value === "low" || value === "medium" || value === "high";
}

function applyPriority(rawValue: string): string {
  if (isPriority(rawValue)) {
    const accepted: Priority = rawValue; // 検証済みなので代入できる
    return "優先度を " + accepted + " に設定しました";
  }
  return "不正な優先度です: " + rawValue;
}

console.log(applyPriority("high"));
console.log(applyPriority("urgent"));

5unknownなJSONデータの形を検証する

JSON.parse の結果のような中身が保証できない値は unknown で受け、型述語で形を確かめてから使うのが安全な作法です。オブジェクトであること、必要なプロパティがあること、その型が合っていることまで調べて初めて User として扱えます。APIレスポンスの入力検証ガードそのものです。

TypeScript

type User = { userName: string; age: number };

function isUser(value: unknown): value is User {
  if (typeof value !== "object" || value === null) {
    return false;
  }
  // プロパティの存在と、その値の型まで確かめる
  return "userName" in value && typeof value.userName === "string" &&
    "age" in value && typeof value.age === "number";
}

const goodData: unknown = JSON.parse('{"userName": "Taro", "age": 28}');
const badData: unknown = JSON.parse('{"userName": "Hanako"}');

if (isUser(goodData)) {
  console.log(goodData.userName + "(" + goodData.age + "歳)");
}
console.log(isUser(badData)); // age がないので false

サンプルコードで身につける: 型述語 is — 自作の型ガード

1typeofの判定に名前を付ける

2filterでnullを取り除く

3inの判定を型述語関数にして使い回す

4外部入力をリテラル型ユニオンに検証する

5unknownなJSONデータの形を検証する