NickPiscitelli/Glider.js

TypeScript error - Value of type 'Static<HTMLDivElement>' is not callable.

alvinkonda opened this issue · 5 comments

I try to get the Glider instance as following as recommended on the Glider.js docs

var glider = Glider(document.querySelector('.glider'));

but I get the following error when using TypeScript

Value of type 'Static<HTMLDivElement>' is not callable. Did you mean to include 'new'?

Any idea how to solve this?

Glider is a constructor, so for creating Glider instance you need to use "new" operator.

var glider = new Glider(document.querySelector('.glider'));

Thank you for your reply.

Well, I don't need to create a new one, as I have already created it, I need to get the reference of it so that I can call its methods.

On the docs it says you can call like this, but it's not working with TypeScript
var glider = Glider(document.querySelector('.glider'));

Screenshot 2021-06-08 at 11 40 13 AM

Yeah, just noticed that.
This one doesn't work for me as well. However I always used this way:

var glider = new Glider(document.getElementById('glider'), {}); glider.setOption(); glider.refresh(true); glider.destroy();

Thank you for your reply.

Well, I don't need to create a new one, as I have already created it, I need to get the reference of it so that I can call its methods.

On the docs it says you can call like this, but it's not working with TypeScript
var glider = Glider(document.querySelector('.glider'));

Screenshot 2021-06-08 at 11 40 13 AM

Hey man! Just spent some time to figure it out.
First of all the words "A reference to the Glider.js object can be retrieved by re-calling Glider.js..." refer to "Events" section.
So I checked it and it really works inside any of custom events.

For example you created Glider.js instance above.
As the docs says "A reference to the Glider.js object can be retrieved by re-calling Glider.js with the glider elements as its sole argument", so we listen to custom event and get this, which is actually our ".glider" HTMLDivElement.
So for getting Glider instance we pass this to Glider object:

document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
  var glider = Glider(this);  //passing argument "this", which is HTMLDivElement to Glider object for getting our instance
  console.log(glider); // getting the Glider instance         
});

So to sum it up we can get the Glider instance with Glider object just in custom event.

Correct, any calls to the constructor on an initialized Glider will return the instance.