こんにちは！いきなりなのですが型アサーションって聞いたことありますか？
研修で型アサーションを使うことがあったので備忘録的に残しておきたいと思います。

まず型アサーションとは？

TypeScriptには、型推論を上書きする機能があります。その機能を型アサーション(type assertion)と言います。 

コンパイラに自分の型のほうが正しいと言っているってことですね。

書き方

まず一つ目にas構文ですね～例えば・・・
こんな感じで書いたり。

const closeDropDownHandler = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (target && !target.closest('.hogehoge')) {
    isfugafuga.value = false;
  }
};

ここでの例を説明するとこのHTMLElementを指定しないと「パラメーター 'e' の型は暗黙的に 'any' になります。」となるのでコンパイラ君に自分の型が正しいというてる感じですね。

二つ目に角括弧構文(angle-bracket syntax)です。
そこまで見たことないんですよね・・・

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

この例では、someValueの型がanyとなっているため、.lengthプロパティにアクセスできません。そこで、<string>と型アサーションを使うことで、someValueを明示的にstring型とみなすことができます。

方言みたいなものですね・・・

注意点

こんな便利なものでも注意点が必要です。いわば型の上書きなので、乱用するとコードの安全性が損なわれる可能性があるんですね。 気を付けないといけない点として、三つあると思います。

1. 型アサーションは、コンパイル時のみ有効で、実行時には影響しません。つまり、実際の値の型が異なる場合にはランタイムエラーが発生します。
2. 型アサーションを使う前に、値の型を確認することが重要です。
3. オブジェクトリテラルに対して型アサーションを使う場合、一部のプロパティが欠落していると、エディターからエラーが表示されなくなります。

使い方を間違えるとまずいということがわかりました。
 

まとめ

便利なものだからこそ使い方は考える！というものですね。

型アサーションは強力な機能ですが、適切に使わないと危険です。しっかりと理解して、安全に活用していきましょう！