TypeScript의 고급 디자인 패턴-JS 튜토리얼-php.cn

TypeScript의 고급 디자인 패턴

DDD

풀어 주다： 2025-01-02 22:39:40

원래의

778명이 탐색했습니다.

디자인 패턴은 소프트웨어 디자인에서 반복되는 문제에 대한 오랜 시간 테스트를 거친 솔루션입니다. 코드 가독성, 확장성 및 유지 관리 가능성이 향상됩니다. 강력한 타이핑과 최신 JavaScript 기반을 갖춘 TypeScript는 이러한 패턴을 효과적으로 구현하는 데 탁월한 언어입니다.

이 기사에서는 일반적으로 사용되는 고급 디자인 패턴을 살펴보고 해당 개념, TypeScript 구현 및 실제 사용 사례를 설명합니다. 숙련된 개발자이든 TypeScript를 탐색하든 강력한 애플리케이션 구축에 대한 귀중한 통찰력을 얻을 수 있습니다.

디자인 패턴이란 무엇입니까?

디자인 패턴은 일반적인 디자인 문제에 대한 재사용 가능한 솔루션입니다. 세 가지 주요 유형으로 분류됩니다.

생성 패턴: 객체 생성을 처리합니다.
구조적 패턴: 물체 구성에 중점을 둡니다.
행동 패턴: 대상 상호작용에 관심이 있습니다.

TypeScript의 창조적인 디자인 패턴

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. 관찰자 패턴
하나의 객체가 상태를 변경하면 모든 종속 항목에 알림이 전달되도록 객체 간의 종속성을 정의합니다.

사용 사례: 이벤트 시스템

구현:

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