【TypeScript】index.ts(バレル)の使い方

概要

TypeScript利用時に毎回ファイル単位でimportするのは面倒ですね。 そういう場合、index.tsに対象ディレクトリのファイルをまとめて export しておくと便利です。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載することで利用できます。

basarat.gitbooks.io

サンプルソース

dir/index.ts

export * from './hoge'; // export class Hoge
export * from './hige'; // export class Hige
export * from './hage'; // export class Hage

呼び出し側

import { Hoge, Hige, Hage } from './dir';

おわりに

• ディレクトリ単位でまとめられるので、import文が整理されて便利になります。各種ライブラリでも導入されている内容です。
• publicにしたいものをまとめておくと便利です。
• 開発規模が大きくなったり、ライブラリ管理したい場合に使えます。
• index.ts が長くなる場合、TSLintを使用していると警告が出ます。基本的には定義ファイルと同じイメージなので /* tslint:disable */ を先頭行にしてTSLintを除外して使用しています。