Почему выбивает ошибку в функции?

Question

[timonck]

У меня есть пара функций, в которых одинаковые ошибки:

TS2345: Argument of type 'Products | undefined' is not assignable to parameter of type 'Products'.   Type 'undefined' is not assignable to type 'Products'.

export type Products = {
    id: number,
    title: string,
    images: string[],
    currentImageIndex: number,
    isCycleMode: boolean,
    cantGoPrev: boolean,
    cantGoNext: boolean,
    price: number,
    company: string,
    info: string,
    inCart: boolean,
    count: number,
    total: number
}

getItem = (id: number) => {
        return this.state.products.find(item => item.id === id);
    };

    addToCart = (id: number) => {
        let tempProduct: Products[] = [...this.state.products];
                                                            //тут ошибка(this.getItem(id))
        const index = tempProduct.indexOf(this.getItem(id));
        const product = tempProduct[index];
        product.inCart = true;
        product.count = 1;
        const price = product.price;
        product.total = price;
        this.setState(
            () => {
                return {
                    products: tempProduct,
                    cart: [...this.state.cart, product]
                }
            }
            ,
            () => {
                this.addTotals();
            }
        );
    };

    increment = (id: number) => {
        let tempCart = [...this.state.cart];
        const selectedProduct = tempCart.find(item => item.id === id);
                                         // тут такая же ошибка  indexOf(selectedProduct)
        const index = tempCart.indexOf(selectedProduct);
        const product = tempCart[index];
        product.count = product.count + 1;
        product.total = product.count * product.price;
        this.setState(
            () => {
                return {
                    cart: [...tempCart]
                };
            },
            () => {
                this.addTotals();
            }
        );
    };

Answer 1

[ned4ded]

Добрый день.

Метод getItem возвращает либо Products, либо undefined, если продукт не найден. Сделайте терминальное условие и укажите строгую типизация для используемого массива далее.

addToCart = (id: number) => {
  let tempProduct: Products[] = [...this.state.products];
  const item = this.getItem(id);
  if(item === undefined) {
    // ... инструкция при возникновении терминального условия, например, ошибка
    return;
  }
  const index = tempProduct.indexOf(item as Products); // строгая типизация для item
        
  // ...
};

Возможно, если вы укажите тип возвращаемого значения, то не потребуется терминальное условие (но это нужно проверить, я так навскидку не могу утверждать со 100% уверенностью). Такой подход подвержен багам при исполнении js.

getItem = (id: number): Products => {
  return this.state.products.find(item => item.id === id);
};

BTW, я бы не стал называть на вашем месте тип Products во мн. ч. Просто Product, т.к. по сути это единичная сущность.

Comments

[timonck]

addToCart = (id: number) => {
        let tempProduct: Products[] = [...this.state.products];
        
        const item = this.getItem(id)
        const index = tempProduct.indexOf(item as Products);
        
        const product = tempProduct[index];
        product.inCart = true;
        product.count = 1;
        const price = product.price;
        product.total = price;
        this.setState(
            () => {
                return {
                    products: tempProduct,
                    cart: [...this.state.cart, product]
                }
            }
            ,
            () => {
                this.addTotals();
            }
        );
    };

    increment = (id: number) => {
        let tempCart = [...this.state.cart];
        const selectedProduct = tempCart.find(item => item.id === id);
        
        const index = tempCart.indexOf(selectedProduct as Products);
        const product = tempCart[index];
        product.count = product.count + 1;
        product.total = product.count * product.price;
        this.setState(
            () => {
                return {
                    cart: [...tempCart]
                };
            },
            () => {
                this.addTotals();
            }
        );
    };

Это правильное решение?

Сделал так. Без терминального условия. Помогло. Спасибо большое)

[ned4ded]

timonck, Пожалуйста!

Вполне, если вы уверены, что искомый id точно есть и всегда будет в массиве

[timonck]

ned4ded, Можно пожалуйста еще вопрос
Теперь тут выбивает ошибку

addTotals = () => {
        let subTotal = 0;

        this.state.cart.map((item: Products) => (subTotal += item.total)); // error
        const total = subTotal;
        this.setState(() => {
            return {
                cartTotal: total
            };
        });
    };

TS2349: This expression is not callable.   Each member of the union type '((callbackfn: (value: Products, index: number, array: Products[]) => U, thisArg?: any) => U[]) | ((callbackfn: (value: never, index: number, array: never[]) => U, thisArg?: any) => U[])' has signatures, but none of those signatures are compatible with each other.

У this.state.cart тип тоже Products[]

Как ее исправить?

[ned4ded]

timonck, попробуйте указать строгий тип для cart (this.state.cart as Products[]).map();

[timonck]

ned4ded, Спасибо, помогло)