ユーザー定義型ガード関数

はじめに

is 述語の戻り値の型

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

型ガードの使用

function process(val: unknown) {
  if (isString(val)) {
    console.log(val.toUpperCase()); // val: string
  }
}

インターフェースの型ガード

interface Cat { meow(): void }
interface Dog { bark(): void }
function isCat(pet: Cat | Dog): pet is Cat {
  return 'meow' in pet;
}

複雑なオブジェクトの型ガード

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

型ガードと型アサーションの比較

型ガードとしての Array.isArray

function flatten(val: string | string[]): string[] {
  return Array.isArray(val) ? val : [val];
}

ジェネリック型ガード

function isNonNull<T>(val: T | null | undefined): val is T {
  return val !== null && val !== undefined;
}
const values = [1, null, 2, undefined].filter(isNonNull);
// values: number[]

アサーション関数

function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new TypeError('Not a string');
}
assertIsString(input);
console.log(input.toUpperCase()); // narrowed to string

型ガードの責任

filter と find での型ガード

const mixed: (string | null)[] = ['a', null, 'b'];
const strings = mixed.filter((x): x is string => x !== null);
// strings: string[]

確認問題

まとめ