TypeScriptにおけるモジュール
この記事ではTypeScriptにおけるモジュールについて説明します。
YouTube Video
TypeScriptにおけるモジュール
TypeScriptにおけるモジュールは、コードの再利用性、保守性を向上させるための重要な機能です。JavaScriptと同様に、TypeScriptもECMAScript 2015（ES6）のモジュールシステムに基づいていますが、TypeScriptの型システムを活用できる点が大きな特徴です。
モジュールとは？
モジュールとは、関連するコードをひとつの単位にまとめ、他のファイルからインポートして再利用できる仕組みです。TypeScriptでは、ファイルごとにスコープが作成され、他のファイルに影響を与えないようにコードがカプセル化されます。これにより、コードの衝突を避け、保守しやすくなります。
内部モジュールと外部モジュール
- 内部モジュール（命名空間）: TypeScript 1.5以前に使われていたモジュールの定義方法で、現在は推奨されていません。現在は「名前空間（namespace）」として扱われています。
- 外部モジュール: 現在の標準であり、ES6モジュールシステムに基づいています。ここでは主に外部モジュールについて解説します。
モジュールのエクスポート方法
モジュールを作成する際に、外部からアクセスできるようにするためにエクスポートが必要です。TypeScriptでは、exportキーワードを使って値や関数、クラスなどをエクスポートできます。主に次の2つのエクスポート方法があります。
名前付きエクスポート
複数のエクスポートを行う場合に使用され、インポート側で特定のものだけを選んで使用することができます。
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}デフォルトエクスポート
モジュール全体で一つのデフォルトのエクスポートを持たせたい場合に使用します。デフォルトエクスポートは名前を付けずにエクスポートされるため、インポート側では任意の名前で受け取れます。
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}モジュールのインポート方法
モジュールを利用する際は、importキーワードを使ってモジュール内の値や関数、クラスなどをインポートします。
名前付きインポート
名前付きエクスポートから特定の要素をインポートする場合は、波括弧 {} を使います。
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);デフォルトインポート
デフォルトエクスポートをインポートする場合は、任意の名前で受け取ります。
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);インポートのエイリアス
名前の衝突を避けたり、長い名前を短くしたい場合には、エイリアス（別名）を付けてインポートできます。
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);モジュールと名前空間の違い
名前空間（namespace）は、TypeScriptの初期に使われていた内部モジュールの構造で、コードをグループ化するための方法です。しかし、現在ではES6モジュールが推奨されており、名前空間はほとんどの場合必要ありません。
名前空間は同一ファイル内や複数ファイルで定義でき、グローバルに展開されるため、依存関係の管理が難しくなることがあります。対照的にモジュールは、ファイルごとにスコープが分かれ、依存関係が明確であるため、よりモダンで安全な方法です。
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);TypeScriptのモジュール解決
TypeScriptでは、モジュールの解決方法として2つの戦略を持っています。
- Nodeモジュール解決: Node.js環境で使われる標準の解決方法で、
node_modulesフォルダ内を探索してモジュールを解決します。 - Classicモジュール解決: TypeScript独自の解決方法で、より柔軟な探索を行いますが、現在ではあまり使われていません。
通常、Nodeモジュール解決が使用され、設定ファイルで指定しない限り、この方法がデフォルトで有効になります。
実践例
最後に、実際にモジュールを使って計算機能を実装し、再利用する例を示します。
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}- このファイルは数学的なユーティリティ関数を定義し、再利用可能な基本的な数値演算関数を提供します。
calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}- このファイルでは
Calculatorクラスを定義し、エクスポートしています。mathUtilsからインポートした関数を内部で使って計算機機能をカプセル化しています。
main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);- このファイルはアプリケーションのエントリーポイントです。Calculator クラスのインスタンスを作成し、掛け算と割り算を実行してコンソールに出力します。
まとめ
TypeScriptのモジュールシステムは、コードを整理しやすく、再利用性や保守性を高めるための強力なツールです。ES6モジュールに基づいた外部モジュールの利用が推奨されており、exportやimportキーワードを用いることで、モジュールのエクスポートとインポートが簡単に行えます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。