Typescript映射函数在映射后返回不同的类型

Question

我有三个接口

interface A {
productId: string;
productName?: string;
quantity: number;
}

interface B {
productId: string;
productName?: string;
company: string;
}

interface Product {
id: string;
name: string;

我有每个接口的数组。例如，这是针对产品

[{productId: '1', productName: 'pen', productId: '2', productName: 'paper'}]

我想映射我的A和B数组，过滤以在product数组中找到相应的产品，并将其添加到每个项目中。这是我的功能

const addProductNameToLineItem = (
products: Product[],
items: A[] | B[]
): A[] | B[] => {
return items.map((item) => {
const productInfo = products?.find(
(product: Product) => product.id === item?.productId
);
return {
...item,
productName: productInfo?.name
};
});
};

这不起作用，我得到一个类型错误，结果不可分配给类型a[]| B[]。

我尝试了一个功能过载，但无法使其工作。

如果我分解函数并复制它(一个只期望项A，一个只希望项B(，那么它就可以正常工作。

Answer 1

您需要使您的函数通用:

const addProductNameToLineItem = <Item extends A | B>(
products: Product[],
items: Item[]
): Item[] => {

这意味着返回类型与您传递的内容一致——例如，如果我给它A[]，那么我应该期望得到A[]。以前，如果我给它A[]，我会得到A[] | B[]，这是不正确的。

游乐场