TypeScript の高度なデザインパターン-jsチュートリアル-php.cn

TypeScript の高度なデザインパターン

DDD

リリース： 2025-01-02 22:39:40

オリジナル

781 人が閲覧しました

設計パターンは、ソフトウェア設計において繰り返し発生する問題に対する、実績のあるソリューションです。コードの可読性、拡張性、保守性が向上します。 TypeScript は、強力な型指定と最新の JavaScript 基盤を備えており、これらのパターンを効果的に実装するための優れた言語です。

この記事では、高度で一般的に使用されるデザインパターンを詳しく掘り下げ、その概念、TypeScript の実装、実際の使用例について説明します。経験豊富な開発者であっても、TypeScript を研究している人であっても、堅牢なアプリケーションを構築するための貴重な洞察を得ることができます。

デザインパターンとは何ですか?

デザインパターンは、一般的なデザイン上の問題に対する再利用可能なソリューションです。それらは主に 3 つのタイプに分類されます:

作成パターン: オブジェクトの作成を処理します。
構造パターン: オブジェクトの構成に焦点を当てます。
行動パターン: オブジェクトの相互作用に関係します。

TypeScript の創造的なデザインパターン

1.シングルトンパターン
アプリケーション全体でクラスのインスタンスが 1 つだけになるようにします。

使用例: グローバル状態または構成の管理。

実装:

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

ログイン後にコピー

2.ファクトリーメソッド
正確なクラスを指定せずにオブジェクトを作成します。

ユースケース: オブジェクト作成ロジックを抽象化する必要がある場合。

実装:

interface Product {
  operation(): string;
}

class ConcreteProductA implements Product {
  operation(): string {
    return "Product A";
  }
}

class ConcreteProductB implements Product {
  operation(): string {
    return "Product B";
  }
}

abstract class Creator {
  abstract factoryMethod(): Product;

  someOperation(): string {
    const product = this.factoryMethod();
    return `Creator: ${product.operation()}`;
  }
}

class ConcreteCreatorA extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

// Usage
const creatorA = new ConcreteCreatorA();
console.log(creatorA.someOperation());

ログイン後にコピー

3.ビルダーパターン
オブジェクトの構築とその表現を分離します。

使用例: 複雑なオブジェクトを段階的に構築します。

実装:

class Product {
  private parts: string[] = [];

  addPart(part: string): void {
    this.parts.push(part);
  }

  listParts(): void {
    console.log(`Product parts: ${this.parts.join(", ")}`);
  }
}

class Builder {
  private product = new Product();

  reset(): void {
    this.product = new Product();
  }

  addPartA(): void {
    this.product.addPart("Part A");
  }

  addPartB(): void {
    this.product.addPart("Part B");
  }

  getProduct(): Product {
    const result = this.product;
    this.reset();
    return result;
  }
}

// Usage
const builder = new Builder();
builder.addPartA();
builder.addPartB();
const product = builder.getProduct();
product.listParts();

ログイン後にコピー

TypeScript の構造設計パターン

1.アダプターパターン
クラスのインターフェースを別のインターフェースに変換します。

使用例: サードパーティライブラリの統合。

実装:

class OldSystem {
  oldRequest(): string {
    return "Old System";
  }
}

class NewSystem {
  newRequest(): string {
    return "New System";
  }
}

class Adapter extends OldSystem {
  private adaptee: NewSystem;

  constructor(adaptee: NewSystem) {
    super();
    this.adaptee = adaptee;
  }

  oldRequest(): string {
    return this.adaptee.newRequest();
  }
}

// Usage
const adaptee = new NewSystem();
const adapter = new Adapter(adaptee);
console.log(adapter.oldRequest());

ログイン後にコピー

2.複合パターン
オブジェクトをツリー構造に構成して、部分全体の階層を表します。

ユースケース: 階層データの管理。

実装:

abstract class Component {
  abstract operation(): string;
}

class Leaf extends Component {
  operation(): string {
    return "Leaf";
  }
}

class Composite extends Component {
  private children: Component[] = [];

  add(component: Component): void {
    this.children.push(component);
  }

  operation(): string {
    const results = this.children.map(child => child.operation());
    return `Composite(${results.join(", ")})`;
  }
}

// Usage
const leaf = new Leaf();
const composite = new Composite();
composite.add(leaf);
console.log(composite.operation());

ログイン後にコピー

TypeScript の動作デザインパターン

1.オブザーバーパターン
オブジェクト間の依存関係を定義して、1 つのオブジェクトの状態が変更され、すべての依存オブジェクトに通知されるようにします。

ユースケース: イベントシステム。

実装:

interface Observer {
  update(message: string): void;
}

class Subject {
  private observers: Observer[] = [];

  attach(observer: Observer): void {
    this.observers.push(observer);
  }

  notify(message: string): void {
    this.observers.forEach(observer => observer.update(message));
  }
}

class ConcreteObserver implements Observer {
  update(message: string): void {
    console.log(`Received message: ${message}`);
  }
}

// Usage
const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();
subject.attach(observer1);
subject.attach(observer2);
subject.notify("Event occurred!");

ログイン後にコピー

2.戦略パターン
アルゴリズムのファミリーを定義し、それらを交換可能にします。

使用例: 支払い方法または並べ替えアルゴリズム。

実装:

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

ログイン後にコピー

最後に、、、

デザインパターンは、スケーラブルで保守可能なアプリケーションを構築するための強力なツールです。 TypeScript の堅牢な型システムと最新の構文は、これらのパターンを効果的に実装するための優れたプラットフォームを提供します。これらの設計パターンを理解して適用することで、開発者は時の試練に耐える、適切に設計されたソフトウェアソリューションを作成できます。
次の記事でお会いしましょう、若者!!!

私の個人ウェブサイト: https://shafayet.zya.me

ひどい設定ですか?

Advanced Design Patterns in TypeScript