TypeScript 型の絞り込み（Narrowing）その1

TypeScript初心者向けです。
TypeScript 型の絞り込み（Narrowing）の話です。

型判定メソッドを作った場合は、type predicate機能を使おう。

文字列型(string)であるか判定するメソッド「isStrring」を作成してみました。
引数の値がstringならtrue、でないならfalseを返すメソッドです。

function getValue(): string | number | undefined {
  return 'SP';
}

function isString(value: string | number | undefined): boolean {
  return typeof value === 'string';
}

const value: string | number | undefined = getValue();

if (isString(value)) {
  // エラーになる。
  // Property 'length' does not exist on type 'string | number'.
  // Property 'length' does not exist on type 'number'.ts(2339)
  const len = value.length;
  console.log(len);
}

この例では、せっかくisStringで文字列型判定しているのに、
TypeScriptがvalueをstring型と認識出来ず
value.length
がエラーになります。

これを解決するには、
型判定メソッドはtype predicate機能を使います。

type predicate機能

isStringメソッドをtype predicate機能を使って実装しました。

// type predicate機能を使って実装
function isString(value: string | number | undefined): value is string {
  return typeof value === 'string';
}

const value: string | number | undefined = getValue();

if (isString(value)) {
  // valueがstring型と認識される
  const len = value.length;
  console.log(len);
}

type predicate機能は、戻り値が
引数変数名 is 判定型
となります。

今回の例では、引数変数名が「value」、判定型が「string」なので
value is string
になります。

型判定メソッドは、TypeScriptが型の認識が出来るように、type predicate機能を使いましょう。

TypeScript5.5では、type predicate機能の型推論が賢くなった

TypeScript5.5では、type predicate機能の型推論が賢くなって、
戻り値に
引数変数名 is 判定型
を実装しなくてもOKになりました。

// 型推論版
function isString(value: string | number | undefined) {
 return typeof value === 'string';
}

参考資料

型ガード関数 (type guard function)

Using type predicates