带有Jquery插件的Ionic 3

Question

Hi there people I hope you can help me with this one. I've been trying from two days to use Jquery Plugin with Ionic 3 but to no avail, I'm using it for my project and if I could, I would avoid it but I don't have time or enough knowledge to make custom thing.

I'm trying to create a roulette and I'm using roulette.js plugin, but I keep receiving error from webpack that WEBPACK_IMPORTED_MODULE_2_jquery (...).roulette is not a function.

Now I tried couple of things I turned js file from library into .ts and then I cast it to any as shown below. I also added it to index.d.ts. I created Jquery interface but no luck. Is there something I'm missing? I installed jquery and @types/jquery, Jquery works like charm, only plugin is not working.

component.ts

   ionViewDidLoad() {

    ((<any>$('div.roulette')) as any).roulette();
  }

roulette.ts

     var pluginName = 'roulette';
$.fn[pluginName] = function(method, options) {
  return this.each(function() {
    var self = $(this);
    var roulette = self.data('plugin_' + pluginName);

    if (roulette) {
      if (roulette[method]) {
        roulette[method](options);
      } else {
        console &&
          console.error(
            'Method ' + method + ' does not exist on jQuery.roulette'
          );
      }
    } else {
      roulette = new (Roulette(method) as any)();
      roulette.init(self, method);
      $(this).data('plugin_' + pluginName, roulette);
    }
  });
};

export { Roulette };

index.d.ts

interface Jquery {
      roullete: (options:any) => void
    }

Answer 1

So after long searching about a week, i found out that you have to add you plugin to jquery typings

interface JQueryStatic {
  pluginName: (options:any) => void
}