中級

asによる型アサーションがコンパイラを騙して実行時エラーになる

asはコンパイラに「この値はこの型として扱ってよい」と伝える構文で、実際の値を変換したり検証したりはしません。unknown型の値をasで別の型に見せかけると、実際の値がその型のメソッドを持たない場合に実行時エラーになります。

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

main.ts:2

main.ts

ファイル名 — コンパイル前のTypeScriptソースです（sourceMapで変換後の位置を逆引きしています）

2

行番号 — 実際にクラッシュした行

TypeError

例外クラス — 何が起きたか。ここを検索するのが最短です

s.toUpperCase is not a function

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

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

 1  function shout(s: string): string {
 2    return s.toUpperCase();
 3  }
 4  const data: unknown = 42  ;
                            ^
 5  console.log(shout(data as string));

 1  interface User {
 2    name: string;
 3  }
 4  function greet(u: User): string {
 5    return u.name.toUpperCase();
 6  }
 7  const raw: unknown = 42            ;
                                ^
 8  console.log(greet(raw as User));

 1  function sumAll(items: number[]): number {
 2    return items.reduce((a, b) => a + b, 0);
 3  }
 4  const raw: unknown = "5"      ;
                             ^
 5  console.log(sumAll(raw as number[]));

 1  function shout(s: string): string {
 2    return s.toUpperCase();
 3  }
 4  const data: unknown = true;
                            ^
 5  console.log(shout(data as string));

 1  interface Car {
 2    engine: { start(): string };
 3  }
 4  function ignite(c: Car): string {
 5    return c.engine.start();
 6  }
 7  const raw: unknown = 5                                   ;
                                           ^
 8  console.log(ignite(raw as Car));

よくある誤解

「asで型を指定したのだから、その型のはず」という思い込みは危険です。asは型チェックを通すための宣言に過ぎず、実際の値がその型の性質を満たしているかどうかは実行時まで分かりません。

実務での勘所

asは完全に無制限というわけではありません。TypeScriptは、変換元と変換先の型が構造的にまったく重なりを持たない場合(たとえば"hello" as numberのように文字列を直接numberとして扱おうとする場合)は、これをコンパイルエラーとして拒否します。asが許されるのは、多少なりとも型の構造に重なりがある場合に限られます。ただし、この制約はunknownを経由する二重のasによって迂回できてしまうという弱点があります。

演習をはじめる

関連するエラー

• 非nullアサーション（!）がコンパイラを騙して実行時エラーになる変数名の後ろに!を付ける非nullアサーションは、「この値はnull/undefinedではない」とコンパイラに約束する構文です。
• as unknown as Xの二重キャストは型チェックを完全に迂回し、実行時エラーの原因になるTypeScriptは通常、明らかに無関係な型同士のasによるキャストをエラーにします。