如何标记/切换TypeScript服务/类

Question

我想在我的React应用程序中标记一个服务，这样我就可以通过在配置文件中更改布尔值来打开和关闭它。然而，我不确定如何最好地这样做。服务如下:

class Service {
constructor() {
// do stuff
}
doA() {
// do stuff
}
doB() {
// do stuff
}
// more methods
}
export const serviceInstance = new Service();

该服务的方法在应用程序的不同部分被调用。

目前，我通过创建另一个具有与Service相同方法和属性的类来标记它，然后基于特征标志布尔导出相关实例:

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

你应该在你的项目中使用webpack。最好的方法是只构建您需要的代码。但export const serviceInstance = serviceFlag ? new Service() : new ServiceMock();演示代码,它将构建所有的两个服务到您的运行时代码。

如果你在webpack中做这个配置会有帮助。

module.exports = {
//...
plugins: [
new webpack.DefinePlugin({
'process.env.serviceFlag': JSON.stringify(process.env.serviceFlag),
}),
],
};

然后在代码中使用环境变量，如export const serviceInstance = process.env.serviceFlag === "true" ? new Service() : new ServiceMock();。最后，不要忘记在npm脚本中传递环境变量。

{
"scripts": {
"build": "cross-env serviceFlag=true umi build",
"build:mock": "cross-env serviceFlag=false umi build",
},
}

现在您可以选择npm run build或npm run build:mock，运行时代码只包含其中一个服务。