I'm currently developing a Capacitor plugin and I'm in the process of defining possible event listeners for it.
Previously, all the possible event listeners were included in one large interface within the same file:
export interface Plugin {
addListener(
eventName: 'bannerShow',
listenerFunc: (info: any) => void,
): PluginListenerHandle;
addListener(
eventName: 'bannerHide',
listenerFunc: (info: string) => void,
): PluginListenerHandle;
addListener(
eventName: 'rewardShow',
listenerFunc: (info: SomeInterface) => void,
): PluginListenerHandle;
addListener(
eventName: 'rewardHide',
listenerFunc: (info: string) => void,
): PluginListenerHandle;
}
To make it easier to maintain, I have decided to separate the listeners into different files like this:
export interface Plugin extends Banner, Reward {
// General plugin calls here
}
// Separate file for Banner interface
export interface Banner {
specificBannerFunction(): void;
addListener(
eventName: 'bannerShow',
listenerFunc: (info: any) => void,
): PluginListenerHandle;
addListener(
eventName: 'bannerHide',
listenerFunc: (info: string) => void,
): PluginListenerHandle;
}
// Separate file for Reward interface
export interface Reward {
specificRewardFunction(): string;
addListener(
eventName: 'rewardShow',
listenerFunc: (info: SomeInterface) => void,
): PluginListenerHandle;
addListener(
eventName: 'rewardHide',
listenerFunc: (info: string) => void,
): PluginListenerHandle;
}
The issue arises when Typescript throws the following error message:
Interface 'Plugin' cannot simultaneously extend types 'Banner' and 'Interstitial'. Named property 'addListener'of types 'Banner' and 'Interstitial' are not identical
How can I inform TypeScript that I am overloading that function call?