reactjs - Hur man använder feature flagg/växlar TypeScript-tjänst/klass

Jag skulle vilja lägga till en funktionsflagga för en tjänst i min React-app så att jag kan slå på och av den genom att ändra ett boolean i en konfigurationsfil. Jag är dock osäker på hur jag bäst gör detta. Tjänsten är som nedan:

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

  doA() {
    // do stuff
  }

  doB() {
    // do stuff
  }

  // more methods
}

export const serviceInstance = new Service();

Denna tjänsts metoder kallas i olika delar av applikationen.

För närvarande markerar jag det genom att skapa en annan klass med samma metoder och attribut som Service och sedan exportera den relevanta instansen baserat på feature-flaggan boolean:

class ServiceMock {
  constructor() {
    return;
  }

  doA() {
    return;
  }

  doB() {
    return;
  }

  // more empty return methods
}

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

Det fungerar, men jag är orolig för att detta är ganska ineffektivt, särskilt när antalet metoder och attribut ökar. Finns det ett bättre sätt att använda funktionsflaggor för något sådant här?

Svar #1

Jag är ny på TypeScript, men hjälper det här något?

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();

Om någon har förbättringar eller förslag, kämpar jag fortfarande med att gå över till TypeScript från Python och skulle vara glad att förbättra detta svar.

Det körs utan fel på TypeScript Playground.

Svar #2

Du borde ha använt webpack i ditt projekt. Det bästa sättet är helt enkelt att bygga den kod du behöver. Men i din demokod export const serviceInstance=serviceFlag ? new Service() : new ServiceMock();, kommer det att bygga in båda tjänsterna i din körkod.

Det skulle hjälpa om du gjorde denna konfiguration i webpack.

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

Sedan för att använda miljövariabeln i din kod så här export const serviceInstance=process.env.serviceFlag === "true" ? new Service() : new ServiceMock();. Slutligen, glöm inte att skicka miljövariabeln i npm-skriptet.

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

Nu kan du npm run build eller npm run build:mock, runtime-koden inkluderar bara en av tjänsterna.