TypeScriptでモジュールを効率的にインポート：個別インポートと名前空間インポートの使い分け
TypeScriptにおける import と import {...} の違い
import には2つの構文があります。
- 個別インポート: 特定の名前の変数、関数、クラスを個別にインポートします。
import { 〇〇, △△, □□ } from 'モジュールパス'; - 名前空間インポート: モジュール全体を名前空間にインポートし、そのモジュール内の要素をドット記法で参照します。
import * as モジュール名 from 'モジュールパス';
個別インポート と 名前空間インポート の主な違いは以下の通りです。
可読性
- 名前空間インポート: モジュール全体をインポートするため、コードが冗長になり、何がインポートされているのか分かりにくくなる可能性があります。
- 個別インポート: 使用する要素のみをインポートするため、コードがより読みやすくなり、意図が明確になります。
メンテナンス性
- 名前空間インポート: モジュールが変更された場合、影響を受ける箇所が分かりにくく、変更箇所を見つけるのに時間がかかる可能性があります。
- 個別インポート: モジュールが変更された場合、影響を受ける箇所が明確で、変更箇所を追跡しやすくなります。
ネームスペースの衝突
- 名前空間インポート: 異なるモジュールで同じ名前の要素をエクスポートしている場合、どちらか一方しかインポートできず、名前の衝突が発生する可能性があります。
- 個別インポート: 異なるモジュールで同じ名前の要素をエクスポートしていても、それぞれ個別インポートすることで衝突を回避できます。
// モジュール math.ts を作成し、以下の内容を記述します。
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
// モジュール index.ts を作成し、以下の内容を記述します。
import { add, subtract } from './math';
const sum = add(10, 20);
console.log(sum); // 30
const difference = subtract(20, 10);
console.log(difference); // 10
名前空間インポート
// モジュール math.ts を作成し、以下の内容を記述します。
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
// モジュール index.ts を作成し、以下の内容を記述します。
import * as math from './math';
const sum = math.add(10, 20);
console.log(sum); // 30
const difference = math.subtract(20, 10);
console.log(difference); // 10
説明
上記の例では、math という名前のモジュールを作成し、add と subtract という2つの関数をエクスポートします。
- 名前空間インポートの場合、
mathモジュール全体をインポートし、そのモジュール内の要素をmath.接頭辞を使用して参照します。 - 個別インポートの場合、
addとsubtract関数のみをmathモジュールからインポートします。
この例からも分かるように、個別インポートの方がコードが簡潔で読みやすく、メンテナンス性も高くなります。
- デフォルトエクスポートのインポート
// モジュール math.ts を作成し、以下の内容を記述します。
export default function add(a: number, b: number): number {
return a + b;
}
// モジュール index.ts を作成し、以下の内容を記述します。
import add from './math';
const sum = add(10, 20);
console.log(sum); // 30
- エイリアスの使用
// モジュール math.ts を作成し、以下の内容を記述します。
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
// モジュール index.ts を作成し、以下の内容を記述します。
import { add as myAdd, subtract as mySubtract } from './math';
const sum = myAdd(10, 20);
console.log(sum); // 30
const difference = mySubtract(20, 10);
console.log(difference); // 10
import() 関数を使用して、非同期にモジュールをインポートできます。 これにより、必要なモジュールのみをロードし、アプリケーションのパフォーマンスを向上させることができます。
const loadModule = async () => {
const { default: module } = await import('./myModule');
console.log(module);
};
loadModule();
型のみのインポート
import type キーワードを使用して、型情報のみをインポートできます。 これにより、コンパイラが型チェックを行い、潜在的なエラーを検出することができますが、実際に実行時にモジュールがロードされるわけではありません。
import type { MyInterface } from './myModule';
function processData(data: MyInterface) {
// ...
}
CommonJS の互換性
require() 関数を使用して、CommonJS 互換のモジュールをインポートできます。 これは、Node.js などのサーバーサイド環境でTypeScriptを使用する場合に役立ちます。
const module = require('./myModule');
console.log(module);
AMD の互換性
define() 関数を使用して、AMD 互換のモジュールをインポートできます。 これは、RequireJS などのモジュールローダーを使用する場合に役立ちます。
define(['./myModule'], function (module) {
console.log(module);
});
URL のインポート
import() 関数を使用して、URL から JavaScript または TypeScript モジュールを直接インポートできます。 これにより、外部ライブラリや CDN からコードを簡単に読み込むことができます。
import('./path/to/myModule.js');
これらの方法は、それぞれ異なるユースケースに適しています。状況に応じて適切な方法を選択することが重要です。
typescript import
