如何使用標志/切換 TypeScript 服務/類

Question

我想在我的 React 應用程序中標記一個服務，以便我可以通過更改配置文件中的 boolean 來打開和關閉它。 但是，我不確定如何最好地做到這一點。 服務如下：

class Service {
  constructor() {
    // do stuff
  }

  doA() {
    // do stuff
  }

  doB() {
    // do stuff
  }

  // more methods
}

export const serviceInstance = new Service();

在應用程序的不同部分調用此服務的方法。

目前，我通過使用與Service相同的方法和屬性創建另一個 class 來標記它，然后根據功能標志 boolean 導出相關實例：

class ServiceMock {
  constructor() {
    return;
  }

  doA() {
    return;
  }

  doB() {
    return;
  }

  // more empty return methods
}

export const serviceInstance = serviceFlag ? new Service() : new ServiceMock();

它有效，但我擔心這是相當低效的，尤其是當方法和屬性的數量增加時。 有沒有更好的方法來標記這樣的東西？

Answer 1

我是 TypeScript 的新手，但這有幫助嗎？

interface IService {
    doA(): void
    doB(): void
}

class Service implements IService {
    doA(): void {
        console.log("doA");
    }
    doB(): void {
        console.log("doB");
    }
}

class ServiceMock implements IService {
    doA(): void {
        console.log("mockA");
    }
    doB(): void {
        console.log("mockB");
    }
}

function createService(serviceFlag: boolean): IService {
    return (serviceFlag) ? new Service() : new ServiceMock();
}

const originalServiceInstance = createService(true);
const mockServiceInstance = createService(false);
originalServiceInstance.doA();
mockServiceInstance.doA();

如果有人有改進或建議，我仍然在努力從 python 來到 TypeScript 並且很樂意改進這個答案。

它在TypeScript Playground運行沒有錯誤。

Answer 2

您可以通過多種方式做到這一點。 如果您使用的是 React 功能組件，您可以查看此示例。 我專門為這個用例構建了一個功能標志服務。 使用FeatureGuards的好處是您可以在運行時通過儀表板更改標志，而無需更改您的代碼。 您還可以控制誰可以看到哪個版本。

應該很容易將此示例推廣到 class 組件。