型アサーションとは
TypeScriptで推論された型を上書きする機能のこと。
「アサーション(Assertion)」は日本語で「主張、断言」、つまり「この変数の型は⚪︎⚪︎ですよ！」とコンパイラに明示的に伝えるような機能のことです。
基本的な使い方は以下のようになります。
変数名 as 型名
TypeScriptには型推論と呼ばれる「変数に代入した値に基づいてコンパイラが自動で型を推論する機能」が元々備わっています。
これによって、全ての変数や引数に型の定義を書く必要がなくなるためコードの記述量が減るというメリットがあります。
一方で、型推論ばかりに頼ってしまうと、知らずのうちに開発者の意図しない型に推論されてしまうことがあります。その結果、別の型の値を変数に代入してしまうとコンパイラエラーに繋がります。
以下は簡単な例です。
let hoge = {}; // ここで{}型のhogeと推論される
hoge.name = "Yamada"; // Err「プロパティ 'name' は型 '{}' に存在しません。」
hoge.age = 20; // Err「プロパティ 'age' は型 '{}' に存在しません。」
上記は変数定義時に、{}型と推論された変数hogeに対してname, ageというプロパティを追加したためコンパイルエラーになります。
これを型アサーションで解決すると以下のようになります。
type User = {
name: string,
age: number,
}
let hoge = {} as User;
hoge.name = "Yamada";
hoge.age = 20;
まず、型エイリアスと呼ばれる機能で、name、ageというプロパティを持つオブジェクトの型を「User」という型名で定義します。
その後、「let hoge = {} as User」と書くことで、「変数hogeをUser型で推論してください！」とコンパイラに伝えることができるのでエラーは解消されます。
as以外の書き方
asを用いた記法以外にも、アングルブラケット（<>）を用いた記法が存在します。
使い方は以下の通りです。
変数名<型名>
しかし、こちらのアングルブラケット構文は、JSXの<>と混在してコードが読みにくくなるのであまり使用されないようです。
型アサーションの使用は極力避ける
型の推論を上書きしてくれるという機能は非常に強力が故に便利に感じてしまいます。しかし、型アサーション後の型に何か問題があったときコンパイルエラーとして検知されないので実行時になってエラーに気づくということが発生してしまいます。
型アサーションの使用を避けるためにも、コンパイラの型推論に全面的に頼らずに、変数定義の際に予め型宣言を行なうことも重要なのかと思います。
しかし、一般的に、JavaScriptからTypeScriptへコードを移植する際、発生するコンパイルエラーを一時的に解消したいという目的では、型アサーションが使われるようです。それ以外の目的では極力使用は避けたほうがよさそうですね。