如何向 TypeScript 中的对象添加具有值的新键？

Question

我有一个函数，它的任务是计算打折后的产品价格。但是结果我得到了没有这个值（totalPrice）的对象。我哪里出错了？

const arrayObj = [
    {
        basePrice: 12,
        discount: 3,
    },
    {
        basePrice: 12,
        discount: 2,
    },
    {
        basePrice: 8,
        discount: 2,
    },
];

interface Product {
    basePrice: number;
    discount: number;
    totalPrice?: number;
}
const countTotalPrice = (products: Product[]): Product[] => {
    const calculateTotalPrice = (
        basePrice: number,
        discount: number,
        totalPrice?: number
    ): void => {
    
        totalPrice = basePrice - discount;
    };

    products.forEach((product) =>
        calculateTotalPrice(
            product.basePrice,
            product.discount,
            product.totalPrice
        )
    );
    return products;
};
console.log(countTotalPrice(arrayObj));

Answer 1

试试这个

const countTotalPrice = (products: Product[]): Product[] => {
const calculateTotalPrice = (
 p:Product 
): void => {
    

    p.totalPrice = p.basePrice -p. discount;
};

products.forEach((product) =>
    calculateTotalPrice(
        product
    )
);
return products;
};

Answer 2

您没有修改数组中的产品。您有两个选择：

使用products.forEach并传入一个修改产品的函数。 Return 修改产品。
使用 products.map 并传入一个函数，该函数获取一个产品并使用额外的属性、return 映射结果创建新对象。

我认为第二种方法在 JS/TS 中更为惯用。

const countTotalPrice = (products: Product[]): Product[] => {
  return products.map((product) => 
    ({    // the parentheses are necessary in this position
          // we want object literal, not code block
          ...product,
          totalPrice: product.basePrice - product.discount
    })
  );
}

Playground link

Answer 3

您可以使用 Array.prototype.map() combined with Destructuring assignment:

interface Product {
  basePrice: number;
  discount: number;
  totalPrice?: number;
}

const arrayObj: Product[] = [{ basePrice: 12, discount: 3 },{ basePrice: 12, discount: 2 },{ basePrice: 8, discount: 2 },];

const countTotalPrice = (products: Product[]): Product[] =>
  products.map((p) => ({
    ...p,
    totalPrice: p.basePrice - p.discount,
  }));

没有 TypeScript 的代码示例：

const arrayObj = [{basePrice: 12,discount: 3,},{basePrice: 12,discount: 2,},{basePrice: 8,discount: 2,},]

const countTotalPrice = (products) =>
  products.map((p) => ({
    ...p,
    totalPrice: p.basePrice - p.discount,
  }))

console.log(countTotalPrice(arrayObj))

如何向 TypeScript 中的对象添加具有值的新键？

How can I add a new key with a value to an object in TypeScript?

javascript

object

typescript