紹介すること
Visual Studio Codeなどで、変数にカーソルを合わせると、以下のように型情報が表示されます。
このとき、Sampleという型名のままではなく、型の中身を直接表示させたほうが参照が楽です。
例えば、次のように中身が表示されると便利です。
この記事では、型情報を表示されるようにするテクニックをBefore/Afterの順で紹介します。
はじめに型情報の行数を増やす
まず、型情報を省略せずに表示できるように設定を変更します。
デフォルトの設定では、型情報が長い場合、以下のように省略されてしまいます。
tsconfig.jsonの設定で、"noErrorTruncation": true,を追加することで、省略されずに表示できる行数が160行まで拡張されます。
160行以上の型情報を確認したい場合は、以下の記事が参考になります。
単純なリテラル型
Before
type Greeting = "おはよう" | "こんにちは" | "こんばんは";
After
type Greeting = ['おはよう', 'こんにちは', 'こんばんは'][number];
単純なリテラル型のユニオン型
上記の「単純なリテラル型」をユニオン型にすることもできます。
Before
type Greeting = 'おはよう' | 'こんにちは' | 'こんばんは';
type Question = '何を作りますか？' | '何を食べますか？';
export type Title = Greeting | Question;
After
type Greeting = ['おはよう', 'こんにちは', 'こんばんは'][number];
type Question = ['何を作りますか？', '何を食べますか？'][number];
export type Title = Greeting | Question;
オブジェクトのリテラル型のユニオン型
Before
type TitleGroup =
| {
title: 'こんにちは';
cancelText: 'キャンセル';
}
| {
title: 'おはよう';
cancelText: 'キャンセル';
}
| {
title: 'さようなら';
cancelText: 'キャンセル';
};
After
const titleGroupArray = [
{
title: 'こんにちは',
cancelText: 'キャンセル',
},
{
title: 'おはよう',
cancelText: 'キャンセル',
},
{
title: 'さようなら',
cancelText: 'キャンセル',
},
] as const;
export type TitleGroup = typeof titleGroupArray[number];
インターセクション型
以下のユーティリティ型を使用すると、型の詳細を展開して確認できます。
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
以下のような型定義のインターセクション型を紹介します。
export type FirstProps = {
sample1: string;
};
export type SecondProps = {
sample2: string;
};
Before
type Props = FirstProps & SecondProps;
After
type Props = Expand<FirstProps & SecondProps>;
最後に
型情報をホバー表示で確認できるようにすることで、型情報を追いやすくなり生産性アップすると思います。
ぜひプロジェクトに取り入れてみてください♫
Discussion