TypeScript: インターフェース、抽象クラス、ミックスインを使ってクラスを分割する

分割方法

TypeScript クラスを複数のファイルに分割するには、以下の2つの方法があります。

ネームスペースを使用すると、クラスを論理的にグループ化し、名前空間間で名前の競合を回避することができます。

// ファイル1: app.ts
namespace App {
  export class Person {
    name: string;

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

// ファイル2: main.ts
import { Person } from './app';

const person = new Person('田中 太郎');
console.log(person.name); // 田中 太郎

モジュールを使用すると、クラスを個別のファイルにカプセル化し、コードの再利用性を高めることができます。

// ファイル1: person.ts
export class Person {
  name: string;

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

// ファイル2: main.ts
import { Person } from './person';

const person = new Person('佐藤 花子');
console.log(person.name); // 佐藤 花子

注意事項

• クラスを複数のファイルに分割する場合は、すべてのファイルを同じディレクトリに配置する必要があります。
• ネームスペースを使用する場合は、各ファイルの先頭に namespace キーワードを宣言する必要があります。
• モジュールを使用する場合は、export キーワードを使用して、クラスを公開する必要があります。

TypeScript クラスを複数のファイルに分割することで、コードの可読性、保守性、再利用性を向上させることができます。上記の方法を参考に、状況に応じて適切な方法を選択してください。

TypeScript クラスを複数のファイルに分割する：サンプルコード

person.ts

export class Person {
  name: string;

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

  greet() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  }
}

main.ts

import { Person } from './person';

const person = new Person('田中 太郎');
person.greet(); // こんにちは、私の名前は 田中 太郎 です。

この例では、Person クラスを person.ts ファイルに定義し、main.ts ファイルからインポートして使用しています。 greet() メソッドも person.ts ファイルに定義されています。

ネームスペースを使用する場合

namespace App {
  export class Person {
    name: string;

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

    greet() {
      console.log(`こんにちは、私の名前は ${this.name} です。`);
    }
  }
}

import { App::Person } from './person';

const person = new Person('佐藤 花子');
person.greet(); // こんにちは、私の名前は 佐藤 花子 です。

この例では、Person クラスを App ネームスペース内に定義しています。 main.ts ファイルから Person クラスを使用するには、App::Person のように完全修飾名を使用する必要があります。

このサンプルコードは、TypeScript クラスを複数のファイルに分割する方法の一例です。 状況に応じて、適切な方法を選択してください。

TypeScript クラスを分割するその他の方法

インターフェースを使用して、クラスの構造を定義することができます。 これにより、クラスの公開 API を明確にし、コードの可読性を向上させることができます。

// ファイル1: person.interface.ts
export interface Person {
  name: string;
  greet(): void;
}

// ファイル2: person.ts
import { Person } from './person.interface';

class PersonImpl implements Person {
  name: string;

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

  greet() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  }
}

// ファイル3: main.ts
import { PersonImpl } from './person';

const person = new PersonImpl('山田 太郎');
person.greet(); // こんにちは、私の名前は 山田 太郎 です。

抽象クラスを使用して、共通のロジックを定義することができます。 これにより、コードの重複を削減し、保守性を向上させることができます。

// ファイル1: person.abstract.ts
export abstract class Person {
  name: string;

  abstract greet(): void;
}

// ファイル2: person.ts
import { Person } from './person.abstract';

class PersonImpl extends Person {
  constructor(name: string) {
    super(name);
  }

  greet() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  }
}

// ファイル3: main.ts
import { PersonImpl } from './person';

const person = new PersonImpl('鈴木 花子');
person.greet(); // こんにちは、私の名前は 鈴木 花子 です。

// ファイル1: person.mixin.ts
export function mixinGreet(target: any) {
  target.prototype.greet = function() {
    console.log(`こんにちは、私の名前は ${this.name} です。`);
  };
}

// ファイル2: person.ts
import { mixinGreet } from './person.mixin';

class Person {
  name: string;

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

mixinGreet(Person);

// ファイル3: main.ts
import { Person } from './person';

const person = new Person('佐藤 太郎');
person.greet(); // こんにちは、私の名前は 佐藤 太郎 です。

これらの方法は、それぞれ異なる利点と欠点があります。 状況に応じて、適切な方法を選択してください。