无法调用类型缺少调用签名的表达式

我有苹果和梨——两者都有isDecayed属性：

interface Apple {
    color: string;
    isDecayed: boolean;
}

interface Pear {
    weight: number;
    isDecayed: boolean;
}

这两种类型都可以在我的水果篮中（多次）：

interface FruitBasket {
   apples: Apple[];
   pears: Pear[];
}

现在假设我的篮子是空的：

const fruitBasket: FruitBasket = { apples: [], pears: [] };

现在我们从篮子里随机取出一种：

const key: keyof FruitBasket = Math.random() > 0.5 ? 'apples': 'pears'; 
const fruits = fruitBasket[key];

当然，没有人喜欢腐烂的水果，所以我们只挑选新鲜的：

const freshFruits = fruits.filter((fruit) => !fruit.isDecayed);

不幸的是 Typescript 告诉我：

无法调用类型缺少调用签名的表达式。类型 '((callbackfn: (值: Apple, 索引: 数字, 数组: Apple[]) => 任何, thisArg?: 任何) => Apple[]) | ...' 没有兼容的呼叫签名。

这里出了什么问题 - 仅仅是 Typescript 不喜欢新鲜水果还是这是 Typescript 的错误？

你可以自己去官方试试打字稿复制 https://www.typescriptlang.org/play/#src=interface%20Apple%20%7B%0D%0A%20%20%20%20color%3A%20string%3B%0D%0A%20%20%20%20isDecayed%3A%20boolean%3B%0D%0A%7D%0D%0A%0D%0Ainterface%20Pear%20%7B%0D%0A%20%20%20%20weight%3A%20number%3B%0D%0A%20%20%20%20isDecayed%3A%20boolean%3B%0D%0A%7D%0D%0A%0D%0Ainterface%20FruitBasket%20%7B%0D%0A%20%20%20%20apples%3A%20Apple%5B%5D%3B%0D%0A%20%20%20%20pears%3A%20Pear%5B%5D%3B%0D%0A%7D%0D%0A%0D%0A%0D%0Aconst%20fruitBasket%3A%20FruitBasket%20%3D%20%7B%20apples%3A%20%5B%5D%2C%20pears%3A%20%5B%5D%20%7D%3B%0D%0Aconst%20key%3A%20keyof%20FruitBasket%20%3D%20Math.random()%20%3E%200.5%20%3F%20'apples'%3A%20'pears'%3B%20%0D%0Aconst%20fruits%20%3D%20fruitBasket%5Bkey%5D%3B%0D%0A%0D%0Aconst%20freshFruits%20%3D%20fruits.filter((fruit)%20%3D%3E%20!fruit.isDecayed)%3B.

TypeScript 支持结构类型（也称为鸭子类型），这意味着当类型共享相同的成员时，它们是兼容的 https://www.typescriptlang.org/docs/handbook/type-compatibility.html。你的问题是Apple and Pear不要共享其所有成员，这意味着它们不兼容。然而，它们与另一种类型兼容，该类型仅具有isDecayed: boolean成员。由于结构类型，您不需要继承Apple and Pear从这样的界面。

有多种方法可以分配此类兼容类型：

在变量声明期间指定类型

该语句被隐式键入Apple[] | Pear[]:

const fruits = fruitBasket[key];

您可以简单地在变量声明中显式使用兼容类型：

const fruits: { isDecayed: boolean }[] = fruitBasket[key];

为了获得额外的可重用性，您还可以首先定义类型，然后在声明中使用它（请注意，Apple and Pear接口不需要改变）：

type Fruit = { isDecayed: boolean };
const fruits: Fruit[] = fruitBasket[key];

转换为操作的兼容类型

给定解决方案的问题在于它改变了fruits多变的。这可能不是您想要的。为了避免这种情况，您可以在操作之前将数组缩小到兼容的类型，然后将类型设置回与fruits:

const fruits: fruitBasket[key];
const freshFruits = (fruits as { isDecayed: boolean }[]).filter(fruit => !fruit.isDecayed) as typeof fruits;

或者使用可重复使用的Fruit type:

type Fruit = { isDecayed: boolean };
const fruits: fruitBasket[key];
const freshFruits = (fruits as Fruit[]).filter(fruit => !fruit.isDecayed) as typeof fruits;

该解决方案的优点是，fruits and freshFruits将是类型Apple[] | Pear[].