通用 function 用于 Typescript 中的两种不同类型的接口

Question

I am writing a React application (in TypeScript), in which I've two useState objects that will tell if an addon/accessory have been removed from a product, for visual purposes. Products can have both accessories and addons.

First things first. I have two different interfaces for addons and accessories:

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

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

Both of my above interfaces are contained within a parent interface known as a product:

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

I have created two useStates that can contain a list of inactive accessories and addons sorted by the key of the product, as I have a list of products for which users can add or remove either accessories or addons. Once a product is inactive it's visuals are supposed to change.

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

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

I am trying to create a key pair function that work for both above interfaces and can add or remove from either of them. I have the below mentioned useStates.

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

and I have created this tiny interface to handle in the following function:

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

So with that I'm trying to create this function:

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

The idea of the function is to be able to run through both my addon and accessory lists and be able to sort out the item that should have removed it's inactive state. I will have to create a similar function that will add items to the inactive list, but first I need to figure out how to satisfy TSLint.

I am getting the following error on the line marked above:

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.

My code should be compileable, as is, but I'd like to avoid the TSLint error as I have set up pre-commit hooks to check for that. I've tried searching google and here on stackoverflow, but have been unable to figure out completely how to fix this error.

I believe the issue is the mix of the two interfaces IAddon and IAccessory , as they do not share many of the same properties, except for the id . which is the only one I try to match on.

How do I remove this TSLint error?

Answer 1

Try this, I think object[rowId] is coming as undefined.

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