Ensuring Function Parameter Usage in Typescript and Angular 5

Question

Ensuring Function Parameter Usage in Typescript and Angular 5

Currently, I am developing a component using Angular 5 and Ionic 4.

My objective is to include a Refresher event to hide the refresh spinner whenever the user triggers the final function to conceal the spinner.

Provided below is an excerpt of 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 portion of the code works properly, although it would be more efficient not to utilize an anonymous function. By binding it to the constructor, it can detect other events seamlessly.

angular typescript binding this

Answer 1

Answer №1

Ensure the event value is included. Consider setting it as a parameter of handleFinally. Although an anonymous function is still required, it becomes more concise without sacrificing 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

Ensure the event value is included. Consider setting it as a parameter of handleFinally. Although an anonymous function is still required, it becomes more concise without sacrificing 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 3

Answer №2

Using array functions with function variables is still possible, as demonstrated in the example 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();
      }
  }
}

Answer 4

Using array functions with function variables is still possible, as demonstrated in the example 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();
      }
  }
}

Ensuring Function Parameter Usage in Typescript and Angular 5

Answer №1

Answer №2

Similar questions

"Manipulating values in an array with a union type: a guide to setting and

Unable to bring in Angular2 bootstrap function

Troubleshooting Error in Converting a JSX File with Tailwind CSS and Typescript

Angular 8 Refresh Token Implementation

Unusual behavior observed during npm update operation

Unable to bring in CSS module in a .tsx file

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

What is the process for bringing in AngularJS 2? // Bring in { routerTransition } from './router.module;

The karma test encounters difficulties in establishing a connection with the 'chrome' instance that has been launched

The selected data was inserted as a foreign key, leading to an Integrity constraint violation with SQLSTATE[23000]: 1048

When using Google Chrome, you may encounter an error message stating that the 'Access-Control-Allow-Origin' header in the response cannot be set to a wildcard '*' even when a specific URL is specified

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

Angular does not update the progress bar

Change the spread operator in JavaScript to TypeScript functions

Struggling to deploy a Typescript React / NestJS application on Heroku due to the error message "error TS2307: Cannot find module"?

Unable to access the API within Angular using a web browser

What is the process for launching a TypeScript VS Code extension from a locally cloned Git repository?

Using static methods within a static class to achieve method overloading in Typescript

How is it possible that this is not causing a syntax or compile-time error?

Issues with running NPM script for compiling TypeScript code