TypeScriptと型キャスト

こんにちは。KOUKIです。本記事では、TypeScriptの型キャストについて、まとめています。

型キャストについて

型キャストは、TypeScriptが正確な型を推論できない時、開発者が任意の型にキャストするときに使用します。

例えば、以下のような状況であれば、TypeScriptは型を推論できます。

上記では、querySelectorにて、pタグの情報を取得しました。その型のタイプは、「HTMLParagraphElement | null」になっており、問題なく型を推論できているようです。

しかし、以下の状況の場合は、型推論が難しくなります。

今度は、getElementByIdを使って、HTML要素を取得しました。

先ほどとは違って、「HTMLElement | null」となっており、HTMLタグ全体を指すようなざっくりとした型になりました。

この挙動は、大変不便です。取得先のHTMLタグがpタグかどうか確証が取れません

型キャスト

型キャストには、2種類の方法があります。

方法1は、ReactのJSXと構文がかぶるので方法2を使う方が多いかもしれません。

おわりに

型キャストの使用頻度は高いので、個別の記事にしました。

参考になれば嬉しいです^^

それでは、また!