TypeScript モジュールのエクスポートについて
2024-10-02
TypeScriptにおけるエクスポートとデフォルトエクスポート
JavaScriptやTypeScript、ECMAScript 6において、モジュールシステムを利用してコードを分割し、再利用性を高めることができます。モジュールから他のモジュールにコードを公開する際には、**エクスポート（export）**という仕組みを使用します。
エクスポート（export）
- 通常のエクスポート
- 具体的な名前を付けてエクスポートします。
- インポートする際に同じ名前を使用します。
// moduleA.ts
export const pi = 3.14159;
export function greet(name: string) {
console.log(`Hello, ${name}!`);
}
// moduleB.ts
import { pi, greet } from './moduleA';
console.log(pi); // 3.14159
greet('Alice'); // Hello, Alice!
- デフォルトエクスポート
- モジュール内でデフォルトでエクスポートされる値や関数を指定します。
// moduleC.ts
export default function calculateArea(radius: number) {
return pi * radius * radius;
}
// moduleD.ts
import calculateArea from './moduleC';
console.log(calculateArea(2)); // 12.56636
どちらを使うべきか
- 複数のエンティティを提供するモジュールの場合、通常のエクスポートを使用して明確に名前を付けてエクスポートします。
- **単一の主要なエンティティ（値、関数）**を提供するモジュールの場合、デフォルトエクスポートが適しています。
TypeScript モジュールのエクスポートとは？
TypeScript で作成したモジュール（.ts ファイル）内の変数、関数、クラスなどを他のモジュールから利用できるように公開する仕組みです。この公開を エクスポート と呼びます。エクスポートには、通常のエクスポート と デフォルトエクスポート の2つの方法があります。
コード例解説
通常のエクスポート
// moduleA.ts
export const pi = 3.14159;
export function greet(name: string) {
console.log(`Hello, ${name}!`);
}
- 使い方
- 意味
moduleA.tsというモジュール内で、piという定数とgreetという関数をエクスポートしています。exportキーワードの後に、エクスポートしたい変数や関数を記述します。
// moduleB.ts
import { pi, greet } from './moduleA';
console.log(pi); // 3.14159
greet('Alice'); // Hello, Alice!
デフォルトエクスポート
// moduleC.ts
export default function calculateArea(radius: number) {
return pi * radius * radius;
}
- 意味
moduleC.tsというモジュール内で、calculateArea関数をデフォルトでエクスポートしています。- デフォルトエクスポートは、1つのモジュールにつき1つだけ指定できます。
// moduleD.ts
import calculateArea from './moduleC';
console.log(calculateArea(2)); // 12.56636
- デフォルトエクスポート
- 1つの主要なエンティティをエクスポートする場合
- インポートする際に任意の名前をつけたい場合
- 通常のエクスポート
- エクスポートするエンティティに明確な名前をつけたい場合
- デフォルトエクスポートは、シンプルで使いやすい一方で、複数のエンティティをエクスポートする場合には不向きです。
- 通常のエクスポート と デフォルトエクスポート の使い分けによって、コードの可読性や保守性を向上させることができます。
- エクスポート は、モジュール間のコードの共有を可能にする重要な機能です。
- TypeScript コンパイラ のオプションによって、出力される JavaScript のモジュール形式を指定できます。
- export = や
requireを用いた CommonJS スタイルのモジュール記述も可能です。 - TypeScript モジュール は、CommonJS や ES Modules などのモジュールシステムをサポートしています。
より詳しく知りたい場合は、以下のキーワードで検索してみてください。
- ES Modules
- CommonJS
- import
- default export
- export
- TypeScript モジュール
例
- "TypeScript でモジュールの依存関係を管理するにはどうすればいいですか？"
- "CommonJS と ES Modules の違いは何ですか？"
- "TypeScript で複数の関数をデフォルトエクスポートしたいのですが、どうすればいいですか？"
名前空間 (Namespace)
// moduleA.ts
namespace MyMath {
export const pi = 3.14159;
export function circleArea(radius: number) {
return pi * radius * radius;
}
}
// moduleB.ts
import * as MyMath from './moduleA';
console.log(MyMath.pi);
console.log(MyMath.circleArea(2));
- デメリット
- ES Modules との互換性が低い場合があります。
- ネストが深くなると、コードの可読性が低下する可能性があります。
- メリット
インデックスシグネチャ (Index Signature)
- 特徴
- オブジェクトに動的なプロパティを追加することができます。
- 配列のようなインデックスアクセスを可能にします。
// moduleA.ts
interface MyObject {
[key: string]: any;
}
const myObj: MyObject = {
name: 'Alice',
age: 30
};
export default myObj;
- デメリット
- 型の安全性に注意が必要です。
- 複雑なオブジェクト構造になると、コードの理解が難しくなることがあります。
- メリット
モジュールオーガナイゼーションパターン
src/
utils/
index.ts // Barrel file
math.ts
string.ts
// src/utils/index.ts
export * from './math';
export * from './string';
- デメリット
- メリット
- 大規模なプロジェクトでコードを整理しやすくなります。
- 再利用性の高いユーティリティ関数を集約できます。
どの方法を選ぶべきか？
- TypeScript のバージョン
新しいバージョンの TypeScript では、モジュールシステムが改善されている場合があります。 - チームの慣習
チーム内で共通のコーディング規約やパターンを確立することが重要です。 - コードの複雑さ
複雑なコード構造の場合、名前空間やモジュールオーガナイゼーションパターンが有効です。 - プロジェクトの規模
小規模なプロジェクトでは、シンプルなエクスポートとデフォルトエクスポートで十分な場合が多いです。
TypeScript のモジュールシステムは、柔軟性が高く、さまざまな方法でモジュールを構成することができます。どの方法を選ぶかは、プロジェクトの要件やチームの好みによって異なります。これらの方法を組み合わせることで、より効率的で保守性の高いコードを作成することができます。
重要なポイント
- 型安全性
TypeScript の強みである型システムを最大限に活用しましょう。 - 保守性
コードの変更や拡張が容易なように設計しましょう。 - 可読性
コードは、自分だけでなく、他の開発者も理解できるように書くことが大切です。
- TypeScript モジュールオーガナイゼーション
- TypeScript Barrel ファイル
- TypeScript インデックスシグネチャ
- TypeScript 名前空間
javascript typescript ecmascript-6
