Mobile Factory Tech Blog

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

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

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

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

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<`確認したい型`>

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

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

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

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

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

拡張機能で確認する

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

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

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