言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

TypeScript辞典

  1. トップページ
  2. TypeScript辞典
  3. ユーザー定義型ガード is

ユーザー定義型ガード is

対応: TypeScript 1.0(2014)

ユーザー定義型ガードは、型の絞り込みロジックを関数として独立させる仕組みです。戻り値型に『x is T』という形式の型述語(type predicate)を指定すると、その関数を条件式で使った際に TypeScript が型を絞り込みます。

構文

function isT(x: unknown): x is T {
  // 実際の判定ロジック(boolean を返す)
  return /* ... */;
}

サンプルコード

// 基本的なユーザー定義型ガード
interface User {
  id: number;
  name: string;
}

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    typeof (value as User).id === 'number' &&
    typeof (value as User).name === 'string'
  );
}

const data: unknown = { id: 1, name: '両面宿儺' };

if (isUser(data)) {
  // ここでは data: User
  console.log(data.name);
}

// 配列のフィルタリングと組み合わせる
const values: (string | null | undefined)[] = ['a', null, 'b', undefined, 'c'];

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

const strings: string[] = values.filter(isString);
// => ['a', 'b', 'c'](型は string[])

// 判別ユニオンへの応用
type Circle = { kind: 'circle'; radius: number };
type Square = { kind: 'square'; side: number };
type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === 'circle';
}

実行すると次のように出力されます。

npx ts-node ts_is_guard.ts
両面宿儺

概要

型述語(『x is T』)を使うと、複雑な判定ロジックを関数に切り出しつつ、TypeScript の型ナローイングの恩恵を受けられます。引数名は関数のシグネチャ内のパラメータ名と一致させる必要があります。

注意点として、型ガード関数の内部実装が正しくない場合でも TypeScript はコンパイルエラーを出しません。開発者が正確な判定ロジックを書く責任を負います。たとえば常に『return true』としても型チェックを通過してしまうため、実際の検証ロジックを確実に実装することが重要です。

配列の『filter』メソッドに型ガード関数を渡すと、結果の配列の型が絞り込まれます。これは『(string | null)[]』から『string[]』を得るような場合に特に役立ちます。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。