TypeScript 4.9 について調べてみた - devlog [開発部門ブログ]

記事概要

こんにちは、ネットオン開発Sec.のサイトーさんです。

今回2022年11月25日にリリースされた TypeScript 4.9 の新機能と使い方についてまとめてみました。

TypeScript 4.9 の主な変更点

TypeScript 4.9 ではいくつか新しい機能が追加されました。その中から気になった以下の機能についてみていきます。

satisfies 演算子とは
in 演算子の未知のプロパティの絞込みチェックとは
クラスでの Auto-accessor とは

satisfies 演算子とは

普段の開発で変数の型が一致していることを保証して欲しい状況と、具体的な型も保持しておきたいという状況を同時に満たしてほしいという場合があると思います。今まではこの２つはどちらかをあきらめる必要がありましたが、satisfies 演算子ではこのようなジレンマを解決することができます。

satisfies 演算子は型チェックしたいオブジェクトの後ろに satisfies <型> で確認することができます。

satisfies を使用するプロパティ名がColorで定義されていないものはエラーが表示され、変数の型は具体的なままになる。

satisfies を利用すれば型と同じオブジェクトが確認することができますが、プロパティ red、 green、blue 以外のプロパティを持っていてもエラーとなってしまうので注意する必要があります。

satisfies はプロパティが過剰にあってもエラーを表示します（余剰プロパティチェック)

satisfies 演算子を利用すればプロパティの型をチェックせずに固有のメソッドなどの利用もできるので、この機能は積極的に利用していきたいですね！

in 演算子の未知のプロパティの絞込みチェックとは

TypeScript で開発をしていると、サーバから受け取ったデータにどのようなプロパティがあるのか実行するまで分からないということがあると思います。 Typescript 4.9 ではこのようなケースに対応できるように in 演算子で型が不明のオブジェクトにどのようなプロパティが含まれているかを判定できるようになったそうです！

９行目で unknown なオブジェクトに name プロパティが存在しているかを in 演算子で判定しています

10行目の packageJSON の型は object & Record<“name”, unknown> となるので、その後に利用する際も型がわかるようになっています。実際の開発ではバックエンドからデータをフェッチして利用するというケースは多いはずなのでこの機能があれば、プロパティの存在チェックが簡単になりますね！

クラスでの Auto-accessor とは

クラスでの get アクセサ、 set アクセサは利用する場合はそれぞれクラスで定義する必要がありましたが、accessor を用いて宣言することでそれらのアクセサが自動で生成されるようになりました。

業務ではReactをメインで利用しているのであまり使わない機能になるのですが、便利な機能なので忘れないようにしたいですね。。。

TypeScript をバージョンアップする際の便利ツールについて

ここからは TypeScript 4.9の話とは少し離れますが、私たちが過去に TypeScript のバージョンアップをする際に npm-check-updates を利用しました。このライブラリは指定したライブラリをアップデートする際に指定されたバージョンを無視して、package.jsonの依存関係を最新バージョンに変更してくれます。

インストール自体は以下のコマンドで簡単にできます。

npm i -g npm-check-updates

実際に調べるには npx ncu <調べたいライブラリ> で問題なく上げられるバージョンを表示してくれます。そのままアップデートする際は npx ncu -u で package.json の中を更新してくれます。更新後は npm install を実行すれば依存関係を考慮したアップデートを開始してくれます。実際に業務で利用して手作業でアップデートするより簡単にできたので皆さんも使ってみてください！