TypeScript モジュールの作成と使用方法
TypeScript モジュールは、コードを整理および管理するための構造化されたアプローチを提供します。モジュールを使用すると、コードを個別のファイルにカプセル化できるため、保守性、再利用性、テスト可能性が向上します。このガイドでは、TypeScript モジュールの作成と使用のプロセスについて説明します。
TypeScript モジュールとは何ですか?
TypeScript モジュールは、クラス、関数、変数などのコード要素をエクスポートおよびインポートする個別のファイルです。モジュールを使用すると、コードを管理しやすい部分に分割できるため、コードのさまざまな部分間の相互作用をより適切に制御できます。
TypeScript モジュールの作成
TypeScript モジュールを作成するには、次の手順に従う必要があります。
- TypeScript ファイルを作成します: まず、モジュールの新しい `.ts` ファイル (`mathUtils.ts` など) を作成します。
- コードの定義とエクスポート: このファイル内に関数、クラス、または変数を実装し、
exportキーワードを使用して他のモジュールで使用できるようにします。
シンプルなモジュールの例:
// mathUtils.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}この例では、`add` 関数と `subtract` 関数が定義され、`mathUtils.ts` モジュールからエクスポートされます。
TypeScript モジュールのインポートと使用
TypeScript モジュールのコードを別のファイルで使用するには、それをインポートする必要があります。これには次の作業が含まれます。
- 新しい TypeScript ファイルを作成します: `app.ts` など、モジュールのコードが使用されるファイルを生成します。
- モジュールをインポートします: モジュールから関数、クラス、または変数を取り込むには、
importキーワードを使用します。
`add` 関数と `subtract` 関数をインポートして使用する例:
// app.ts
import { add, subtract } from './mathUtils';
const sum = add(5, 3);
const difference = subtract(5, 3);
console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);この例では、`add` 関数と `subtract` 関数が `mathUtils` モジュールからインポートされ、`app.ts` ファイル内で使用されます。
デフォルトおよび名前付きエクスポート
TypeScript モジュールは、デフォルトエクスポートと名前付きエクスポートの両方をサポートしています。以下に簡単な概要を示します。
- デフォルトのエクスポート:
export defaultを使用して、モジュールから単一の値をデフォルトのエクスポートとしてエクスポートできます。 - 名前付きエクスポート:
exportキーワードを使用した名前付きエクスポートを使用して、モジュールから複数の値をエクスポートできます。
両方のタイプのエクスポートを示す例:
// shapes.ts
export default class Circle {
constructor(public radius: number) {}
area(): number {
return Math.PI * this.radius ** 2;
}
}
export function getCircleInfo(radius: number): string {
const circle = new Circle(radius);
return `A circle with radius ${radius} has an area of ${circle.area()}`;
}この例では、`Circle` はデフォルトのエクスポートとしてエクスポートされ、`getCircleInfo` は名前付きエクスポートとしてエクスポートされます。
プロジェクト内のモジュールの整理
多数のモジュールを含む大規模なプロジェクトでは、整理が重要になります。次のヒントを考慮してください。
- ディレクトリ構造: 関連するモジュールを `models/`、`services/`、`utils/` などのディレクトリにグループ化します。
- インデックス ファイル: ディレクトリ内の `index.ts` ファイルを使用してモジュールを集約および再エクスポートし、プロジェクト全体のインポートを簡素化します。
ディレクトリ構造の例:
project/
│
├── src/
│ ├── models/
│ │ ├── index.ts
│ │ └── user.ts
│ └── app.ts結論
TypeScript モジュールは、コードを整理および管理するための重要な機能です。モジュールを作成して使用することで、コードをモジュール化、保守、拡張可能に維持できます。コードのエクスポートとインポートの方法や、プロジェクトの構成方法を理解することで、TypeScript 開発の効率が向上します。