TypeScriptにおける「export =」と「export as namespace」構文の使い分け

TypeScriptにおける「export」と「export as namespace」構文の詳細解説

「export =」構文：個別エンティティのエクスポート

「export =」構文は、関数、クラス、変数などの個別エンティティをモジュール外部に公開するために使用されます。具体的には、以下の形式で記述します。

export <識別子> = <エンティティ>;

この構文を用いると、モジュールをインポートした際に、指定した識別子を使ってエンティティにアクセスすることができます。

例：

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

export const PI = 3.14159;

// index.ts
import { add, Person, PI } from './math';

const result = add(5, 3); // result は 8 になります
const person = new Person('Taro', 30);
console.log(PI); // 3.14159 が出力されます

「export as namespace」構文：名前空間のエクスポート

一方、「export as namespace」構文は、モジュール内の全てのエンティティを名前空間としてまとめてエクスポートするために使用されます。具体的には、以下の形式で記述します。

export as namespace <名前空間名>;

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

export const PI = 3.14159;

export as namespace MathLib;

// index.ts
import { MathLib } from './math';

const result = MathLib.add(5, 3); // result は 8 になります
const person = new MathLib.Person('Taro', 30);
console.log(MathLib.PI); // 3.14159 が出力されます

使い分けのポイント

「export =」と「export as namespace」は、それぞれ異なる役割を持つため、状況に応じて使い分けることが重要です。

• **「export =」**は、個別のエンティティを明示的に公開したい場合に適しています。
• **「export as namespace」**は、モジュール内の関連するエンティティをまとめて提供したい場合に適しています。

例えば、数学関連の関数やクラスを定義するモジュールの場合、「export =」を使って個々の関数やクラスをエクスポートする方法と、「export as namespace」を使ってMathLibという名前空間としてまとめてエクスポートする方法があります。

その他の注意事項

• 「export as namespace」は、宣言ファイル（*.d.ts）でのみ使用できます。
• 型のみをエクスポートしたい場合は、「export type」構文を使用します。

まとめ

「export =」と「export as namespace」は、TypeScriptにおける重要なエクスポート構文です。それぞれの役割と使い分けを理解し、状況に応じて適切な構文を選択することで、モジュールのコードを整理し、読みやすくすることができます。

TypeScript サンプルコード

個別エンティティのエクスポート

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

export const PI = 3.14159;

// index.ts
import { add, Person, PI } from './math';

const result = add(5, 3); // result は 8 になります
console.log(result);

const person = new Person('Taro', 30);
person.greet(); // Hello, my name is Taro and I am 30 years old. が出力されます
console.log(PI); // 3.14159 が出力されます

名前空間のエクスポート

// math.ts
function add(x: number, y: number): number {
  return x + y;
}

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const PI = 3.14159;

export as namespace MathLib;

// index.ts
import { MathLib } from './math';

const result = MathLib.add(5, 3); // result は 8 になります
console.log(result);

const person = new MathLib.Person('Taro', 30);
person.greet(); // Hello, my name is Taro and I am 30 years old. が出力されます
console.log(MathLib.PI); // 3.14159 が出力されます

上記コードでは、以下の点に注目してください。

• math.tsファイルでは、関数、クラス、変数をそれぞれ「export =」構文で個別にエクスポートしています。
• さらに、全てのエンティティをまとめて「MathLib」という名前空間としてエクスポートするために、「export as namespace」構文を使用しています。
• index.tsファイルでは、個別にエクスポートされたエンティティにはドット記法（add(5, 3)）、名前空間としてエクスポートされたエンティティには名前空間接頭辞（MathLib.add(5, 3)）を使用してアクセスしています。

これらのサンプルコードを参考に、それぞれの構文の使い分けを理解し、状況に応じて適切な方法でモジュールのコードを構成してみてください。

TypeScriptにおける「export」構文のその他の方法

export * from './path/to/module';

この構文を用いると、インポートしたモジュール内の全てのエンティティに、ドット記法（.entityName）を使ってアクセスすることができます。

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

export const PI = 3.14159;

// index.ts
import * as MathLib from './math';

const result = MathLib.add(5, 3); // result は 8 になります
console.log(result);

const person = new MathLib.Person('Taro', 30);
person.greet(); // Hello, my name is Taro and I am 30 years old. が出力されます
console.log(MathLib.PI); // 3.14159 が出力されます

デフォルトエクスポート

export default <エンティティ>;

// math.ts
export default function add(x: number, y: number): number {
  return x + y;
}

export class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

export const PI = 3.14159;

// index.ts
import math from './math'; // デフォルトエクスポートのみをインポート

const result = math(5, 3); // result は 8 になります
console.log(result);

// PersonクラスやPI定数にはアクセスできません

まとめ

TypeScriptにおける「export」構文には、様々な方法が存在します。それぞれの方法の特徴と使い分けを理解し、状況に応じて適切な方法を選択することで、モジュールのコードを整理し、読みやすくすることができます。

これらの方法を組み合わせることで、より柔軟で効率的なモジュール構成を実現することができます。