Mobile Factory Tech Blog

技術好きな方へ!モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします!

VSCode で TypeScript の交差型のプロパティを省略せずに見れるようにする

VSCode でホバーして型情報を見ようとすると、交差型はプロパティが展開されません

f:id:d-kimuson:20211117163534p:plain

プロパティの型を展開する

Mapped Types を通すことで省略せずにプロパティを見ることができます。プロパティが交差型になっていることもあるので、再帰的にプロパティを Mapped Types に通すような型を定義しておいて、通すことでプロパティを全て確認できます

type Expand<T> = T extends object
  ? T extends infer O
    ? { [K in keyof O]: Expand<O[K]> }
    : never
  : T
type Temp = Expand<`確認したい型`>

f:id:d-kimuson:20211117165902p:plain

厳密でなくとも簡単にどんなプロパティがあるか把握したいだけなら組み込みの Required や Partial を使うのが手軽です。ただし、あくまでデバッグ用途でそれぞれ省略可能プロパティになる/でなくなるので注意が必要です

f:id:d-kimuson:20211117165927p:plain

プロパティが多い時に省略しない

これで展開した型が見られるようになりましたが、展開した型を表示するとプロパティの数が多い時に省略されてしまいます

f:id:d-kimuson:20211117163854p:plain

noErrorTruncation オプションを有効にすることでプロパティ数が多いときでも全ての型情報を確認できます

// tsconfig.json
{
  compilerOptions: {
+   "noErrorTruncation": true,
  }
}

f:id:d-kimuson:20211117163949p:plain

拡張機能で確認する

一度型変数に置くのがめんどくさければ、展開された型を表示できる VSCode 拡張機能を作ったので、これを使うことで手軽に確認することができます

ts-type-expand - Visual Studio Marketplace からインストールできます

f:id:d-kimuson:20211117170746p:plain

画像のように、VSCode の UI 上から展開されたプロパティを確認することができます