如何修复错误类型“void”不可分配给 angular 类型“boolean”？

Question

I am using the following code and getting the error as below:

Error: error TS2345: Argument of type '(item: any) => void' is not assignable to parameter of type '(value: any, index: number, obj: any[]) => boolean'. Type 'void' is not assignable to type 'boolean'.

Code:

addToCart(product) {
    if (!this.productArr.length) {
      this.productArr.push(product);
    } else {
      let flag = false;
      this.productArr.find((item: any) => {
        if (item.name === product.name) {
          item.count = product.count;
          flag = true;
        }
      });
      if (!flag) {
        this.productArr.push(product);
      }
    }
    this.cartService.addToCart(this.productArr);
  }

Any idea how can we fix it?

Answer 1

addToCart(product) {
    if (!this.productArr.length) {
      this.productArr.push(product);
    } else {
      let flag = false;
      this.productArr.forEach((item: any) => { // change this line
        if (item.name === product.name) {
          item.count = product.count;
          flag = true;
        }
      });
      if (!flag) {
        this.productArr.push(product);
      }
    }
    this.cartService.addToCart(this.productArr);
  }

Change the .find to a .forEach . The .find expects a return of a boolean value of when it found the element you're looking for. ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find )

Answer 2

You're not returning a value in the arrow function you pass as parameter to find . You need to return a boolean here.

this.productArr.find((item: any) => {
    if (item.name === product.name) {
        item.count = product.count;
        flag = true;
        return true;
    }
    return false;
});

Note that this will also stop further iterations over the array, which may or may not be your intention. Use forEach if you need to find all occurences of item where the name is the same as that of the product.

The better solution would be to use some or every instead of find, depending on whether or not you want to apply this operation to multiple products, since using find implies that you're looking to find something and not performing alterations to an item.

// Will stop after the first time `true` is returned
this.productArr.some((item: any) => {
    if (item.name === product.name) {
        item.count = product.count;
        flag = true;
        return true;
    }
});

Answer 3

What about :

addToCart(product: any): void {
    // find will return your product, and it only need a boolean as condition for the arrow function
    const product = this.productArr.find((item: any) => item.name === product.name);

    // If you don't have some products or you don't find your product, you push it
    if (!this.productArr.length || !product) {
      this.productArr.push(product);
    }

    // if you find your product, you update your item.coun
    if (product) {
        item.count = product.count;
    }

    this.cartService.addToCart(this.productArr);
}

Have a look on this article , it explains actually how to the find/map/foreach operators.