TypeScriptの型アノテーション(:)と型アサーション(as)は違いって?

TypeScriptで型を宣言するときに

const data :Datatype 

とする方法と

const data = getData() as Datatype;

の二つあると思います。

これ2つとも似たようなことできるけど、どう使い分けたらいいのか気になったので調べてきました。

型アノテーション

アノテーションは注釈という意味を持ちます。

型アノテーションでは、コンパイラに対してこの変数はどのような型であると明示的に伝えることができます。

let num :number;
num = 123;
num = 123.456;
num = '123'; // Error

コンパイラとは

プログラミング言語をコンピュータが読めるように別言語に書き換える作業のこと。

TypeScriptではJavaScriptに変換している。

型アサーション

アサーションは自己主張という意味を持ちます。

型アサーションは、すでに変数に対して型推論された型を上書きすることを言います。

型推論

変数に対して、型アノテーションで型を明示的に宣言していない場合に、コンパイラが型を予測して決定してくれる機能のこと

asをつけることで、その後に指定した型に上書きしてくれます。

const user = {} as User;

あまり型アサーションは使わない方がいい!

型アサーションの説明でなんとなく「上書きかぁ~なんかそれだと最初から宣言してる型アノテーションの方が良さそう」となった方が多いと思います。

一般的に型が決まっているなら型アノテーションで統一した方がいいと言われています。

コンパイルエラーを出してくれない

TypeScriptの強みはなんといってもJavaScriptと違ってコンパイルエラーを出してくれるので、ランタイムエラーを起こしにくくしている点です。

型アノテーションでは、しっかり型が違っていたらコンパイルエラーを出してくれます。

しかし、型アサーションはどのような型も上書きしてしまうことができるため、ランタイムエラーを引き起こす可能性があります。

プロパティの追加を忘れてもコンパイラが指摘してくれない

型アノテーションを使うとプロパティに値を入れていなかった時にコンパイラはエラーを吐きます。

type User {
    name: string
}

const user: User = {};

zsh

TS2741: Property 'name' is missing in type '{}' but required in type 'User'.

しかし、下のようにasを使うとコンパイラは指摘せず、動作してしまいます。

type User =  {
    name: string
}

const user = {} as User;

まとめ

型アノテーションと型アサーションの違いは下のようになっています。

名前	役割
型アノテーション	型を明示的に宣言できる
型アサーション	型を上書きできる

コンパイラがあることによるランタイムエラーの軽減がTypeScriptの良い点だと思うので、基本的に型アノテーションを使った方が良さそうですね。