VSCodeのホバー情報で省略されてしまうTypeScriptの型情報をたっぷり表示させたい

TypeScript初心者です

tl;dr

• プロジェクトのtsconfig.json の compilerOptionsの noErrorTruncation: true を設定しても省略されることがあった
• 上記に加え、VSCodeのインストール先のどこかにあるファイル extensions/node_modules/typescript/lib/tsserver.js の定数defaultMaximumTruncationLength を 160から1600 など長めに変更してTypeScript LanguageServerを再起動するとほぼすべて見えるようになった
• 変数の型を調べるのに便利な機能拡張もあるので紹介した

背景

型パズルで頑張って型をつけられると、どういう型なのかよくわからないという事象にぶつかります。
VSCodeでどのような型になっているかは調べられますが、省略されてしまうこともよくあり、途方に暮れることがあります

具体的な例を見てみましょう。

これはdynamodb-toolboxというライブラリで書いたスキーマっぽい何かです。DynamoDBのSDKを使ったことがある人はあの辛さはわかると思いますが、dynamodb-toolboxはその辛さの元になっているメンドクサイお作法を吸収して簡単に書けつつ各操作がそれなりに型安全に行える優れものです。例えばkey10: { type: 'string' } という定義があれば、DynamoDBにputする時やgetした時に得られるItemの型にkey10: stringがあることを補完してくれます。今回は使い方の話ではないのでここまでにします。

で、dynamodb-toolboxの型安全を支えているのが型パズルです。

ホバーに出ているのはある1つ変数の型情報です。最初の数文字読んだだけでもわけがわからないのに省略されてしまいもっと訳が分かりません。困りました。

せめて省略してなければ型定義と突き合せてもっと読めるのになぁ…という事で省略させない方法はないか調べました。

方法

調べると真っ先に出てくるのは、tsconfig.jsonでnoErrorTruncation: true にしなさいという情報が出てきますが、私の環境では改善はするものの不十分でした。

そこで、VSCodeの内部にあるファイル~/.vscode-server/bin/ハッシュ値っぽいもの/extensions/node_modules/typescript/lib/tsserver.js の defaultMaximumTruncationLength の定数を書き換えたところ満足できるぐらいに改善されました。

~/.vscode-server/bin/ハッシュ値/extensions/node_modules/typescript/lib/tsserver.js

- var defaultMaximumTruncationLength = 160;
+ var defaultMaximumTruncationLength = 1600;

これはissueを眺めてたら以下のコメントから知りました。

すごく微妙なやり方ですが、それなりに効果も大きかったです。

実際にどれだけなのか？

"noErrorTruncation": true, のみ

スクロールバーの大きさからも分かるように、これでもかなり増えますが、それでもまだ省略されています。

tsserver.jsのdefaultMaximumTruncationLengthを書き換える のみ

こちらはさらに細かく出ますが、それでも省略されています。

上記2つ両方

さっき省略されていたところも見えるようになりました。

ちなみに設定の反映はTypeScript Language Serverの再起動で反映できます。

おまけ: 変数の型情報の表示に使えそうな拡張機能

これは型引数は得られなかったので私のニーズにはあってなかったのですが、非常に便利だったので紹介させてください。

上記のGitHubのissueの中で紹介されていますが、kimusonさんが作られたこの機能拡張も便利です。

併せて作者の記事もご覧ください。

試しに機能拡張を上記のスクリーンショットに映っている変数 _UserEntityに対して使うと、こんな感じでわかります。
型パズルで作られた型だと厳しそうな様子ですが、それでもVSCodeの初期状態と比べたらかなり細かく取れます。

まだ省略がありますが、1個1個プロパティを追いながら深堀できる分そんなに問題ではなかったりします。

また、記事中で書かれている再帰的に取り出すExpandの型実装について触れられています。
これでもある程度深堀ができますが一々書かないといけないので大変ですね。