【TypeScript】管理見直し(外部モジュール化)

再利用できる型設定は、外部モジュール化する方が管理しやすい。

外部モジュール化のサンプル

「ts/Hoge/index.tsx」にモジュール化する型設定を用意する。
モジュール化するには頭にexportを付ける。

export interface HogeGroup { 
  hoge: string;
}

「index.tsx」から、モジュール化した型設定をimportして呼び出す。

import { HogeGroup } from './ts/Hoge/'

その他メモ

入れ子で型を設定することも可能。

export interface HogeGroup {
  hoge: string;
  mochi: HogeMochi;
}

interface HogeMochi {
  name: string;
  price: number;
}

HogeMochiのキーの頭に「debu_」を付けてリネームしたモジュールHogeMochiDebuを用意するなら以下のように。
※ただしPのところに型エラーが出る。

type HogeMochiDebuKey<Key> = { [P in keyof Key as `debu_${P}`]: Key[P] }

export type HogeMochiDebu = HogeMochiDebuKey<HogeMochi>;

ここからさらに「weight」というキーを混ぜ込み、モジュールHogeMochiTabesugiを使えるようにするなら以下のように。

interface HogeMochiWeight {
  weight: any;
}

export interface HogeMochiTabesugi extends HogeMochiDebu, HogeMochiWeight {}

// typeだと以下の記述
/*
export type HogeMochiTabesugi = HogeMochiDebu & HogeMochiWeight;
*/

サンプルテキストが機能していない。お腹が減っているようでござる(´ -ω- ｀)