Typescript - Expose types

[benjaminbours]

Hello, I was just trying GSAP 3 for the first time and with Typescript, on an old project I would like to update.

I was pleased to see types declaration directly inside the repository, thanks for that, now we can remove the @types/gsap dependency.

But previously, I was using some types, so I could declare empty variable like this for exemple let myAnimation: TimelineLite; and then at a specific moment, I could assign a TimelineLite instance to this variable.

Now it seems everything is GSAPStatic.Tween or GSAPStatic.Timeline. But I can't import any types from the GSAP module. Don't you think it can be useful for the users to be able to import specific type like Tween or Timeline ? I know I can currently do it by importing TweenLite or TweenMax and then use them as let myAnimation: typeof TimelineLite; But I find it less explicit and ambiguous. Let's assume Tween and Timeline are the main types, so as a user of te library I need to import these types, no ? :)

Like I said, I just tried the new major version, so maybe I'm missing something, sorry if it's the case but it's a little detail I would find useful :)

What do you think ? 😄

[dipscom]

HI Benjamin, thanks for trying the Typescript bits out and for your input. Using Typescript is still a bit of black arts here so, bear with us.

I can see the usefulness of your suggestion and we shall look into the matter to make that possible.

Also, keep an eye out for other holes in the definitions, there are still plenty of bits there needing some TLC.

[OSUblake]

@benjaminbours

In the meantime, just do this.

let tl: GSAPStatic.Timeline;

tl = new TimelineLite();
// or 
tl = gsap.timeline();

TimelineLite/TimelineMax are just an alias for Timeline, and are for there for backwards compatibility.

In the next version, the type for a Timeline will probably be this.

let tl: gsap.core.Timeline;

That's where the Timeline class publicly resides in the library

[OSUblake]

In the next version, the type for a Timeline will probably be this.

let tl: gsap.core.Timeline;

It could be shortened to this if @jackdoyle adds exports for the Tween and Timeline class.

import { gsap, Timeline } from "gsap";

let tl: Timeline;
...
tl = gsap.timeline();

[jackdoyle]

It could be shortened to this if @jackdoyle adds exports for the Tween and Timeline class.

I think that's doable but the only potential sticking point is I think that ends up adding Tween/Timeline to the window by default in the ES5 files, since Rollup does so with every export. Not necessarily a deal-breaker, but I know there are other libraries out there that use "Tween" as a name and I'm wary of creating conflicts, you know? It'd also add to the kb slightly.

[OSUblake]

I know there are other libraries out there that use "Tween" as a name and I'm wary of creating conflicts

True. So maybe it's not a good idea.

[jackdoyle]

Agreed. I could export Tween/Timeline solely from gsap-core.js if that helps, because those don't all get added to the window. But that also means you can't do the import { Tween, Timeline } from "gsap". It'd have to be import { Tween, Timeline } from "gsap/gsap-core.js"; but I don't know if that's too awkward or not with the TypeScript stuff.

Perhaps it's simplest to stick with the gsap.core.Tween/Timeline stuff you recommended above?

[OSUblake]

Perhaps it's simplest to stick with the gsap.core.Tween/Timeline stuff you recommended above?

Yes. Let's just stick with the having users use gsap.core.* for now. If someone wants to shorten it, they can do this.

type Timeline = gsap.core.Timeline;

let tl: Timeline;

[dipscom]

@benjaminbours see what I told you about it being black arts? These two know what they're talking about wheres me... Well...

And the catch is, I am the one writing those definitions so, there will be plenty of steps back and re-writing as we go along.

[jackdoyle]

Should be resolved in the latest release (3.0.2)

[OSUblake]

@benjaminbours I have added some global types to help out with this. You can now do this in the latest version.

let tl: GSAPTimeline;

There are few other types like GSAPTween, GSAPTweenVars, GSAPTimelineVars. All the global types start with GSAP.

So you can make config objects like this.

let tlConfig: GSAPTimelineVars = {
  paused: true
};

gsap.timeline(tlConfig);