The 'bind' property is not found within the 'void' data type

Question

The 'bind' property is not found within the 'void' data type

Here's the code snippet I'm working with:

setInterval(this.CheckIfCameraIsAvailable(false).bind(this), 2 * 60 * 1000);

 private CheckIfCameraIsAvailable(forceCheck: boolean) {

}

I encountered the following error message:

Property 'bind' does not exist on type 'void'

The issue disappears when I remove the (forceCheck: boolean) parameter from the (CheckIfCameraIsAvailable) function, however, I still need to pass a parameter to the function.

angular typescript

Answer 1

Answer №1

In the given scenario, there is an error in calling the function and then attempting to use .bind on the result. The correct way to write this code is as follows (where the false argument is passed within the bind method):

class Sample {
  CheckIfDeviceIsAvailable(forceCheck: boolean) {
    alert(forceCheck);
  }

  execute() {
    setInterval(this.CheckIfDeviceIsAvailable.bind(this, false), 2000);
  }
}

const sample = new Sample();
sample.execute();

To maintain the lexical scope more concisely, you can utilize an arrow function:

class Sample {
  CheckIfDeviceIsAvailable(forceCheck: boolean) {
    alert(forceCheck);
  }

  execute() {
    setInterval(() => this.CheckIfDeviceIsAvailable(false), 2000);
  }
}

const sample = new Sample();
sample.execute();

Alternatively, you can achieve the same result by introducing an intermediate variable like so:

class Sample {
  CheckIfDeviceIsAvailable(forceCheck: boolean) {
    alert(forceCheck);
  }

  execute() {
    const _this = this;
    setInterval(function () { _this.CheckIfDeviceIsAvailable(false) }, 2000);
  }
}

const sample = new Sample();
sample.execute();

Answer 2

In the given scenario, there is an error in calling the function and then attempting to use .bind on the result. The correct way to write this code is as follows (where the false argument is passed within the bind method):

class Sample {
  CheckIfDeviceIsAvailable(forceCheck: boolean) {
    alert(forceCheck);
  }

  execute() {
    setInterval(this.CheckIfDeviceIsAvailable.bind(this, false), 2000);
  }
}

const sample = new Sample();
sample.execute();

To maintain the lexical scope more concisely, you can utilize an arrow function:

class Sample {
  CheckIfDeviceIsAvailable(forceCheck: boolean) {
    alert(forceCheck);
  }

  execute() {
    setInterval(() => this.CheckIfDeviceIsAvailable(false), 2000);
  }
}

const sample = new Sample();
sample.execute();

Alternatively, you can achieve the same result by introducing an intermediate variable like so:

class Sample {
  CheckIfDeviceIsAvailable(forceCheck: boolean) {
    alert(forceCheck);
  }

  execute() {
    const _this = this;
    setInterval(function () { _this.CheckIfDeviceIsAvailable(false) }, 2000);
  }
}

const sample = new Sample();
sample.execute();

The 'bind' property is not found within the 'void' data type

Answer №1

Similar questions

Ways to add items to an array adjacent to items sharing a common property value

How to effectively filter a JSON array using multiple keys?

I'm having trouble grasping the concept of 'globals' in TypeScript/NodeJS and distinguishing their differences. Can someone explain it to me?

Passing the value from a custom FormControl component to its parent component

Combine two streams under certain conditions using RxJs

The node package for the 'browser' builder '@angular-devkit/build-angular' could not be located

Discovering all images in Angular

"Unleash the Power of Go HTTP Server for React, Angular, and

Encountering an issue with importing an enum: An error is triggered stating 'Variable implicitly has type 'any' in certain areas where its type remains undetermined.'

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Develop an item with a function that takes an input of the identical type as a variable within the item itself

Warning issued by Angular 7 indicating the usage of the routerLink directive and advising against navigation triggered outside the Angular zone

Using Highcharts to dynamically color a map based on data values in a React TypeScript project

Encountering issues accessing the key value 'templateUrl' in Angular6

Submitting the form leads to an empty dynamically added row

Error: Call stack size limit reached in Template Literal Type

What steps can I take to ensure that AstroJS components do not conceal SVG elements when the SVG is incorporated into another file with client:load?

Exploring NextJS with Typescript to utilize the getStaticProps method

Why is my React component not being updated with Routes?

Utilizing trackingjs as an external library in Ionic2