javascript - Kilden har 2 element(er), men målet tillader kun 1. Typescript spread-operator

Jeg forsøger at sprede alle værdier i arrayet og tilføje et nyt objekt i min reducer.

min tilstandsgrænseflade:

export interface IBasketState {
products: [
    {
        id: number | undefined;
        name: string;
        smallQ: number; //small packages quantity
        smallTotalP: number; //price for all small packages
        largeQ: number; //large packages quantity
        largeTotalP: number; //price for all large packages
        orderPrice: number; //total price of this order
    }
  ];
    totalPrice: number;
}

Reducer tilføj vare-funktion:

const BasketReducer = (basketState: IBasketState, action: IBasketAction): IBasketState => {
//ADD ITEM
if (action.type === "Add item") {
    const { id, name, smallQ, smallP, largeQ, price } = action.payload;
    let smallTotalPrice = smallQ * smallP; //total price for small packages
    let largeTotalPrice = largeQ * price; //total price for large packages
    const orderPrice = smallTotalPrice + largeTotalPrice; //total price of this order
    return {
        products: [
    ...basketState.products, //--> **THIS IS NOT WORKING**
            {
                id: id,
                name: name,
                smallQ: smallQ,
                smallTotalP: smallTotalPrice,
                largeQ: largeQ,
                largeTotalP: largeTotalPrice,
                orderPrice: orderPrice,
            },
        ],
        totalPrice: basketState.totalPrice + orderPrice,
    };
}
//Default action
return basketState;
};

Når jeg holder musen over ...basketState.products, får jeg en fejl, der siger:

Type '{ id: number | undefined; name: string; smallQ: number; smallTotalP: number; largeQ: number; largeTotalP: number; orderPrice: number; }, { id: number | undefined; name: string; smallQ: number; smallTotalP: number; largeQ: number; largeTotalP: number; orderPrice: number; }' kan ikke tildeles typen '[{ id: number | undefined; name: string; smallQ: number; smallTotalP: number; largeQ: number; largeTotalP: number; orderPrice: number; }]'.

Kilden har 2 element(er), men målet tillader kun 1.ts(2322)

BasketContext.tsx(8, 2): Den forventede type kommer fra egenskaben 'products', som er erklæret her på typen 'IBasketState'

Er problemet det faktum, at jeg i mit interface kun har deklareret ét objekt i products-arrayet, og at jeg nu forsøger at have 2? Hvis ja, hvordan kan jeg omgå det?

Svar #1

Dit gæt er korrekt: products-egenskaben er typet som en tuple, der indeholder præcis ét element.

Hvad du kunne prøve er at gøre det til et array af produkter:

interface BasketState {
    products: Product[];
    totalPrice: number;
}

interface Product {
    id: number | undefined;
    name: string;
    smallQ: number;
    smallTotalP: number;
    largeQ: number;
    largeTotalP: number;
    orderPrice: number;
}

Du kan læse mere om tuple-typer i TypeScript her: https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types

Svar #2

Du har erklæret products som en tuple med et enkelt objekt ([T]), i stedet for en liste (T[] eller Array<T>). Så med andre ord, det du ønsker er:

export interface IBasketState {
products: Array<{
        id: number | undefined;
        name: string;
        smallQ: number; //small packages quantity
        smallTotalP: number; //price for all small packages
        largeQ: number; //large packages quantity
        largeTotalP: number; //price for all large packages
        orderPrice: number; //total price of this order
    }>;
    totalPrice: number;
}

Nogle gange kan det være bedre at definere typen af elementet i stedet for listen, så dit interface kan se sådan ud:

export interface IProduct = {
    id: number | undefined;
    name: string;
    smallQ: number; //small packages quantity
    smallTotalP: number; //price for all small packages
    largeQ: number; //large packages quantity
    largeTotalP: number; //price for all large packages
    orderPrice: number; //total price of this order
}

export interface IBasketState {
    products: IProduct[];
    totalPrice: number;
}

Relaterede artikler