中級

is possibly 'undefined' の原因と直し方

interfaceで?を付けたオプショナルプロパティは、値が入っていない（undefined）可能性を型として保持します。narrowing（存在確認）をせずにメソッドやプロパティへアクセスすると、このエラーになります。

エラーメッセージの読み方

main.ts(5,10): error TS18048: 'p.bio' is possibly 'undefined'.

main.ts

ファイル名

5

行番号

10

列番号 — この位置でtscが検査に失敗しました

TS18048

エラーコード — 検索するとTypeScriptの解説が見つかります

'p.bio' is possibly 'undefined'.

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  interface Profile {
 2    bio?: string;
 3  }
 4  function shout(p: Profile): string {
 5    return p.bio .toUpperCase();
                 ^
 6  }
 7  console.log(shout({ bio: "hi" }));

 1  interface Cart {
 2    coupon?: string;
 3  }
 4  function applyCoupon(c: Cart): number {
 5    return c.coupon .length;
                  ^
 6  }
 7  console.log(applyCoupon({ coupon: "SAVE10" }));

 1  interface Options {
 2    timeout?: number;
 3  }
 4  function describe(o: Options): number {
 5    return o.timeout  + 1;
                   ^
 6  }
 7  console.log(describe({ timeout: 9 }));

よくある誤解

「オプショナルプロパティも、実際に値を渡していれば安全なはず」という考えは、TypeScriptの型チェックには通用しません。tscは呼び出し元の実際の値ではなく、型として「undefinedかもしれない」という可能性だけを見て機械的に判定します。

まとめ

is possibly 'undefined'は中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

• 非nullアサーション（!）がコンパイラを騙して実行時エラーになる変数名の後ろに!を付ける非nullアサーションは、「この値はnull/undefinedではない」とコンパイラに約束する構文です。
• union型（string | number）のメソッド呼び出しで型エラーになる理由string | numberのようなunion型の値に対して、片方の型にしか無いメソッド（toUpperCaseなど）を呼び出そうとすると、もう一方の型に無いことを理由にエラーになります。