Gizanbeak

この記事を読むことで得られること

この記事ではTypeScriptの特性の一つである型アサーションについて分かりやすく解説します。

「型アサーションって何？」「as とはどういうもの？」「キャストと型アサーションの違いって何？」という疑問を抱えている方、いませんか？
この記事を読めば、そんな疑問が解消されること間違いなしです。

型アサーションとは

まず、型アサーションとは何かについて説明します。

TypeScriptではプログラムが特定の場所で特定の型の値を持つことを、開発者が確信しているがTypeScript自体がそれを認識していないときに、開発者が明示的にその型を指定できる 方法があります。

その方法が「型アサーション」です。

例えば、下記のようなコードがわかりやすいです。

let value: unknown = "hello world";
let length: number = (value as string).length;

このコードでは value という変数は最初にunknown型として定義されています。

unknown型は任意の型を受け入れることができるため、実際には value にはstring型の値が代入されています。
しかし、TypeScriptは value がstring型であることを認識していないため、そのままでは .length プロパティを使用することはできません。

そのため、(value as string) とすることで value がstring型であることを明示しています。
この as が型アサーションの役割を果たしています。

asを使った型アサーション

as キーワードを使った型アサーションについて詳しく見ていきましょう。

as キーワードは変数の型をアサートするために使用します。
これは、コンパイラに対して「私（開発者）はこの変数がこの型であると確信しているよ」と伝える役割を果たします。

オブジェクトに対しても同様に使用することができ、その場合以下のようになります。

let data: any = { name: "TypeScript tutorial", duration: 120 };
let dataName: string = (data as { name: string; duration: number }).name;

この新しい例ではany型のオブジェクト data に対して、具体的なオブジェクトの型 （{ name: string; duration: number }） であるとアサートしています。
その結果 name プロパティを安全に取得することができますね！

【完全ガイド】TypeScriptオブジェクト型の理解と活用法

TypeScriptのオブジェクト型を活用しませんか？基本から応用まで詳しく解説します。プログラミングがさらに楽しくなること間違いなし！

gizanbeak.com

アングルブラケット構文を使った型アサーション

次にアングルブラケット（<>）を使った型アサーションについて説明します。

TypeScriptでは型アサーションにはもう一つの方法、アングルブラケット構文があります。

下記のような形で使用します。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

この形式では型アサーションは <string>someValue と記述され、 someValue をstring型とアサートします。

ただし、この構文は React のJSXと衝突する可能性があるため、JSXを使用するプロジェクトでは as 構文の使用が推奨されているようです。

型アサーションのデメリット

型アサーションは便利ですが、使い方を誤ると危険な結果を招く可能性があるため注意が必要です。
例えば 存在しないプロパティにアクセス したり、メソッドを呼び出すことがあります。

また、以下のように不正な型変換を行うとランタイムエラーを引き起こす可能性もあります。

let someValue: any = 5;
let strLength: number = (someValue as string).length; // エラー: someValueが数値なのに文字列として扱うとエラーになる

型アサーションは強力な機能であるため正しく使えば役立ちますが、誤った使用はバグの元になります。
だからこそ、型アサーションを使う際は慎重になるべきだと思います。

TypeScriptはめんどくさい？ 対策をわかりやすく解説

初学者向けに、TypeScriptの面倒くささとその対策を解説。型安全性のメリットも紹介！

gizanbeak.com

型アサーションとキャストの違い

「型アサーション」と「キャスト」、この二つの用語は似ていますがまた違う機能になります。

型アサーションは コンパイラにこの値は確かにこの型と教える ための方法です。
一方で、キャストは 一つの型から別の型へ値を変換する 操作です。

型アサーションでは元の値は変更されず、キャストでは元の値が新しい型に合わせて変換されます。

この点を抑えておくと型アサーションとキャストが違うものだと理解できますね！

まとめ

以上がTypeScriptの型アサーションについての解説です。

型アサーションは開発者が値の型を確信している場合に、その型をTypeScriptに教えるための手段です。
as キーワードやアングルブラケット構文を用いて型アサーションを行うことができます。

ただし、型アサーションは正しく使わないと予期しないバグの原因にもなります。

何事もよく理解した上で使用するのが大事ですね。