reactjs - Generisk funktion för två olika typer av gränssnitt i Typescript

Jag skriver en React-applikation (i TypeScript), där jag har två useState-objekt som kommer att tala om om ett tillägg/tillbehör har tagits bort från en produkt, för visuella ändamål. Produkter kan ha både tillbehör och tillägg.

Först och främst. Jag har två olika gränssnitt för tillägg och tillbehör:

interface IAddon {
    id: string;
    // some other values
}

interface IAccessory {
    id: string;
    // some other values
}

Båda mina ovanstående gränssnitt är ingående i ett modergränssnitt som kallas en produkt:

interface IProduct {
    rowId: string;
    accessories: IAccessory[];
    addons: IAddon[];
    // other values
}

Jag har skapat två useStates som kan innehålla en lista över inaktiva tillbehör och tillägg sorterade efter produktens nyckel, eftersom jag har en lista över produkter för vilka användare kan lägga till eller ta bort antingen tillbehör eller tillägg. När en produkt är inaktiv ska dess visuella utseende förändras.

interface IAddonsWithId {
    [rowId: string]: IAddon[]
}

interface IAccessoriesWithId {
    [rowId: string]: IAccessory[]
}

Jag försöker skapa en nyckelparsfunktion som fungerar för båda ovanstående gränssnitten och kan lägga till eller ta bort från vilken som helst av dem. Jag har de nedan nämnda useState.

const [inactiveAddons, setInactiveAddons] = useState<IAddonsWithId>({});
const [inactiveAccessories, setInactiveAccessories] = useState<IAccessoriesWithId>({});

och jag har skapat detta lilla gränssnitt för att hantera i följande funktion:

interface IKeyPair {
    rowId: string;
    objectId: string;
    object: IAddonsWithId | IAccessoriesWithId;
}

Så med det försöker jag skapa den här funktionen:

const sortOutObjectFromList = ({rowId, objectId, object}: IKeyPair) => {
    return {
        ...object,
        [rowId]: object[rowId].filter( // <--- This line troubles me (TS:2349)
            (item: IAddon | IAccessory) => item.id !== objectId,
        ),
    };
};

Idén med funktionen är att kunna gå igenom både min tilläggs- och accessorialistor och kunna sortera ut de objekt som borde ha tagit bort sitt inaktiva tillstånd. Jag kommer att behöva skapa en liknande funktion som lägger till objekt i den inaktiva listan, men först måste jag lista ut hur man uppfyller TSLint.

Jag får följande fel på raden som markerats ovan:

TS2349: This expression is not callable. Each member of the union type '{ <S extends IAddon>(callbackfn: (value: IAddon, index: number, array: IAddon[]) => value is S, thisArg?: any): S[]; (callbackfn: (value: IAddon, index: number, array: IAddon[]) => unknown, thisArg?: any): IAddon[]; } | { ...; }' has signatures, but none of those signatures are compatible with each other.

Min kod borde kunna kompileras som den är, men jag skulle vilja undvika TSLint-felet eftersom jag har ställt in pre-commit-hooks för att kontrollera det. Jag har försökt söka på Google och här på Stack Overflow, men har inte kunnat lista ut helt hur man åtgärdar detta fel.

Jag tror att problemet är blandningen av de två gränssnitten IAddon och IAccessory, eftersom de inte delar många av samma egenskaper, förutom id, vilket är den enda jag försöker matcha på.

Hur tar jag bort detta TSLint-fel?

Svar #1

Prova detta, jag tror att object[rowId] kommer som undefined.

const sortOutObjectFromList = ({rowId, objectId, object}: IKeyPair) => {
    return {
        ...object,
        [rowId]: 
         object[rowId]?.filter((item: IAddon | IAccessory) => item.id !== objectId) ?? []
    };
};