TypeScriptの型キャスト

型キャストについて勉強したのでアウトプットします。

型キャストとは

型キャストとはTypeScriptの型推論を用いるとき、型推論が型の特定を正確に、推論することができないときに使用します。

開発者側が型を指定することでTypeScriptに正しい型を伝えることができます。

型キャストの書き方

書き方は２パターンあり 「<型>〜」 と 「〜as 型」と書きます。

型キャスト使用例

以下のようにHTMLファイルがあります。何かのアクションと同時にvalueの値を変えたいとします。

<body>
　<input type = text id = "userInput" value ='入力欄'>
</body>

以下TypeScriptファイルでvalueの値を取得し、値を変えようとするとコンパイル時にエラーが表示されてしまいます。

const usersInput = document.getElementById("userInput");
usersInput.value = '入力してください'
　　　　　　　~~~~~

test.ts:2:12 - error TS2339: Property 'value' does not exist on type 'HTMLElement'.

2 usersInput.value = '入力してください'
             ~~~~~
Found 1 error in test.ts:2

プロパティ ‘value’ は型 ‘HTMLElement’ に存在しないというエラーです。

このような場合、型キャストを使用しTypeScriptに正しい型を伝えます。

以下のように「<型>〜」 か 「〜as 型」のように記載すればコンパイラーがなくなります。

const usersInput = <HTMLInputElement>document.getElementById("userInput");
//または
//const usersInput = document.getElementById("userInput") as HTMLInputElement;
usersInput.value = '入力してください'

実行結果