【TypeScript】index.tsを配置して型ファイルを整理

TypeScriptを使っていて、型定義ファイルの扱いをどのような構成にするか悩む場面があるかと思います。

今回は、そのような場面で役立つindex.ts(バレル)を使用した整理方法を説明します。

ディレクトリ構成の参考
export
1. index.ts
2. 型定義ファイル
  1. ICompany.ts
  2. IUser.ts
import
補足ポイント
1. 同名の型定義が存在する場合、エラーになる
まとめ

ディレクトリ構成の参考

まずは、ディレクトリ構成に関して簡単に記載します。

structures配下に、index.ts及び2つの型定義ファイルを配置しています。

- structures ...型定義ファイルを配置するディレクトリ
  - index.ts ... 一括exportを行うファイル
  - ICompany.ts ... 型定義ファイル1
  - IUser.ts ... 型定義ファイル2

export

export側から順を追って説明します。

index.ts

exportしたい定義ファイルを、*(ワイルドカード)を使用してexportします。
このようにすることで、定義ファイルでexportされている全ての型をexportすることができます。

export * from './ICompany';
export * from './IUser';

型定義ファイル

あくまでも参考ですが、以下2ファイルを例として記載します。

ICompany.ts

// ICompany.ts

export interface ICompany {
  id: number;
  no: number;
  name: string;
}

IUser.ts

// IUser.ts

interface IUserTeam {
  id: number;
  no: number;
  name: string;
}

export interface IUser {
  id: number;
  no: number;
  name: string;
  team: IUserTeam;
}

import

structuresをimportするだけで、2つのファイルの型定義を使用できます。
各ファイル毎にimportする必要がなくなるので、型定義のファイル数が増えるほど便利になりますね。

import { IUser, ICompany } from '~/structures';

なお、当然のことではありますがexportされていないIUserTeamはimportできません。

補足ポイント

同名の型定義が存在する場合、エラーになる

先程のIUser.tsに、ICompanyを定義します。

// IUser.ts

interface IUserTeam {
  id: number;
  no: number;
  name: string;
}

export interface IUser {
  id: number;
  no: number;
  name: string;
  team: IUserTeam;
}

/** 追加 */
export interface ICompany {
  id: number;
  no: number;
  name: string;
}

以下のように、既にICompanyがexportされている旨のエラーが表示されます。
エラーが表示されるのですぐに気付くことはできますが、同名の定義を作成しないように注意する必要があります。