TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利

TypeScriptは強力な型システムが魅力です。
しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。

Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。
しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。

そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。

https://marketplace.visualstudio.com/items?itemName=MylesMurphy.prettify-ts

注意: Prettify TypeScriptは現在プレビュー版のため、将来的に機能が変更される可能性や動作に不安定な可能性があることにご注意ください。

Prettify TypeScriptの概要

Prettify TypeScriptを使用することで、VSCode上で型にカーソルをホバーした時に型が展開された状態で表示されます。

例えば標準のVSCodeでは展開されない交差型が展開されたりネストした型が表示されたりします（画像の線より上部がPrettify TypeScriptによって表示される型情報、下部が標準で表示される型情報です）

主な機能

交差型（intersection型）の展開

&で結合された複数の型を1つにまとめた交差型も展開して表示します。
たとえばUIライブラリなど多くのオプションを含む型も、一目で型情報を把握できるようになります。

例: Chakra UIのSelectコンポーネント

• 拡張機能なし
  

• 拡張機能あり
  

ユニオン型の展開

|で結合されたユニオン型も展開し、各要素を展開します。これにより、各ユニオンメンバーをすぐに理解できます。

type Success = { status: 'success'; data: { id: number; message: string } };
type Failure = { status: 'error'; error: { code: number; message: string } };
type Pending = { status: 'pending' };

type Result = Success | Failure | Pending;

（画像上部がPrettify TypeScriptによって表示される型情報、下部が標準で表示される型情報）

ジェネリクスの展開

ジェネリクスを使用した複雑な型も展開させることが可能です。

type ApiResponse<T> = {
  status: number;
  data: T;
  error?: string;
};

type User = {
  id: number;
  name: string;
  email: string;
};

type UserResponse = ApiResponse<User>;

（画像上部がPrettify TypeScriptによって表示される型情報、下部が標準で表示される型情報）

ただしこの後説明する設定で展開する型の深さを変更しています（デフォルト1→2に変更）

interface型の展開

標準のVSCodeではtypeは一部展開されますが、interface型は展開されません。
その点で私はかつてinterfaceよりtypeを好んで使用していました。

この拡張機能を使うことで、interfaceとtypeの違いを気にせず型情報を確認できるようになります。

（画像上部がPrettify TypeScriptによって表示される型情報、下部が標準で表示される型情報）

interfaceとtypeの詳しい違いについては別の記事を書いたのでよかったらご覧ください。

https://zenn.dev/atamaplus/articles/755d090abb0a9a

表示条件のカスタマイズオプション

Prettify TypeScriptは、表示される型情報の量や形式をカスタマイズするためのオプションも備えています。
以下version 0.1.5に存在するオプションです。

• Type Indentation: 型のインデントレベルを制御します。
• Max Depth: 型の展開深さを設定し、深くネストされた型でも必要な範囲で展開可能です。
• Max Properties: 各型に表示されるプロパティの数を制限します。上限を超えると省略記号...が表示されます。
• Max Sub-Properties: ネストされたオブジェクトのプロパティごとに表示されるサブプロパティの数を制限します。
• Max Union Members: ユニオン型のメンバー数を制限し、上限を超えると省略記号...が表示されます。
• Unwrap Functions: 有効にすると、関数のパラメータや戻り値の型が展開され、関数型の内容をすぐに確認できます。
• Unwrap Arrays: 配列要素の型を展開する設定です。
• Unwrap Promises: Promiseの中身が展開されます。
• Hide Private Properties: プライベートプロパティやメソッドを非表示にする設定です。
• Skipped Type Names: 展開しない型名をリストで指定できます。
• Max Characters: 型情報の表示文字数の上限を設定し、長すぎる場合は省略されます。

Prettify TypeScriptの良いところと今後に期待な点

良いところ

• TypeScriptの複雑な型を展開してくれるので、型の把握が楽になります！
• 型エラーの原因が理解しやすくなり、エラー解消の効率が上がります

今後に期待

• 情報量が多すぎる場合がある
  • 大量の型情報が表示され、その中で必要な情報を探すのが大変な時があります。UIのアップデートに期待です。もしくは設定のカスタマイズで解決できるかもしれません。
• まだプレビュー版
  • プレビュー版のため、動作が不安定である場合や不具合が発生する可能性があります。
• （パフォーマンス）
  • 「動作が遅い」というレビューがあります。その後パフォーマンス改善が入っているようです。私の環境で使用している範囲では、気になるほどの遅延は感じませんでした。

まとめ

Prettify TypeScriptは、複雑なTypeScriptの型を展開して表示してくれるため、型の構造が把握しやすく、開発効率が上がりました！
特に、複雑な型の理解が必要な場面で役立つと思います！

TypeScriptの型に悩む方や複雑な型定義を多用するプロジェクトに携わる方にはおすすめです！