『型をつけて』と言われたときに as を使ってしまう理由と、その落とし穴

はじめに

最近レビューをしていて、よく見かけるコードがあります。

const user = {
  id: 1,
  userName: "John Doe",
} as User;

こんな感じです。
anyに推論されるとこに「型つけましょう！」ってレビューコメントすると、型アサーションで返ってきて、もう一往復するってことが結構多いんです。

「おいおい、その as どこで覚えた？」と思いますね🫣

7章 TypeScriptで型の付け方の練習しますが、あの章では型注釈で覚えているはずです。

それなのに突然現れる as User。

そしてだいたいの場合、そのコードを書いた本人は

型を付けろと言われたので型を付けました！

と、きっと思っているはずです。

でも違う。それは型を付けたんやない。違うんや。

TypeScriptに対して

黙れ

と言っているだけなんや。ってことを今日は伝えようと思います！！！

TypeScriptに対して黙れ？？

まさに先ほどレビューコメントで説明した通りに書きます。

型アサーション（as）

「黙ってこの型として扱え！！実態？知らんわそんなもん！」こんなニュアンスです。

型アサーションは

私はこの値の型を理解しています。
TypeScriptさんは黙っててください。

とコンパイラに伝える仕組みであるという感じです。

AIの提案を採用する前に考えよう

わかってます。7章の最初に練習したはずの型注釈ではなく型アサーションで型付けしてくる理由を。
AI以外にありませんね。AIはすぐアサーションしてくるので！
型エラーを出さない方向性に進むのでそうなっちゃうんですよねぇ。

初心者：「正しく理解したい」

AI：「とりあえずエラーを消したい」

結果的に型アサーションです。確かにエラーやanyは消えます。

でも、ShiftBの受講生にはこんな書き方してたっけ？？って疑問を持ってみてほしいです〜！！
まぁレビューで(優しく)言うので、そのまま投げちゃってもいいですが！！！
レビュワーはAIが出したやつ貼ってきたな！！！ってみた瞬間わかってます！笑

危険性を見てみる

こんな型があったとします。

type Hoge = { id: number; userName: string };

型注釈

存在しないプロパティを含めてみる

const hoge: Hoge = { id: 1, userName: "John Doe", hoge: "こんなプロパティないよ〜〜〜ん！！！" };

すると、型エラーを吐きます。

型安全ですねぇ。この型だって宣言したらその型になってないと注意してくれます。

では、型アサーションの場合はどうでしょう？？

型アサーション

存在しないプロパティを含めてみる

const hoge = { id: 2, userName: "Jane Doe", hoge: "こんなプロパティないよ〜〜〜ん！！！" } as Hoge;

するとどうでしょう？？

エラーを吐かないではありませんか😭

足りない場合もです。
これじゃhoge.userNameを参照しようとした時にundefinedになってこの先でエラー！！！TSなのに！ってことになりますね。

つまりこういうことです。
hogeの型はHogeだ！TSは黙ってろ！なので黙ってるんですよねぇ。

おわりに

色々言いましたが、完走までになんとなくでもわかれば大丈夫なので、とにかくレビューを受けてどんどん進んでください！！！！

違う！って思ったら指摘しますので🙆🏻‍♀️

仕事ではバックエンドで動的型付言語のRubyを使ってますが、やはり私はTypeScriptが好きですねぇ🥹