上級者向け：TypeScript モジュールの奥深さを探る - export と default export の詳細解説
2024-07-27
TypeScript の export と default export の違い
- export: モジュールから他のモジュールへ変数、関数、クラスなどを公開するために使用します。
- default export: モジュールからデフォルトでエクスポートする値を指定するために使用します。
使用方法
export:
export function add(a: number, b: number): number {
return a + b;
}
export const message = "Hello, world!";
// 複数行にわたる場合
export class Person {
constructor(public name: string, public age: number) {}
}
default export:
export default function multiply(a: number, b: number): number {
return a * b;
}
// オブジェクトやクラスもデフォルトエクスポートできる
export default class Animal {
constructor(public name: string) {}
}
インポート
import { add, message } from "./my-module";
const result = add(1, 2);
console.log(message);
// 別名でインポートすることも可能
import { add as sum, message } from "./my-module";
import MyModule from "./my-module";
const result = MyModule(1, 2);
// 別名でインポートすることも可能
import MyModule, { add as sum } from "./my-module";
使い分け
- export: 複数の値を個別にエクスポートしたい場合に適しています。
- default export: 1つの主要な値をエクスポートしたい場合に適しています。
- モジュールから複数のデフォルトエクスポートすることはできません。
- TypeScript 3.8 以降では、
export defaultの代わりにexport =を使用することができます。
- export と default export は、モジュールから他のモジュールへ値を公開するために使用します。
- それぞれ異なる使用方法とインポート方法があり、使い分けることが重要です。
- TypeScript は進化し続けているため、最新の情報を確認することが重要です。
// my-module.ts
export function add(a: number, b: number): number {
return a + b;
}
export const message = "Hello, world!";
// 複数行にわたる場合
export class Person {
constructor(public name: string, public age: number) {}
}
// my-module.ts
export default function multiply(a: number, b: number): number {
return a * b;
}
// オブジェクトやクラスもデフォルトエクスポートできる
export default class Animal {
constructor(public name: string) {}
}
// index.ts
// export の場合
import { add, message } from "./my-module";
const result = add(1, 2);
console.log(message);
// 別名でインポートすることも可能
import { add as sum, message } from "./my-module";
// default export の場合
import MyModule from "./my-module";
const result = MyModule(1, 2);
// 別名でインポートすることも可能
import MyModule, { add as sum } from "./my-module";
実行
上記のコードをファイルに保存し、以下のコマンドを実行してコンパイルと実行ができます。
tsc index.ts
node index.js
出力結果
3
Hello, world!
TypeScript でモジュールを公開する他の方法
CommonJS
CommonJS は、JavaScript でモジュールを扱うための従来の方法です。require() と module.exports を使用してモジュールをインポートとエクスポートします。
例:
// my-module.js
function add(a, b) {
return a + b;
}
module.exports = add;
// index.js
const add = require("./my-module");
const result = add(1, 2);
console.log(result);
AMD
AMD (Asynchronous Module Definition) は、JavaScript で非同期モジュールを扱うための方法です。define() と require() を使用してモジュールをインポートとエクスポートします。
// my-module.js
define(["require"], function(require) {
function add(a, b) {
return a + b;
}
return add;
});
// index.js
define(["require", "./my-module"], function(require, add) {
const result = add(1, 2);
console.log(result);
});
ES Modules
ES Modules は、JavaScript の標準的なモジュールシステムです。import と export を使用してモジュールをインポートとエクスポートします。
// my-module.ts
export function add(a: number, b: number): number {
return a + b;
}
// index.ts
import { add } from "./my-module";
const result = add(1, 2);
console.log(result);
- TypeScript でモジュールを公開するには、
exportとdefault export以外にも、CommonJS、AMD、ES Modules などの方法があります。 - どの方法を使用するかは、プロジェクトの要件や環境によって異なります。
javascript typescript ecmascript-6
