概要: このチュートリアルでは、値に新しい型を割り当てることができるTypeScriptの型アサーションについて学びます。
型アサーションは、TypeScriptコンパイラに値を指定された型として扱うように指示します。TypeScriptでは、型アサーションにasキーワードまたは<>演算子を使用できます。
asキーワードを使用した型アサーション
以下は、querySelector()メソッドを使用して、HTMLドキュメントの最初のinput要素を選択します。
let el = document.querySelector('input["type="text"]');Code language: TypeScript (typescript)document.querySelector()メソッドの戻り値の型はElement型であるため、次のコードはコンパイル時エラーを引き起こします。
console.log(el.value);Code language: TypeScript (typescript)エラー
Property 'value' does not exist on type 'Element'.Code language: JavaScript (javascript)その理由は、valueプロパティがElement型に存在しないためです。HTMLInputElement型にのみ存在します。
これを解決するには、asキーワードを使用して、el要素の型をHTMLInputElementとして扱うようにTypeScriptコンパイラに指示できます。
const el = document.querySelector('input[type="text"]');
const input = el as HTMLInputElement;Code language: TypeScript (typescript)これで、input変数はHTMLInputElement型になります。そのため、そのvalueプロパティにアクセスしてもエラーは発生しません。次のコードは機能します。
console.log(input.value);Code language: TypeScript (typescript)ElementオブジェクトにHTMLInputElement型を割り当てる別の方法は、プロパティに次のようにアクセスする場合です。
let enteredText = (el as HTMLInputElement).value;Code language: TypeScript (typescript)HTMLInputElement型は、Element型に拡張するHTMLElement型を継承していることに注意してください。
typeAからtypeBへの変数の型アサーションの構文は次のとおりです。
let a: typeA;
let b = a as typeB;Code language: TypeScript (typescript)<>演算子を使用した型アサーション
asキーワードに加えて、型アサーションを実行するために<>演算子を使用できます。たとえば、
let input = <HTMLInputElement>document.querySelector('input[type="text"]');
console.log(input.value);Code language: TypeScript (typescript)<>演算子を使用した型アサーションの構文は次のとおりです。
let a: typeA;
let b = <typeB>aCode language: TypeScript (typescript)型アサーションの結果
型アサーションが失敗すると、型アサーションの使用方法と実際実行時の型に応じて、異なる種類のエラーが発生します。
1) コンパイル時エラー
互換性のない型間で型アサーションを実行しようとすると、TypeScriptコンパイラがエラーまたは警告を出す場合があります。たとえば、
let price = '9.99';
let netPrice = price as number; // errorCode language: JavaScript (javascript)この例では、数値型を文字列に代入しようとすると、TypeScriptコンパイラは次のコンパイル時エラーを発行します。
Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.Code language: JavaScript (javascript)2) 実行時エラー
オブジェクトの型アサーションを、その構造と一致しない型に対して実行し、存在しないプロパティにアクセスしようとすると、実行時エラーが発生します。たとえば、
let el = document.querySelector('#name');
let input = el as HTMLInputElement;
console.log(input.value.length);Code language: JavaScript (javascript)この例では、IDが#nameの要素がinput要素でない場合、input.valueは実行時にundefinedになります。したがって、値のlengthプロパティにアクセスすると、実行時エラーが発生します。
TypeError: Cannot read properties of undefined (reading 'length')Code language: JavaScript (javascript)3) 予期しない動作
型アサーションが正しくない場合、コンパイル時または実行時エラーは発生しないかもしれませんが、後でコードで予期しない動作が発生する可能性があります。エラーが型アサーションのポイントで発生しない可能性があるため、デバッグが困難になる可能性があります。
概要
- 型アサーションを使用すると、値に新しい型を割り当てることができます。
- 型アサーションを実行するには、
asキーワードまたは<>演算子を使用します。
