[typescript] 스테이트 패턴과 타입스크립트의 결합 사례

21 Dec 2023

typescript

스테이트 패턴은 객체지향 소프트웨어 디자인에서 유용하게 사용되는 패턴 중 하나입니다. 이 패턴은 객체의 상태에 따라 해당 객체의 행위를 변경할 수 있게 해줍니다. 타입스크립트는 자바스크립트에 정적 타입을 추가하여 코드의 가독성을 높이고 오류를 줄이는데 도움을 줍니다. 이번 글에서는 스테이트 패턴을 타입스크립트와 함께 사용하는 방법에 대해 알아보겠습니다.

스테이트 패턴이란?

스테이트 패턴은 객체의 상태를 클래스로 캡슐화하여 각 상태마다 다른 행동을 정의할 수 있게 합니다. 각 상태는 해당 상태에 따라 다른 동작이 가능하도록 캡슐화되어 있습니다. 이 패턴을 사용하면 객체의 상태에 따라 일일이 분기 처리를 하는 대신에 상태마다 각각의 행위를 정의하게 됩니다.

타입스크립트와 함께하는 스테이트 패턴

타입스크립트를 사용하면 객체지향 디자인 패턴을 더욱 쉽게 적용할 수 있습니다. 다형성을 효과적으로 사용하여 스테이트 패턴을 구현할 수 있습니다. 아래는 간단한 주문 처리 시스템의 예제 코드입니다.

// 상태를 나타내는 인터페이스
interface OrderState {
    cancelOrder(): void;
    verifyPayment(): void;
    shipOrder(): void;
}

// 각 상태를 구현하는 클래스들
class OrderPending implements OrderState {
    cancelOrder() {
        console.log("주문이 취소되었습니다.");
    }
    verifyPayment() {
        console.log("결제가 확인되었습니다.");
    }
    shipOrder() {
        console.log("주문을 발송합니다.");
    }
}

class OrderShipped implements OrderState {
    cancelOrder() {
        console.log("이미 발송된 상품은 취소할 수 없습니다.");
    }
    verifyPayment() {
        console.log("이미 결제가 완료되었습니다.");
    }
    shipOrder() {
        console.log("상품은 이미 발송되었습니다.");
    }
}

// 주문 클래스
class Order {
    private state: OrderState;

    constructor() {
        this.state = new OrderPending();
    }

    public cancelOrder() {
        this.state.cancelOrder();
    }

    public verifyPayment() {
        this.state.verifyPayment();
    }

    public shipOrder() {
        this.state.shipOrder();
    }

    public setState(state: OrderState) {
        this.state = state;
    }
}

// 주문 처리 예제
const order = new Order();
order.verifyPayment();
order.shipOrder();

order.setState(new OrderShipped());
order.cancelOrder();
order.verifyPayment();

위 예제에서는 Order 클래스의 상태를 스테이트 패턴을 사용하여 캡슐화하고, 각 상태에 따른 행위를 정의하는 인터페이스와 클래스를 구현하였습니다. 타입스크립트의 강력한 타입 시스템을 통해 각 상태마다 필요한 메서드를 정의하고, 올바른 상태 전이를 보장할 수 있습니다.

결론

타입스크립트를 사용하면 스테이트 패턴을 더욱 쉽게 구현하고 관리할 수 있습니다. 이를 통해 객체의 상태 변경에 따라 발생할 수 있는 버그를 줄이고, 코드 유지보수성을 높일 수 있습니다.

참고 자료: TypeScript Design Patterns

이상으로 스테이트 패턴과 타입스크립트를 결합한 사례에 대해 알아보았습니다. 감사합니다.