Jump to content
GreenSock

BenjaminO

Typescript errors

Go to solution Solved by GreenSock,

Recommended Posts

Hello 👋,

 

I am using typescript in my project and I remarked that I have some types erros :

 

The property 'isPressed' doesn't exists on type 'Draggable'

 

due to the following code 

  class DraggableImg {
    constructor(Image: HTMLElement) {
      const drag = Draggable.create(proxy, {
        //Draggable options
      })[0]
      drag.isPressed // throw error
    }
  }

 

and also

 

The property 'pause' doesn't exists on type 'Function'    

 

due to the following code :

  class DraggableImg {
    constructor(Image: HTMLElement) {
      const xTo = gsap.quickTo(Image, 'x', {
        duration: 0.3
      })
      const yTo = gsap.quickTo(Image, 'y', {
        duration: 0.3
      })
      const drag = Draggable.create(proxy, {
        onPressInit(){
          xTo.pause() // throw error even with xTo.tween.pause()
          yTo.pause() // throw error even with yTo.tween.pause()
        }
      })[0]
    }
  }

 

Can I do something to fix that ? Many thanks in advance 🙂

Link to comment
Share on other sites

I looked in the docs and there is no property ’isPressed’ so the first error seems very logical to me. 
 

the second one I’m not sure about as I’m on mobile in transit right now I cannot really check deeper. I’m not a fan of anonymous closures and have limited experience with proxy in TypeScript - so I might be wrong, but my strong suspicion is, that the constants xTo and yTo defined in the class are either not reachable through the Draggaable create or are inferred not correctly by the TS compiler simply by attaching them outside to the constant. 
 

in either case explicitly typing the constants and/or casting them to gasp should satisfy the compiler. 

  • Like 1
Link to comment
Share on other sites

Hello @iDad5 and thank you for your response ! I took a piece of code from @GreenSock that you can find below where you can find the property ’isPressed’. Also I'd like to remove all this keywords to clarify the code but I am a bit lost in translation 😅

      const drag = Draggable.create(proxy, {
        onDrag() {
          xTo(this.x)
          yTo(this.y)
        },
        // Other options
      })[0]

 

Link to comment
Share on other sites

Well, there is no shame in not being able to follow @greensock as we are mere humans. 😬

I couldn’t follow his code especially on mobile right now. 
It might be that there is an (intentionally) undocumented property isPressed on Draggable, that‘s not in the definitions. 
 

haver your tried to use @ts-ignore to check if the code is working and it’s only a compiler issue? 

  • Like 1
Link to comment
Share on other sites

After digging in the docs I was thinking about this observer property (https://greensock.com/docs/v3/Plugins/Observer/isPressed). Maybe Draggable plugin is using it under the hood ? My code is working fine but I think it's always better avoiding ignoring warnings 😅.

 

I think it's also the same for the property tween which I can't reach as well.

 

After testing it seems that 

xTo.pause() // throw error + not working
xTo.tween.pause() // throw error but working

 

EDIT:

I think it is just a declaration problem as isPressed  is present in the source code  of the plugin

_setDefaults(Draggable.prototype, {
  // Other parameters
  isPressed: false
});

so maybe a future update of draggable.d.ts could  be nice @GreenSock 🙂:

readonly isPressed: boolean;

I found also at the very end of the doc https://greensock.com/docs/v3/GSAP/gsap.quickTo() that .tween is needed to actually access methods and properties of the tween instance so maybe there is also room for future declaration update ?

Link to comment
Share on other sites

  • Solution

I'll add isPressed in the next release to Draggable's TypeScript definitions. And no, Draggable doesn't use Observer under the hood. I can also add the tween property TypeScript definition to the .quickTo() function in the next release. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Solved in GSAP 3.11.0 ! Thank you for this great update 🙂

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×