How to get the type of GSAP tween variables in TypeScript

[Ishan Shishodiya]

I am using GSAP in React with Typescript and was wondering how I can store the GSAP tween variables in separate variable. I can still do something like the code below but it'll be nice if I am able to access the type for these tween variables, this way I'll be able to use Intellisense for easier code writing.

 

const tweenVar = {
    opacity: 0,
    x: 250,
    ease: "sine.out",
    duration: 1,
  };
  gsap.from(pageRef.current, tweenVar);

On hovering over fromI can see the type to be something like gsap.TweenVars but am not able to import it into the file.

[GreenSock]

Hi @Ishan Shishodiya

 

I'm not a TypeScript guy, but GSAP does come with TypeScript definition files in the repo. Did you install via NPM? They're in the /types/ directory. Maybe you need to configure something on your end to look at that directory? 

[Ishan Shishodiya]

5 hours ago, GreenSock said:

Hi @Ishan Shishodiya

 

I'm not a TypeScript guy, but GSAP does come with TypeScript definition files in the repo. Did you install via NPM? They're in the /types/ directory. Maybe you need to configure something on your end to look at that directory? 

I can see a types folder inside the gsap module but cannot import it using import {} from "gsap/types" as it shows an error that "gsap/types/index.d.ts" is not a module. So instead I tried importing it standalone using import "gsap/type" and then doing the code below but am confused on what to do next?

 

// ts.config.json
{
    "types": ["gsap/types"]
}

[GreenSock]

Yeah, you don't "import" TypeScript definitions as if they were a JavaScript module. Again, I'm not a TypeScript expert but it definitely seems like a configuration thing on your end with your editor and I can't really speak to that, sorry. 
 

For almost everyone, all they have to do is npm install gsap and it automatically works in their editor so I'm not quite sure what to tell you. As far as I know, you typically don't have to do anything special. Here's a post from 2019 that indicates as much: 

 

I'd be happy to answer any GSAP-specific questions but if you need help getting your editor set up with TypeScript, that might be a better fit for different forums. Or maybe someone else with more TypeScript configuration knowledge can chime in. @Rodrigo? 

[Rodrigo]

Hi,

 

I'm far from being a TypeScript expert, but in my experience everything is there in the way Jack and Blake mention in this and the thread Jack linked above.

 

Just create your project and then install GSAP and the definitions are there and the code editor should pick them up. I normally use VSCode and I don't have any issues when setting up a project with GSAP and normally I don't have to tinker with the tsconfig file of the project.

 

Hopefully this helps.

Happy Tweening!

[FloodGames]

My editor also doesn't pick it up. Maybe something wrong in our tsconfig.json

Anyway this works:
 

export type TweenList = gsap.core.Tween[]

export type Tween = gsap.core.Tween

 

Result:

[ZachSaucier]

(edited) You should be able to use the GSAPTween type:

function handleComplete(this: GSAPTween) {
  (this.targets()[0] as HTMLElement)?.classList.remove("active");
}

Maybe it'd be good to export the common types (like Tween) from GSAP's core so that we can import the type directly and avoid using gsap.core?

[GreenSock]

26 minutes ago, ZachSaucier said:

Maybe it'd be good to export the common types (like Tween) from GSAP's core so that we can import the type directly and avoid using gsap.core?

Can you elaborate a bit? Aren't the TypeScript definitions adequate? Are you suggesting we add more exports to the actual GSAP package itself (unrelated to TypeScript)? Like Tween and Timeline? If so, I'm a bit concerned about people accessing those directly to create tweens/timelines. Then people's codebases will depend on those which makes it awkward in future releases to ever get rid of them. I've also seen confusion around people using constructors vs calling the object as a function directly...

new Tween(...); // correct
Tween(...); // incorrect

So exposing stuff like that opens us up to more confusion. If we just have folks use the standard methods like gsap.to(...) and gsap.timeline(...) we minimize that. 

 

I'm not much of a TypeScript guy so I very well may be missing something obvious here about what would be most helpful. 

[ZachSaucier]

@GreenSock After investigating it, I realized GSAP is exporting the tween type like I was suggesting. It's just named differently: GSAPTween (I was expecting just Tween to be correct). I assume there's some reason for those to have the GSAP prefix? 

I edited my post above to be more correct and strike out the comment about adding this.

[GreenSock]

My assumption is that Blake was trying to make it more obvious and compatible, like if someone was using Tween.js or some other library that might also have a Tween type. 🤷‍♂️ It’s probably a bad idea to change it now, though, since that could break legacy code. Perhaps it’d be worthwhile to alias it though (basically export a new Tween and Timeline type that’s equal to GSAPTween/GSAPTimeline). Thoughts?