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 <名前空間名>;

// 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 type」構文を使用します。
• 「export as namespace」は、宣言ファイル（*.d.ts）でのみ使用できます。

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

// 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 が出力されます

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

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

「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 が出力されます

デフォルトエクスポート

デフォルトエクスポートは、モジュールから1つのエンティティのみをエクスポートする方法です。具体的には、以下の形式で記述します。

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