こんにちは、今期のアニメが忙しくてどう追おうか悩んでいるドラです。春休みにTypeScriptを書いていて引っかかったお話を書きます。

asとは何か

型アサーションです。キャストではありません！！型アサーションです(2回目)。何もわかってなかった僕はキャストのつもりで使ってました(照)。型アサーションって何なのかという話ですが一言で言うとコンパイラを黙らせる機能です。 handbookには

Sometimes you will have information about the type of a value that TypeScript can’t know about.

と書いてあり自分がTypeScriptより優秀な時は使ってねのニュアンスです。
また、注意点として

Like a type annotation, type assertions are removed by the compiler and won’t affect the runtime behavior of your code.

とかいてあり、あくまでコンパイラのための機能であることがわかります。

何が起こったか

next.jsにてSSRする際に用いるGetServerSidePropsにてdynamic routingにて用いる値を取得しようとして[id].tsx内で

export const getServerSideProps: GetServerSideProps = async (context) => {
    const id = context.params?.id;
    ...
};

みたいなことをすると思うんですが、この場合idはany型になるので事件は起きたと言う感じです。
コードに状況を起こすと元はurlパラメータなのでこういう状況です。

const id = '1' as any;

そのうえで僕のした操作としては、asをキャストだと思っていたのでこうしました。

const b = a as number;
const c = b + 3;

するとconsoleにcをはくとなんと13が帰ってきます。3が文字列に自動的にキャストされてこれが行われているわけです。

'1'+'3'

それではどうするのが正解だったのでしょうか、正解としては以下の様なコードになります。

const b = Number(a)
const c = b + 3;

JavaScriptの関数で変換しています(リンク)。TypeScriptはあくまでJavaScriptのラッパーであることは理解しておくべきですね。

any取扱注意を体感しました。