TypeScriptのindex.ts(バレル)について！使い方などを詳しく解説！

この記事ではTypeScriptのi『index.ts(バレル)』について、

• TypeScriptのindex.ts(バレル)とは
• index.ts(バレル)の使い方

などをサンプルコードをを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

TypeScriptのindex.ts(バレル)とは

index.ts(バレル)は、特定のディレクトリから複数のモジュールを1つの場所から再エクスポートする方法です。

index.ts(バレル)を用いることで、1つのファイルから必要なモジュールをインポートすることができます。これにより、インポート文が減り、コードが整理されます。また、特定のディレクトリが公開しているモジュールをindex.ts(バレル)で管理できるため、大規模なアプリケーションの構造が整理され、メンテナンスが容易になります。

では、次にindex.ts(バレル)の使い方をサンプルコードを用いて説明します。

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

これから説明するサンプルコードでは、demoディレクトリ内にある3つのモジュール(foo.ts、bar.ts、baz.ts)がそれぞれ異なるクラス(Foo, Bar, Baz)を実装しており、これのモジュールをindex.ts(バレル)で再エクスポートしています。また、main.tsではindex.ts(バレル)からこれらのモジュールをインポートしています。

まず、ディレクトリ構成を以下に示します。

Test           //プロジェクトのルートディレクトリ
├─main.ts      //index.ts(バレル)からモジュールをインポートする
└─demo                           
  ├─index.ts   // foo.ts, bar.ts, baz.tsをインポートする                   
  ├─foo.ts
  ├─bar.ts
  └─baz.ts

demoディレクトリ内にある3つのモジュール(foo.ts、bar.ts、baz.ts)の内容を以下に示します。

// foo.ts
export class Foo {
  foo: string;
  constructor(foo: string) {
    this.foo = foo;
  }
}

// bar.ts
export class Bar {
  bar: string;
  constructor(bar: string) {
    this.bar = bar;
  }
}

// baz.ts
export class Baz {
  baz: string;
  constructor(baz: string) {
    this.baz = baz;
  }
}

index.ts(バレル)では、エクスポートしたいファイルを*(ワイルドカード)を使用して再エクスポートします。以下のプログラムでは、index.ts(バレル)と同じディレクトリ内のfoo.ts、bar.ts、baz.tsを再エクスポートしています。これにより、外部のファイルからはindex.ts(バレル)を用いて、インポートすることができるようになります。

export * from './foo';
export * from './bar';
export * from './baz';

main.tsでは、index.ts(バレル)からFoo、Bar、Bazクラスをインポートし、それぞれのインスタンスを生成しています。

import { Foo, Bar, Baz } from './demo'; // index.ts(バレル)からインポートしている

const fooInstance = new Foo('test01');
const barInstance = new Bar('test02');
const bazInstance = new Baz('test03');

console.log(fooInstance.foo); // test01
console.log(barInstance.bar); // test02
console.log(bazInstance.baz); // test03

import { Foo, Bar, Baz } from './demo';
import { Foo, Bar, Baz } from './demo/index'; // indexを省略できる

import { Foo } from './demo/foo';
import { Bar } from './demo/bar';
import { Baz } from './demo/baz';

本記事のまとめ

この記事ではTypeScriptのi『index.ts(バレル)』について、以下の内容を説明しました。

• TypeScriptのindex.ts(バレル)とは
• index.ts(バレル)の使い方

お読み頂きありがとうございました。