TypeScriptの型アサーション（as）とは
TypeScriptの型アサーションとは、asを使って「この値はこの型だ」と開発者側から指定する書き方です。TypeScriptの自動判定より、開発者が型を分かっている場面で使います。
なぜ型アサーションが必要なのか
TypeScriptは多くの場合、値の型を自動で判定してくれます。しかし、TypeScriptより開発者の方が「この値の型」を正確に分かっている場面もあります。代表的なのが、HTMLの要素を取得する場面です。
const input = document.getElementById("email");
input.value; // Error: Property 'value' does not exist on type 'HTMLElement'.TypeScriptはgetElementByIdの戻り値を「一般的なHTML要素（HTMLElement）」としか判断できず、それが入力欄（input）であることまでは分かりません。そのため.valueにアクセスしようとするとエラーになります。こういうときに型アサーションを使います。
型アサーション（as）の基本の書き方
値の後ろにas 型名と書きます。
const input = document.getElementById("email") as HTMLInputElement;
input.value; // OK。inputはHTMLInputElementとして扱われる「この要素は入力欄（HTMLInputElement）だと、私は分かっている」とTypeScriptに伝えているイメージです。これでエラーが解消され、.valueにアクセスできるようになります。
型注釈との違い
初心者が混乱しやすいのが、型注釈（: 型名）との違いです。この2つは似ているようで、役割が逆です。
| 書き方 | 役割 |
|---|---|
| 型注釈（: 型名） | 「この型の値しか入れないで」とTypeScriptにチェックさせる |
| 型アサーション（as 型名） | 「この型として扱って」とチェックを上書きする |
型注釈は「TypeScriptに守らせるルール」、型アサーションは「開発者がTypeScriptの判断を上書きする指示」という違いです。型注釈の基本については、こちらの記事で解説しています。
型アサーションを多用してはいけない理由
asは便利ですが、多用は危険です。なぜなら、asは実際の値をチェックせず、TypeScriptの判断を強制的に上書きしてしまうからです。
const value = "kino" as unknown as number;
console.log(value.toFixed()); // 型エラーは出ないが、実行時にクラッシュする本当は文字列なのに「number型だ」と無理やり指定すると、TypeScriptはエラーを出しませんが、実行時にはエラーになります。asを使うと、TypeScriptがせっかく守ってくれていた型の安全性を、自分から手放してしまうことになります。「エラーが消えるから」という理由だけでasを使うのは避けるべきです。
asの代わりに型ガードを使う
「値が本当にその型か分からない」場合は、asで無理やり指定するのではなく、型を確認してから使う「型ガード」がおすすめです。
function printLength(value: unknown) {
if (typeof value === "string") {
console.log(value.length); // ここではstringとして安全に扱える
}
}この「使う前に型を確認する」考え方は、any・unknownの記事でも詳しく解説しています。asと型ガードの使い分けを意識すると、より安全なコードが書けます。
.tsxファイルでのasの書き方の注意
前回の記事で少し触れましたが、.tsxファイルでは、もう一つの型アサーションの書き方である<型名>値という記法が使えません。
// .tsファイルでは書けるが、.tsxファイルではJSXと衝突してエラーになる
const input = <HTMLInputElement>document.getElementById("email");
// .tsxファイルではこちら（as）を使う
const input2 = document.getElementById("email") as HTMLInputElement;Reactを書く.tsxファイルでは、<型名>がJSXのタグと見分けがつかなくなるためです。実務ではどちらのファイルでも使えるasの方に統一しておくのが無難です。tsxとtsの違いについては、こちらの記事も参考にしてください。
よくあるエラー
const value = "kino" as number;
// Conversion of type 'string' to type 'number' may be a mistake...これは、まったく関係のない型（stringからnumber）へ直接asで変換しようとしたときに出る警告です。TypeScriptが「それ、間違いじゃない？」と教えてくれています。そもそも別の型に変換したい場合は、asではなくNumber()などの変換関数を使うのが正しい対処です。
よくある質問
Q. 型アサーション（as）と型注釈（: 型名）はどう違いますか？
A. 型注釈は「この型でチェックして」という指示、型アサーションは「この型として扱って」とチェックを上書きする指示です。役割が逆です。
Q. asはいつ使えばいいですか？
A. DOM要素の取得など、TypeScriptより開発者の方が型を確実に分かっている場面に限定して使うのがおすすめです。
Q. エラーを消すためにasを使ってもいいですか？
A. おすすめしません。asはチェックを無効化するだけで、実行時のエラーは防げません。まずは型ガードなど、安全な方法を検討してください。
まとめ
- 型アサーション（as）は、値の型を開発者側から指定する書き方
- DOM要素の取得など、TypeScriptより開発者が型を分かっている場面で使う
- 実際の値はチェックされないため、多用すると型の安全性を失う
- 型が不確かなときは、asではなく型ガードで確認してから使うのが安全
公式ドキュメントにも、型アサーションについての解説があります。
▶ TypeScript公式ドキュメント：Type Assertions
にほんブログ村へ
