Ein Ausdruck, dessen Typ keine Anrufsignatur hat, kann nicht aufgerufen werden

Ich habe Apfel und Birnen - beide haben ein isDecayedAttribut:

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

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

Und beide Sorten können (mehrmals) in meinem Obstkorb sein:

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

Nehmen wir an, mein Korb ist vorerst leer:

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

Jetzt nehmen wir zufällig eine Sorte aus dem Korb:

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

Und natürlich mag niemand verfallene Früchte, also pflücken wir nur die frischen:

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

Leider sagt mir Typescript:

Ein Ausdruck, dessen Typ keine Anrufsignatur hat, kann nicht aufgerufen werden. Geben Sie '((callbackfn: (Wert: Apple, Index: Nummer, Array: Apple []) => any, thisArg?: Any) => Apple []) | ein ... 'hat keine kompatiblen Rufsignaturen.

Was ist hier falsch - ist es nur so, dass Typescript keine frischen Früchte mag oder ist dies ein Typescript-Fehler?

Sie können es selbst im offiziellen Typescript Repl versuchen .

TypeScript unterstützt die strukturelle Typisierung (auch als Ententypisierung bezeichnet). Dies bedeutet, dass Typen kompatibel sind, wenn sie dieselben Mitglieder verwenden . Ihr Problem ist das Appleund Pearteilen Sie nicht alle ihre Mitglieder, was bedeutet, dass sie nicht kompatibel sind. Sie sind jedoch mit einem anderen Typ kompatibel, der nur das isDecayed: booleanMitglied hat. Aufgrund der strukturellen Typisierung, Sie don‘Notwendigkeit zu erben Appleund Pearvon einer solchen Schnittstelle.

Es gibt verschiedene Möglichkeiten, einen solchen kompatiblen Typ zuzuweisen:

Typ während der Variablendeklaration zuweisen

Diese Anweisung lautet implizit Apple[] | Pear[]:

const fruits = fruitBasket[key];

Sie können einfach einen kompatiblen Typ explizit in Ihrer Variablendeklaration verwenden:

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

Für zusätzliche Wiederverwendbarkeit können Sie den Typ auch zuerst definieren und dann in Ihrer Deklaration verwenden (beachten Sie, dass die Schnittstellen Appleund Pearnicht geändert werden müssen):

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

Für die Operation auf einen kompatiblen Typ umwandeln

Das Problem mit der angegebenen Lösung besteht darin, dass der Typ der fruitsVariablen geändert wird. Dies ist möglicherweise nicht das, was Sie wollen. Um dies zu vermeiden, können Sie das Array vor der Operation auf einen kompatiblen Typ eingrenzen und den Typ dann auf denselben Typ zurücksetzen wie fruits:

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

Oder mit dem wiederverwendbaren FruitTyp:

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

Der Vorteil dieser Lösung besteht darin, dass beide fruitsund freshFruitsvom Typ sind Apple[] | Pear[].

Wie in der Github-Ausgabe erwähnt, die ursprünglich von @peter in den Kommentaren verlinkt wurde:

const freshFruits = (fruits as (Apple | Pear)[]).filter((fruit: (Apple | Pear)) => !fruit.isDecayed);

Erstellen Sie möglicherweise eine gemeinsam genutzte FruitSchnittstelle, die isDecayed bereitstellt. fruitsist jetzt vom Typ, Fruit[]sodass der Typ explizit sein kann. So was:

interface Fruit {
    isDecayed: boolean;
}

interface Apple extends Fruit {
    color: string;
}

interface Pear extends Fruit {
    weight: number;
}

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


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

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

Ich hatte das gleiche Problem mit numeral, einer JS-Bibliothek. Das Update bestand darin, die Typisierungen mit diesem Befehl erneut zu installieren:

npm install --save @types/numeral