Calling addListener in TypeScript to add event listener to Capacitor Plugin

I am writing a Capacitor plugin for an Ionic Vue application. My question is pretty simple. I am getting an error when running “ionic build” in my Ionic app when it is trying to register the callback to subscribe to plugin events: “TS2339: Property ‘addListener’ does not exist on type ‘MyPlugin’.”

I have the following bit of code in my Ionic Vue project:

import { MyPlugin } from "@valmarc/myplugin"
.....
MyPlugin.addListener("myPluginEvent", myCallback)

The TypeScript compiler error occurs on the “addListener” call above. The above code was written against following capacitor documentation: Capacitor - build cross platform apps with the web.

The error is not particularly surprising, because the datatype of “MyPlugin” is defined as follows in the auto-generated TypeScript file “index.ts”:

import { registerPlugin } from '@capacitor/core';
import type { MyPluginPlugin } from './definitions';
const MyPlugin= registerPlugin<MyPluginPlugin>('MyPlugin', {
    web: () => import('./web').then(m => new m.MyPluginWeb()),
});
export * from './definitions';
export { MyPlugin };

The above auto-generated code seems to assign an object of type “MyPluginPlugin” to the MyPlugin variable, which is exported. The type “MyPluginPlugin” is defined as follows in the “definitions.ts” file:

export interface MyPlugin {
      createState(options: { source: string}): Promise<{ id: number}>;
      callFunction(options: { id: number, function: string}): Promise<{ result: string}>;
      closeState(options: { id: number}): Promise<void>;
}

My plugin interface above does not define the “addListener” method that is referred to in the Capacitor documentation I referred to above.

So obviously I am missing something here. Where is the “addListener” method supposed to be declared on the object that is returned from registerPlugin? Unless the addListener method is declared somewhere, there is going to be a TypeScript error.

2 posts - 1 participant

Read full topic