中級

union型（string | number）のメソッド呼び出しで型エラーになる理由

string | numberのようなunion型の値に対して、片方の型にしか無いメソッド（toUpperCaseなど）を呼び出そうとすると、もう一方の型に無いことを理由にエラーになります。typeof等で型を絞り込む（narrowing）必要があります。

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

main.ts(2,16): error TS2339: Property 'toUpperCase' does not exist on type 'string | number'.

main.ts

ファイル名

2

行番号

16

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

TS2339

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

Property 'toUpperCase' does not exist on type 'string | number'.

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

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

 1  function describe(value: string | number): string {
 2    return value.toUpperCase();
                        ^
 3  }
 4  console.log(describe("hi"));

 1  function format(value: string | number): string {
 2    return value.toFixed (2);
                       ^
 3  }
 4  console.log(format(3.14159));

 1  function label(value: string | boolean): string {
 2    return value.toUpperCase();
                        ^
 3  }
 4  console.log(label(true));

よくある誤解

「文字列を渡すつもりだから大丈夫」という呼び出し側の意図は、TypeScriptの型チェックには伝わりません。union型のまま扱う限り、tscは「numberが渡されるかもしれない」という前提でチェックします。

まとめ

union型（string | number）のメソッド呼び出しで型エラーになる理由は中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

• is possibly 'undefined' の原因と直し方interfaceで?を付けたオプショナルプロパティは、値が入っていない（undefined）可能性を型として保持します。
• switchで一部returnを書き忘れた原因と直し方union型の値をswitch文で分岐する関数で、一部のケースにしかreturnを書かないと、「関数がreturn文で終わっていない」というエラーになります。