はじめに
こんにちは、株式会社キカガク、プラットフォーム部の西村です。
みなさま、快適な TypeScript ライフをお過ごしでしょうか？今回は TypeScript での開発をサポートする便利機能、Inlay Hints についてご紹介します。
想定読者
- TypeScript で開発している方
- Visual Studio Code で開発している方
Inlay Hints って何ぞや？
Visual Studio Code における型の Inlay Hints 機能を使うと、例えば以下のスクリーンショットのように headerContentの型が{ title: string; id: string } として推論されていることをグレーの文字で示してくれます。
何が嬉しいのか
省略されている型注釈がわかり、ソースコード読解の助けになる
TypeScript 開発者は型を宣言して実装しますが、実際のソースコードに型がすべて書かれているわけではありません。記述を省略することもあります。
Visual Studio Code では、該当箇所にカーソルを合わせると型が表示されますが、気になるところを一つずつ確認するのは現実的ではありません。
このような時に Inlay Hints を活用すると、省略された型注釈を目視で確認でき、ソースコードの理解が容易になります。
Inlay Hints の設定方法
1. Visual Studio Code の設定を開く
2. TypeScript Inray Hint と入力
3. Inlay Hints に関する設定にチェックを入れる
私がチェックを入れているものを紹介しておきます。
TypeScript › Inlay Hints › Enum Member Values: Enabled
- 列挙型宣言内のメンバー値のインレイ ヒントを有効/無効にします。
TypeScript › Inlay Hints › Function Like Return Types: Enabled
- 関数シグネチャの暗黙的な戻り値の型について、インレイ ヒントを有効/無効にします。
TypeScript › Inlay Hints › Parameter Types: Enabled
- 暗黙的なパラメーター型へのインレイ ヒントを有効/無効にします。
TypeScript › Inlay Hints › Property Declaration Types: Enabled
- プロパティ宣言の暗黙的な型へのインレイ ヒントを有効/無効にします。
TypeScript › Inlay Hints › Variable Types: Enabled
- 暗黙的な変数型のインレイ ヒントを有効/無効にします。
最後に
今回は TypeScript の型を表示してくれる、Inlay Hints をご紹介しました！
個人的には、Inlay Hints を導入して開発が快適になったと感じています。
導入した結果邪魔だと感じる人もいると思うので、一度設定してみて適宜カスタマイズすることをおすすめします。
