こんにちは。KOUKIです。本記事では、TypeScriptの型キャストについて、まとめています。
型キャストについて
型キャストは、TypeScriptが正確な型を推論できない時、開発者が任意の型にキャストするときに使用します。
例えば、以下のような状況であれば、TypeScriptは型を推論できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>TypeScript Test</title> <script src="dist/bundle.js"></script> </head> <body> <p></p> <- この情報を取得 </body> </html> // TypeScript // const para: HTMLParagraphElement | null const para = document.querySelector("p"); |
上記では、querySelectorにて、pタグの情報を取得しました。その型のタイプは、「HTMLParagraphElement | null」になっており、問題なく型を推論できているようです。
しかし、以下の状況の場合は、型推論が難しくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>TypeScript Test</title> <script src="dist/bundle.js"></script> </head> <body> <p id="paragraph"></p> </body> </html> // TypeScript // const para: HTMLElement | null const para = document.getElementById("paragraph"); |
今度は、getElementByIdを使って、HTML要素を取得しました。
先ほどとは違って、「HTMLElement | null」となっており、HTMLタグ全体を指すようなざっくりとした型になりました。
この挙動は、大変不便です。取得先のHTMLタグがpタグかどうか確証が取れません。
型キャスト
型キャストには、2種類の方法があります。
|
1 2 3 4 5 6 |
// 方法1 const para1 = <HTMLParagraphElement>document.getElementById("paragraph"); // 方法2 const para2 = document.getElementById("paragraph") as HTMLParagraphElement; |
方法1は、ReactのJSXと構文がかぶるので方法2を使う方が多いかもしれません。
おわりに
型キャストの使用頻度は高いので、個別の記事にしました。
参考になれば嬉しいです^^
それでは、また！
にほんブログ村
最近のコメント