Request: Create Official Typescript Definition Repo

[DennisSmolek]

Hey guys, I totally love GSAP and used it off and on on projects for years.

I was responding to a different issue (#228) and it was pointed out that GSAP's typescript definitions on @types is bad and not officially supported.

@OSUBlake shot me over to a forum for a problem and there I saw a few other dev's talking about how their use of Angular and the TS issues with GSAP are blockers.

Blake had suggested adding a definition repo like Pixi does

And I think that is a great idea and I wanted to create a Github issue to discuss it more.

I read that the core team members aren't TS Devs but if you put them on the offical repo it would have a few advantages:

1. Your documentation can point to a trusted source
2. You can request from definitelyTyped to change their listed source to the "official" one
3. This would fix the @types issue that Angular folks are having
4. You can always maintain/control it vs hoping a community member would
5. Other folks can easily fork & Submit PR's to the public repo

Blake did a lot of work and put a great starting point in that forum post but for a lot of folks they would never find it, I think (if he's willing) it would be a good place to start for the repo..

[OSUblake]

Using @types is the recommended way to install definitions that aren't part of package, so it's a problem for anybody who wants to use TypeScript, not just Angular users.

But it goes beyond that. Some editors like VS Code and PhpStorm/WebStorm use those definitions for regular JavaScript files, which is causing problems for some GSAP users.

I have some really old definitions for GSAP (different than the ones posted on the forums). I'm getting ready to finish work on a project sometime this week. After that, I can start working on converting those old definitions to TypeScript 2.x.

I had to come up with a lot of workarounds to get inheritance working 100% because TypeScript didn't have a type for this at the time. Thankfully that is no longer an issue, so there's a lot of stuff that can be removed from them.

So let me rework some of the stuff I already have. From there, we can work on getting those definitions bundled with GSAP, and publish the new set to the @types organization.

[alan-agius4]

I won't suggest you create another repo for the typescript library, its another library to maintain for nothing and features and bugs need fo be coded twice.

There are 2 options which are suggested, 1 update the types in DefinitlyType, or add the typyings within this repo even though it is not a TS library. Something like https://github.com/tj/commander.js/tree/master/typings

I am willing to help in any of the options above, though need to understand a bit more what's the full API in order to write proper typings.

[DennisSmolek]

It wouldn't be another library, just another repo that things like DefinitlyTyped can point to for automated pulls when updated, is easy to send PR's to, etc.

I'm cool with it being in the main repos, but a lot of other projects prefer to put it on it's own

[robertmaxes]

so, i am hitting this issue as well using TweenMax in a typescript environment

not quite following who maintains the type definitions but is there a solution on the radar?

Details in case it helps:

this fails: TweenMax.to(t.ship.position,0.8,{x:500})

with this message

Argument of type '{ x: number; }' is not assignable to parameter of type 'TweenConfig'. Object literal may only specify known properties, and 'x' does not exist in type 'TweenConfig'.

but this works in TweenLite TweenLite.to(t.ship.position,0.8,{x:500})

{was looking to use yoyo though hence looking at TweenMax)

thanks ..

[jackdoyle]

Yep, I believe @OSUblake is working on it.

[OSUblake]

Hi @robertmaxes

Adding this should fix that problem.

declare module "gsap" {
  export interface TweenConfig {
    [p: string]: any;
  }
} 

[OSUblake]

Hi @alan-agius4

We're going to include the definitions in the main repo. Have you used GSAP before?

[alan-agius4]

@OSUblake, nope not really to be honest :)

[OSUblake]

@alan-agius4 That's fine. It looks like you have a lot of experience with TS, so I might need to pick your brain.

[farissi]

Hello @OSUblake, Any new updates regarding this issue? Thanks

[OrganicPixels]

@OSUblake just following up. Got a project I'm working on that could really use draggable and throw props 😬

[mujahid515]

Hi @OSUblake any updates with this?

[supermoos]

Any updates on this? I'm using these at the moment, but Webstorm keeps making import statements incompatible with webpack. The current types promps webstorm to make this kind of import: import TweenMax = gsap.TweenMax; which doesn't work with webpack, instead of import {TweenMax} from 'gsap';

[jvanoostveen]

We are currently re-evaluating the animation framework we use, and proper definitions is an absolute must-have for us. I've been a Greensock fan since the Flash days and I would love to be in the Greensock camp 💚 so I was wondering if there is any progress on this.

[jackdoyle]

@jvanoostveen Wow, a fan since the Flash days? Nice!

I'm not a TypeScript guy at all and I'm focused on some other GSAP enhancements at the moment, but are you saying neither of these work for you?:

https://www.npmjs.com/package/@types/gsap https://www.npmjs.com/package/@types/greensock

I know that @OSUblake was hoping to work on TypeScript definitions but I'm not sure how soon that'll be (he's a very skilled animator/developer whose time is in-demand). Are you interested in creating them yourself and sharing them?

As for the re-evaluation of your animation framework, feel free to reach out to me directly if you'd like to pick my mind about various factors and how GSAP compares to others (or what makes it unique). There are quite a few things that aren't immediately apparent to developers out there, but can be major factors (in my opinion). I just try not to make it a habit of publicizing specific deficiencies in other frameworks. Some things worth considering are listed here: https://greensock.com/why-gsap

Happy tweening!

[stefvw93]

This statement works and has correct typings: import { TweenLite } from "gsap";

But... There's no typings for "es6" style imports. import TweenLite from "gsap/TweenLite";

That's pretty annoying because the first example won't produce tree-shakable code :(

I came up with this solution, by importing classes and applying them on my own class, using typeof:

import "gsap/CSSPlugin";
import { TweenLite } from "gsap";
import TweenLiteModule from "gsap/TweenLite";

export default class Animation {
  public static TweenLite: typeof TweenLite = TweenLiteModule;
}

This can then be used like this:

import Animation from "@common/Animation";

const element = document.createElement("div");
element.innerHTML = "Hello, World!";

document.body.appendChild(element);

Animation.TweenLite.from(element, 1, {
  opacity: 0
});

Not the prettiest (though, not too ugly imo), but it enables you to only import the modules you actually need from gsap.

[jvanoostveen]

@jackdoyle Thanks for the heads up. I've been checking out the links and we are now in the process of migrating all animations, without definitions for now. I've tried if I could be of some assistance, but it will be too time consuming at the moment. I have some other questions, but I will use the forum for that :).

[garyo]

Hi folks; I'm looking for a good tweening lib for a Vue/Three.js/typescript project (I'll use it for animating 3d properties mostly) and GSAP looks good, but I'm 100% typescript and this issue is concerning. What's the current state of type-safety and type decls in GSAP?

[jackdoyle]

Welcome, @garyo. I'm heads-down on GSAP 3.0 but we do have some folks digging into the TypeScript definitions thing and hope to have some officially-supported definition files at some point. I'm personally not very familiar with TypeScript (sorry). For now, there are several from 3rd parties on NPM, as mentioned above. If anyone else wants to contribute by creating more up-to-date ones, we'd love to hear from you.

And yes, @garyo, GSAP should work great for animating pretty much anything in Vue/Three.js. Tons of people are doing that.

Happy tweening!

[OSUblake]

@garyo what are you concerned about? If you're having issues with importing, this thread might be helpful.

https://greensock.com/forums/topic/8571-right-source-for-typescript-definitions-files/?tab=comments#comment-91219

[fregante]

If the owner of the repo is not familiar with typescript, it’s best to leave the definitions on DefinitelyTyped, at least there they will be linted and seen by people who know TypeScript.

Adding Types here will not automatically fix them. If anyone can contribute can already do so on DefinitelyTyped

[jackdoyle]

With the release of GSAP 3, we now have a TypeScript definitions file (that's very much a work-in-progress) in the repo. We welcome input/suggestions, as I'm sure there will be improvements needed.