TypeScript モジュールのインポート
TypeScript では、ディレクトリ内のすべてのモジュールを一括でインポートすることは直接できません。しかし、インデックスファイル を利用することで、この問題を解決できます。
インデックスファイルとは
インデックスファイルは、特定のディレクトリ内の複数のモジュールを再エクスポートするためのファイルです。通常、index.ts という名前で作成されます。
-
ディレクトリの構造
src/ components/ Button.tsx Input.tsx index.ts -
インデックスファイル (
src/components/index.ts)export * from './Button'; export * from './Input';
インデックスファイルを作成したら、そのディレクトリを直接インポートできます。
import * as Components from './components';
// 使用例
<Components.Button />
<Components.Input />
利点
- モジュール名の衝突の回避
インデックスファイルで適切な名前を指定することで、モジュール名の衝突を回避できます。 - モジュールの追加/削除が容易
インデックスファイルに新しいモジュールを追加するだけで、他のファイルへの変更は必要ありません。 - 簡潔なインポート
インポートの記述が簡潔になります。
注意点
- インデックスファイルは、そのディレクトリ内のすべてのモジュールを再エクスポートします。
- インデックスファイルはディレクトリごとに1つのみ作成できます。
単一モジュールのインポート
index.ts
export function greet(name: string): string {
return `Hello, ${name}!`;
}
main.ts
import { greet } from './index';
console.log(greet('world')); // Output: Hello, world!
ディレクトリ内の全モジュールのインポート (インデックスファイルを利用)
src/
components/
Button.tsx
Input.tsx
index.ts
index.ts
src/components/Button.tsx
export const Button = () => {
return <button>Click me</button>;
};
export const Input = () => {
return <input type="text" />;
};
src/components/index.ts (インデックスファイル)
export * from './Button';
export * from './Input';
src/index.ts (メインファイル)
import * as Components from './components`typescript
const modulePath = './myModule';
async function loadModule() {
const module = await import(modulePath);
module.doSomething();
}
モジュールインポートの基本概念
export構文export const variable = ...;: 変数をエクスポートexport function functionName() { ... };: 関数をエクスポートexport default class MyClass { ... };: デフォルトエクスポートするクラス
import構文import { identifier } from 'module-path';: 特定のエクスポートをインポートimport * as namespace from 'module-path';: モジュール全体を名前空間としてインポート
重要なポイント
- 相対パスと絶対パス
- 相対パス (
./や../) を使用してモジュールをインポートする。 - 絶対パス (
/path/to/module) を使用することも可能だが、適切な構成が必要。
- 相対パス (
- モジュール解決
- TypeScript コンパイル
import * as Components from './components';
この方法では、指定したディレクトリ内のすべてのエクスポートを Components という名前空間にインポートします。これにより、個々のモジュールをインポートするよりも簡潔な記述が可能になります。
Dynamic Import
const modulePath = './myModule';
async function loadModule() {
const module = await import(modulePath);
module.doSomething();
}
Dynamic Import を使用すると、モジュールを動的に読み込むことができます。これは、コードの分割や遅延読み込みに有用です。
TypeScript Configuration
TypeScript の tsconfig.json ファイルで baseUrl と paths プロパティを設定することで、モジュールの解決方法をカスタマイズできます。これにより、複雑なモジュール構造を管理しやすくなります。
注意
- TypeScript Configuration の設定は慎重に行う必要があります。誤った設定はビルドエラーや実行時エラーの原因となります。
- Dynamic Import は非同期操作であるため、適切なエラー処理が必要です。
- Wildcards を使用する場合、名前空間の衝突に注意が必要です。
最適な方法の選択
最適な方法は、プロジェクトの規模、構造、およびパフォーマンス要件によって異なります。一般的には、インデックスファイルを使用する方法が最もシンプルかつ一般的なアプローチです。しかし、特定の状況では、WildcardsやDynamic Importがより適している場合があります。
typescript
