TypeScript實現(xiàn)狀態(tài)模式的示例代碼

更新時間：2025年06月04日 11:19:30 作者：曹夢秋

本文主要介紹了TypeScript實現(xiàn)狀態(tài)模式的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

示例：文檔狀態(tài)管理

假設我們有一個文檔系統(tǒng)，文檔可以在“草稿（Draft）”、“審查（Review）”和“發(fā)布（Published）”三種狀態(tài)之間轉(zhuǎn)換。我們將使用狀態(tài)模式來實現(xiàn)這個系統(tǒng)。

1. 定義狀態(tài)接口

首先，我們定義一個 State 接口，定義了不同狀態(tài)所需的方法。

interface State {
    handleRequest(context: DocumentContext): void;
}

2. 實現(xiàn)具體狀態(tài)類

然后，我們實現(xiàn)具體的狀態(tài)類，分別對應于“草稿”、“審查”和“發(fā)布”狀態(tài)。

class DraftState implements State {
    handleRequest(context: DocumentContext): void {
        console.log("Document is in draft state.");
        context.setState(new ReviewState()); // 轉(zhuǎn)換狀態(tài)為審查狀態(tài)
    }
}

class ReviewState implements State {
    handleRequest(context: DocumentContext): void {
        console.log("Document is under review.");
        context.setState(new PublishedState()); // 轉(zhuǎn)換狀態(tài)為發(fā)布狀態(tài)
    }
}

class PublishedState implements State {
    handleRequest(context: DocumentContext): void {
        console.log("Document is published.");
        // 這里可以選擇不轉(zhuǎn)換狀態(tài)
    }
}

3. 創(chuàng)建上下文類

接下來，我們創(chuàng)建一個上下文類 DocumentContext，它持有當前狀態(tài)的引用并提供狀態(tài)切換的方法。

class DocumentContext {
    private state: State;

    constructor(initialState: State) {
        this.state = initialState;
    }

    setState(state: State): void {
        this.state = state;
    }

    request(): void {
        this.state.handleRequest(this);
    }
}

4. 使用狀態(tài)模式

最后，我們可以創(chuàng)建上下文實例，并通過不同的方法調(diào)用來處理狀態(tài)轉(zhuǎn)換。

// 使用示例
const document = new DocumentContext(new DraftState());

// 處理請求，轉(zhuǎn)換狀態(tài)
document.request(); // 輸出: Document is in draft state.
document.request(); // 輸出: Document is under review.
document.request(); // 輸出: Document is published.