TypeScriptモジュールのインポート
TypeScriptでJavaScriptモジュールをインポートする方法
TypeScriptでは、JavaScriptモジュールをインポートして利用することができます。これにより、コードのモジュール化と再利用性が高まります。
モジュールシステムの選択
TypeScriptは、さまざまなモジュールシステムをサポートしています。最も一般的なものには以下があります。
- SystemJS
ブラウザ環境でのモジュールローディングをサポートするシステム。 - ES Modules (ESM)
ECMAScript 2015以降で導入された標準のモジュールシステム。 - CommonJS
Node.jsなどで広く使われているモジュールシステム。
インポート構文
インポート構文は、モジュールシステムによって異なりますが、基本的には以下のような形式になります。
CommonJS
import { moduleName } from 'module-path';
ES Modules
import { moduleName } from './module-path'; // 相対パス
import { moduleName } from 'module-path'; // 絶対パスまたは相対パス
SystemJS
System.import('module-path').then(function(module) {
// モジュールを使用
});
Protractorでのインポート
Protractorでは、主にCommonJS形式が使用されます。例えば、Protractorの組み込みモジュールである browser をインポートするには、以下のようにします。
import { browser } from 'protractor';
カスタムモジュールの作成
カスタムモジュールを作成するには、TypeScriptファイルを作成し、エクスポートしたい関数を定義します。例えば、utils.ts というファイルを作成し、以下のように関数 sum をエクスポートします。
export function sum(a: number, b: number): number {
return a + b;
}
このモジュールをインポートするには、以下のようにします。
import { sum } from './utils';
TypeScriptコンパイラの設定
TypeScriptファイルをコンパイルする際に、モジュールシステムを指定する必要があります。例えば、CommonJS形式を使用する場合には、tsconfig.json ファイルに以下のように設定します。
{
"compilerOptions": {
"module": "commonjs"
}
}
CommonJSモジュールのインポート
// utils.js
function sum(a, b) {
return a + b;
}
export { sum };
// main.ts
import { sum } from './utils';
console.log(sum(2, 3)); // Output: 5
ES Modulesモジュールのインポート
// utils.ts
export function sum(a: number, b: number): number {
return a + b;
}
// main.ts
import { sum } from './utils';
console.log(sum(2, 3)); // Output: 5
SystemJSモジュールのインポート
// utils.js
export function sum(a, b) {
return a + b;
}
// main.ts
System.import('./utils').then(function(module) {
console.log(module.sum(2, 3)); // Output: 5
});
// protractor.conf.js
exports.config = {
// ...
framework: 'jasmine',
specs: ['spec.js']
};
// spec.js
import { browser } from 'protractor';
describe('Example', () => {
it('should open a website', () => {
browser.get('https://example.com');
});
});
カスタムモジュールの作成とインポート
// utils.ts
export function greet(name: string): string {
return `Hello, ${name}!`;
}
// main.ts
import { greet } from './utils';
console.log(greet('Alice')); // Output: Hello, Alice!
Dynamic Import
TypeScriptでは、動的なモジュールインポートがサポートされています。これにより、モジュールをオンデマンドで読み込むことができ、アプリケーションの初期ロード時間を改善することができます。
import('module-path').then(module => {
// モジュールを使用
});
TypeScriptコンパイラの設定を変更することで、モジュールシステムやインポート構文をカスタマイズすることができます。例えば、tsconfig.json ファイルに以下のように設定することで、ES Modulesを使用することができます。
{
"compilerOptions": {
"module": "esnext"
}
}
WebpackやRollupなどのバンドラーの使用
WebpackやRollupなどのバンドラーを使用することで、複数のモジュールを1つのファイルにバンドルすることができます。これにより、ネットワークリクエストの数を減らし、アプリケーションのロード時間を改善することができます。
TypeScriptのパスマッピング
TypeScriptのパスマッピングを使用することで、モジュールのパスをエイリアスすることができます。これにより、モジュールのパスをより簡潔に書くことができます。
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@components/*": ["src/components/*"]
}
}
}
TypeScriptのネームスペース
TypeScriptのネームスペースを使用することで、モジュールを名前空間でグループ化することができます。これにより、モジュールの名前が衝突するのを防ぐことができます。
namespace MyNamespace {
export function greet(name: string): string {
return `Hello, ${name}!`;
}
}
// インポート
import { MyNamespace } from './my-namespace';
javascript typescript protractor
