TypeScript의 디자인 패턴 이해 및 구현-JS 튜토리얼-php.cn

TypeScript의 디자인 패턴 이해 및 구현

WBOY

풀어 주다： 2024-09-10 11:12:37

원래의

1103명이 탐색했습니다.

Entendendo e Implementando Design Patterns em TypeScript
디자인 패턴은 소프트웨어 개발에서 반복되는 문제에 대한 일반적인 솔루션입니다. 이러한 패턴은 코드를 체계적으로 구조화하여 시스템의 유지 관리, 재사용 및 확장성을 촉진하는 데 도움이 됩니다. JavaScript의 상위 집합인 TypeScript에서는 강력한 타이핑 및 객체 지향 기능으로 인해 디자인 패턴을 더욱 효율적으로 구현할 수 있습니다.

이 게시물에서는 디자인 패턴의 세 가지 주요 범주(창조적, 구조적, 행동적)와 이를 TypeScript에서 구현하는 방법을 살펴보겠습니다.

1. 창조 패턴

생성 패턴은 객체 생성을 처리하여 인스턴스 프로세스를 캡슐화하고 코드 재사용을 촉진하는 데 도움이 됩니다.

예: 싱글톤

Singleton은 전체 애플리케이션 수명 주기 동안 클래스에 단일 인스턴스만 있음을 보장합니다.

class Singleton {
    private static instance: Singleton;

    private constructor() {}

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

    someMethod() {
        console.log("Método do Singleton");
    }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

로그인 후 복사

위의 예에서 getInstance() 메소드는 싱글톤 클래스의 인스턴스가 하나만 생성되도록 보장합니다.

2. 구조적 패턴

구조적 패턴은 클래스와 객체의 구성을 다루므로 더 작고 단순한 조각으로 대규모 코드 구조를 구축할 수 있습니다.

예: 어댑터

어댑터 패턴을 사용하면 호환되지 않는 두 인터페이스가 함께 작동할 수 있습니다. 이는 코드에서 예상하는 것과 다른 인터페이스를 가진 클래스를 사용하려는 경우에 유용합니다.

// Interface antiga
class OldAPI {
    oldRequest() {
        return "Dados da API antiga";
    }
}

// Interface nova
class NewAPI {
    newRequest() {
        return "Dados da API nova";
    }
}

// Adapter que adapta a interface antiga para a nova
class APIAdapter {
    private oldAPI: OldAPI;

    constructor(oldAPI: OldAPI) {
        this.oldAPI = oldAPI;
    }

    newRequest() {
        return this.oldAPI.oldRequest();
    }
}

const oldAPI = new OldAPI();
const adapter = new APIAdapter(oldAPI);

console.log(adapter.newRequest()); // "Dados da API antiga"

로그인 후 복사

이 예에서 어댑터(APIAdapter)를 사용하면 NewAPI에서 예상하는 인터페이스와 함께 OldAPI 클래스를 사용할 수 있습니다.

3. 행동 패턴

행동 패턴은 객체 간의 상호 작용과 통신을 다루며 코드의 유연성과 분리를 촉진합니다.

예: 관찰자

관찰자 패턴은 객체 간의 일대다 종속성을 정의하므로 객체의 상태가 변경되면 모든 종속 항목에 자동으로 알림이 전달되고 업데이트됩니다.

interface Observer {
    update(data: any): void;
}

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

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

    removeObserver(observer: Observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    notifyObservers(data: any) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class ConcreteObserver implements Observer {
    update(data: any) {
        console.log("Observer atualizado com dados:", data);
    }
}

const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers("Alguma informação importante");
// Ambos observers recebem a atualização

로그인 후 복사

위 예시에서 Observer 패턴을 사용하면 여러 객체가 주체 객체(Subject)의 상태 변화를 관찰하고 반응할 수 있습니다.