TypeScript：型ガードと絞り込み

出力2行。3.1 / 3

typeof で分岐する。number なら toFixed(1)、string なら length。

function describe(v: number | string): string {
  if (typeof v === "number") {
    return v.toFixed(1);
  }
  return String(v.length);
}

console.log(describe(3.14));
console.log(describe("abc"));

if の中では number として扱えるので toFixed が使える。絞り込まれていなければ「文字列にはtoFixedが無い」とエラーになっていた。

解答 == B

絞り込みが有効な範囲はどこまでか。

B

絞り込みは if のブロック内だけで有効。外に出れば元の型に戻るので、使う場所ごとに確認が必要になる。

出力2行。ワン / ニャー

if ("bark" in animal) と書くと、そのブロック内では Dog として扱える。

type Dog = { bark: () => string };
type Cat = { meow: () => string };

function speak(animal: Dog | Cat): string {
  if ("bark" in animal) {
    return animal.bark();
  }
  return animal.meow();
}

console.log(speak({ bark: () => "ワン" }));
console.log(speak({ meow: () => "ニャー" }));

in はプロパティの有無で型を判別する。オブジェクトの形が異なるユニオン型に有効な手段。

function f(v: number | string): number {
  if (____ v === "number") {
    return v * 2;
  }
  return v.length;
}

console.log(f(21));

出力 == 42

値の型を調べる演算子。小文字6文字。

typeof

typeof は基本型（number・string・boolean など）の判定に使う。オブジェクトの種類は判別できないので、その場合は in やタグを使う。

解答 == B

「v はこの型である」と型システムに教える書き方。

B

単に boolean と書くと絞り込みが効かない。v is string と書くことで「true を返したら v は string だ」とTypeScriptに伝えられる。

出力2行。成功：取得完了 / 失敗：通信エラー

r.kind === "success" で判別する。それぞれのブロックで data / error が使える。

type Result =
  | { kind: "success"; data: string }
  | { kind: "failure"; error: string };

function handle(r: Result): string {
  if (r.kind === "success") {
    return `成功：${r.data}`;
  }
  return `失敗：${r.error}`;
}

console.log(handle({ kind: "success", data: "取得完了" }));
console.log(handle({ kind: "failure", error: "通信エラー" }));

これがタグ付きユニオン。kind という共通の目印で判別すると、それぞれのブロックで固有のプロパティが安全に使える。

function isNumber(v: unknown): v ____ number {
  return typeof v === "number";
}

const vals: unknown[] = [1, "a", 2];
console.log(vals.filter(isNumber).length);

出力 == 2

「〜である」を意味する2文字のキーワード。

is

v is number と書くと、filter の結果が number[] になる。単なる boolean では unknown[] のままで、絞り込みが効かない。

解答 == B

typeof では全て object としか分からない。

B

typeof はオブジェクトの種類を区別できない（どれも "object" になる）。共通のタグを持たせるのが最も明確で安全な方法。

出力 == a, b

function isString(v: unknown): v is string を定義し、filter に渡す。

function isString(v: unknown): v is string {
  return typeof v === "string";
}

const values: unknown[] = [1, "a", true, "b", 2];
const strings = values.filter(isString);

console.log(strings.join(", "));

filter の結果が string[] になるので join が使える。型ガード関数を使わなければ unknown[] のままで、join も呼べなかった。

出力2行。5 / 6

Array.isArray() で判別できる。TypeScriptはこれを型ガードとして理解する。

function total(v: number | number[]): number {
  if (Array.isArray(v)) {
    return v.reduce((sum, n) => sum + n, 0);
  }
  return v;
}

console.log(total(5));
console.log(total([1, 2, 3]));

Array.isArray は標準の型ガード。TypeScriptがこの関数を理解しているので、if の中では number[] として扱える。

出力3行が完全一致

kind で判別し、それぞれ絵文字を付けて出力する。配列で3件を回す。

type ApiResult =
  | { kind: "success"; message: string }
  | { kind: "error"; message: string };

const results: ApiResult[] = [
  { kind: "success", message: "ユーザー取得成功" },
  { kind: "error", message: "権限がありません" },
  { kind: "success", message: "商品取得成功" },
];

for (const r of results) {
  if (r.kind === "success") {
    console.log(`✅ ${r.message}`);
    continue;
  }
  console.log(`❌ エラー：${r.message}`);
}

APIの結果を扱う定番の形。成功と失敗で持つデータが違っても、タグで判別すれば安全に処理できる。

出力 == 600

数値ならそのまま、文字列なら変換して NaN でないかを確認する。型ガード関数で数値化できるものだけを残す。

type Input = number | string | null;

function toNumber(v: Input): number | null {
  if (typeof v === "number") {
    return v;
  }
  if (typeof v === "string") {
    const n = Number(v);
    return Number.isNaN(n) ? null : n;
  }
  return null;
}

function isNumber(v: number | null): v is number {
  return v !== null;
}

const inputs: Input[] = [100, "200", null, "abc", 300];
const total = inputs.map(toNumber).filter(isNumber).reduce((s, n) => s + n, 0);

console.log(total);

変換と検証を分けているのが要点。toNumber が「変換できないものは null」に統一し、isNumber が null を除去する。段階を分けると各処理が単純になる。

出力2行。円：314.0 / 長方形：20.0

kind で判別すると、それぞれ radius / width・height が安全に使える。

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number };

function area(s: Shape): number {
  if (s.kind === "circle") {
    return s.radius ** 2 * 3.14;
  }
  return s.width * s.height;
}

const shapes: Shape[] = [
  { kind: "circle", radius: 10 },
  { kind: "rectangle", width: 5, height: 4 },
];

for (const s of shapes) {
  const label = s.kind === "circle" ? "円" : "長方形";
  console.log(`${label}：${area(s).toFixed(1)}`);
}

形が違うデータを1つの型で扱える。円に width は無く、長方形に radius は無い——タグで判別することで、存在しないプロパティへのアクセスが起こりえない。

出力 == 1500

型ガード関数の中で、オブジェクトであること・name が文字列であること・price が数値であることを順に確認する。

type Product = { name: string; price: number };

function isProduct(v: unknown): v is Product {
  if (typeof v !== "object" || v === null) {
    return false;
  }
  const o = v as Record<string, unknown>;
  return typeof o.name === "string" && typeof o.price === "number";
}

const data: unknown[] = [
  { name: "PC", price: 1000 },
  "文字列",
  { name: "Mouse" },
  { name: "Key", price: 500 },
  null,
];

const products = data.filter(isProduct);
const total = products.reduce((sum, p) => sum + p.price, 0);

console.log(total);

外部データの検証はこの形が基本。null も typeof では "object" になるので、明示的に除外する必要がある——JavaScriptの古い仕様に由来する有名な罠。

出力3行が完全一致

3つの状態それぞれが違うプロパティを持つ。kind で判別して分岐する。

type OrderState =
  | { kind: "pending"; orderedAt: string }
  | { kind: "shipped"; trackingNo: string }
  | { kind: "delivered"; deliveredAt: string };

const states: OrderState[] = [
  { kind: "pending", orderedAt: "2026-01-05" },
  { kind: "shipped", trackingNo: "ABC123" },
  { kind: "delivered", deliveredAt: "2026-01-10" },
];

for (const s of states) {
  if (s.kind === "pending") {
    console.log(`注文受付：${s.orderedAt}`);
    continue;
  }
  if (s.kind === "shipped") {
    console.log(`発送済：追跡番号 ${s.trackingNo}`);
    continue;
  }
  console.log(`配達完了：${s.deliveredAt}`);
}

状態ごとに必要なデータが違うのが現実的な設計。未発送なのに追跡番号を持つ、といった矛盾した状態を型として作れなくなる。