Typescript/Angular 5 - how to make sure function parameter is being used?

Question

I am writing a component with Angular 5 and Ionic 4.

I want to pass in a Refresher event so as to hide the refresh spinner when the user refreshes the finally function can hide the spinner.

Here is my code:

export class UserInfoService {

    constructor(private employeeService: EmployeeService) {
        this.handleSuccess = this.handleSuccess.bind(this);
        this.processData = this.processData.bind(this);
        this.handleFinally = this.handleFinally.bind(this);
    }

    getEmployeeInfo(event?: Refresher) {

        // console.log(event);

        return this.employeeService
            .getEmployeeInfo()
            .map(this.handleSuccess)
            .finally(this.handleFinally);
            // .finally(() => {
            //     if (event != null) {
            //         console.log(' event ', event);
            //         event.complete();
            //     }
            // });
    }

    handleFinally() {
        console.log(' handle finally ', event);

        if (event != null) {
            console.log(' event ', event);
            event.complete();
        }
    }

The commented out code works fine but it would be great to not have to use an anonymous function. After binding it to the constructor, it picks up on other events.

Answer 1

The event value must be provided. What about making it a parameter of handleFinally . An anonymous function is still needed but it's now shorter, which does not decrease readability:

export class UserInfoService {
  constructor(private readonly employeeService: EmployeeService) {
      this.handleSuccess = this.handleSuccess.bind(this);
      this.processData = this.processData.bind(this);
  }

  getEmployeeInfo(event?: Refresher) {
      // console.log(event);

      return this.employeeService
          .getEmployeeInfo()
          .map(this.handleSuccess)
          .finally(() => this.handleFinally(event));

  }

  handleFinally(event?: Refresher) {
      console.log(' handle finally ', event);

      if (event) {
          console.log(' event ', event);
          event.complete();
      }
  }
}

Answer 2

You can still use array function with function variable like below:

export class UserInfoService {

  constructor(private employeeService: EmployeeService) {
      this.handleSuccess = this.handleSuccess.bind(this);
      this.processData = this.processData.bind(this);
  }

  getEmployeeInfo(event?: Refresher) {

      // console.log(event);

      return this.employeeService
          .getEmployeeInfo()
          .map(this.handleSuccess)
          .finally(this.handleFinally);

  }

  handleFinally = (event?: Refresher) => {
      console.log(' handle finally ', event);

      if (event != null) {
          console.log(' event ', event);
          event.complete();
      }
  }
}