Jump to content
Search Community

Right source for Typescript definitions files?

Friebel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'd like to change to programming in Typescript, because it's a typed script and although Javascript can do everything, I'd like to work with better intellisense, more familiar OO and stuff. It's great :)


I figured to use external libraries in Javascript, I need definition files to get the intellisense working.


 


On DefinitelyTyped there happens to be an Greensock definition file for Typescript. 


(https://github.com/borisyankov/DefinitelyTyped/tree/master/greensock)


Is this the right place to get the Typescript definitions for the GSAP (i.o.w. is it created by Greensock), or is there a more 'official' source for this somewhere, created by Greensock? I'd like to have the real thing, that keeps up with the updates ;)


 


Would be great if there is some file updated by Greensock somewhere, 'cause Greensock and Typescript are a killer combination I'd say :)


 


Thanks!

Link to comment
Share on other sites

That particular definition file was NOT created by GreenSock (we haven't created any), but I have no reason to believe it is flawed in any way either. At this point we don't have any plans to create and maintain a TypeScript definitions file but we very well may do so in the future if there's enough customer demand. I have never personally used TypeScript, although I hear nice things about it. If you discover any problems with that file you linked to, let us know and maybe we can reach out to the author to have him make any corrections necessary. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Let me encourage you to explore TypeScript - especially for programmer used to OOP languages like ActionScript, TypeScript goes a long way to ameliorating the sloppiness of Javascript.

The basic definitions file for greensock from DefinitelyTyped works great except it doesn't cover SplitText (and possibly other additions to the core library), in which case the transpiler throws errors (though fortunately still outputting valid Javascript).

Link to comment
Share on other sites

I love using TypeScript! It's not another language like Coffee or Dart, but a superset of JavaScript similar to how LESS and SASS are to CSS. TypeScript also lets you use a lot of ES6 features like fat arrow functions and modules.
 
I'm working on another definition file because the one on DefinitelyTyped is out of date, missing types, and doesn't include any overloads for get/set methods. I'm also including JSDoc comments so a description with all the arguments will popup. I'll post here when I'm done and will also send a pull request to DefinitelyTyped so they can update the definition.
 
To get around errors because a definition is missing, you can just declare it.
 

declare var SplitText;
declare var Draggable;

You might also get errors on your targets with the current definition, so you should update the targets in the definition file to be type any instead of Object
 

static to(target: any, duration: number, vars: Object): TweenMax;
  • Like 2
Link to comment
Share on other sites

  • 8 months later...

I've been working with Jack and going through the source code to make an accurate and complete set of definitions. It's totally different from the one on Definitely Typed, and I spent a lot of time making sure all the GSAP classes are correctly extended, and that you can easily extend them with your own classes and the correct type. I also added in easy way to extend a global vars interface so that you will have code completion while creating your config objects.

 

It's still a work in progress, and I don't know when they will be done because I have other stuff to work on at the moment. You can check out what I have so far, but I can't guarantee how well they work because I still have some plugins and tests to write. There's also a bunch JSDoc comments I need to add, which is a pretty time consuming process because there is no easy way to copy them from the website.

 

http://codeshare.io/aMbV4

  • Like 2
Link to comment
Share on other sites

I hope I can get it on Definitely Typed, but they're kind of picky with rewrites and want permission from the previous author before accepting it. I know the last one took 4 months to go through, which is kind of ridiculous. If not, maybe Jack could add it the GSAP repo so that it would come with the other files. I know a couple of other libraries like Phaser include their definitions with their repo.

 

One cool thing about the definitions is that they can work with regular JavaScript. Of course this all depends on your editor/IDE, and I haven't really tested which ones have this capability.

 

I also need to make a README.md file and explain how to extend some classes and interfaces that use generics, a concept a lot people might not be familiar with. If you are curious about how some of the classes are written, I had to come up with an unusual pattern to match the structure of GSAP, which you can check out on StackOverflow.

 

http://stackoverflow.com/a/30019474/2760155

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

I just received a PM asking about the file on codeshare because it's is no longer available. Looks like they delete stuff after a certain amount of time. My bad. I didn't know they would do that.  :-(

 

For the time being, I would suggest to just use the definitions on DefinitelyTyped (DT). Yes, they're horribly out of date (v 1.15.1), and missing some important definitions like Draggable, but should be ok for most usage.

 

The good news is that I already started on a new version of the definitions to take advantage of some of the new features in TypeScript. You can now use "this" as a type, which was the hardest thing to work around in the old definitions because I had to write the same thing over and over again for all the classes that extended another class. Since this is now possible, I can probably reduce the size of the definitions by a good 50%, all while making maintaining them much, much easier!
 
declare class TimelineLite {
  to(target: Object, duration: number, vars: Object, position?: any): this;
}

declare class TimelineMax extends TimelineLite {
  repeat(value: number): this;
  repeat(): number;
}

// 'to' now returns the correct type without having to 
// duplicate it in the TimelineMax definition
var tl = new TimelineMax()
  .to("#foo", 1, { x: 100 })
  .repeat(3);

In the meantime, if you need any help with the definitions on DT, just ask me. I know everything that is wrong with them and how to work around them. For example, that little snippet of code will create an error because 'to' returns TimelineLite, which has no repeat method. To fix it you could manually add 'to' to the TimelineMax definition with the correct return type, or do casting, which can make your code hard to read.

var tl = (<TimelineMax>new TimelineMax()
  .to("#foo", 1, { x: 100 }))
  .repeat(3);

Also, keep in mind that definitions are not required. They're nice to have, but not necessary. So you can just declare things that are missing.

declare var MorphSVGPlugin;

// No errors
var bezier = MorphSVGPlugin.pathDataToBezier("#foo");

I'll post back here when I have a good working version that will pass all my tests.

Link to comment
Share on other sites

  • 2 months later...

Hi @jmadriz

 

Nice to hear from other TypeScript users! There's been a lot of exciting new features added to TypeScript recently, and I want to get GreenSock up-to-date.

 

First off, have you heard that DefinitelyTyped is now deprecacted, and everything is moving to Typings? If you haven't, here's the notice. This means that GreenSock should now start maintaining their own definitions and including them in all their packages. That's what this GitHub issue is in reference to.

https://github.com/greensock/GreenSock-JS/issues/140

 

Right now my definitions are part of a private project, so there's no public repo. I'm going to start working on those definitions again in the next week or so, and see if I can get them added to the GreenSock repo.

 

What I could use help on when I start working on them, is filling out the all the JSDoc comments as I left most of them blank. Also, another thing I was working on but didn't finish was adding CSS properties. I know most definitions that work with CSS don't do that, and it's not necessary, maybe even overkill, but I wanted to have a nice list of CSS properties so that they would show up for autocompletion inside all the different plugins. 

 

If you want, I can send you a PM when I start working on them?

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 months later...
  • 4 weeks later...

Sorry guys, I still haven't been able to make a public repo yet. I'm currently dealing with a major issue after installing the latest version of TypeScript on Visual Studio.

https://github.com/Microsoft/TypeScript/issues/7204

 

I'll let you know when I get things back up and running.

Just want to say thanks for doing this. Let me know if you need any help.

Link to comment
Share on other sites

  • 2 months later...
  • 1 year later...
  • 1 year later...

Try this one. They're not 100% complete, but should be ok for normal usage.

 

npm install --save @types/gsap

 

 

If you import files individually like this...

 

import { TweenLite, Linear } from "gsap/TweenLite";
import { TweenMax } from "gsap/TweenMaxBase";
import { TimelineMax } from "gsap/TimelineMax";
import "gsap/CSSPlugin";

 

 

Or all of them like this this...

 

import {
  CSSPlugin,
  TweenMax,
  TimelineMax,
  Linear
} from "gsap/all";

 

 

Then you'll need to declare the modules in a d.ts file somewhere. So something like this. This isn't complete. Just showing how.

 

declare module "gsap/TweenLite" {

  export {
    TweenLite as default,
    TweenLite,
    Animation,
    Ease,
    Linear,
    Power0,
    Power1,
    Power2,
    Power3,
    Power4,
    TweenPlugin
  } from "gsap";

  export class EventDispatcher { }
}

declare module "gsap/TweenMaxBase" {
  export { TweenMax as default, TweenMax } from "gsap";
}

declare module "gsap/TimelineLite" {
  export { TimelineLite as default, TimelineLite } from "gsap";
}

declare module "gsap/TimelineMax" {
  export { TimelineMax as default, TimelineMax } from "gsap";
}

declare module "gsap/CSSPlugin" {

  class CSSPlugin { }
  export { CSSPlugin as default };
}

declare module "gsap/all" {

  import CSSPlugin from "gsap/CSSPlugin";

  export { CSSPlugin };
  export * from "gsap/TweenLite";
  export * from "gsap/TweenMaxBase";
  export * from "gsap/TimelineLite";
  export * from "gsap/TimelineMax";
}

 

 

 

  • Like 5
Link to comment
Share on other sites

3 hours ago, OSUblake said:

Try this one. They're not 100% complete, but should be ok for normal usage.

 


npm install --save @types/gsap

 

 

If you import files individually like this...

 


import { TweenLite, Linear } from "gsap/TweenLite";
import { TweenMax } from "gsap/TweenMaxBase";
import { TimelineMax } from "gsap/TimelineMax";
import "gsap/CSSPlugin";

 

 

Or all of them like this this...

 


import {
  CSSPlugin,
  TweenMax,
  TimelineMax,
  Linear
} from "gsap/all";

 

 

Then you'll need to declare the modules in a d.ts file somewhere. So something like this. This isn't complete. Just showing how.

 


declare module "gsap/TweenLite" {

  export {
    TweenLite as default,
    TweenLite,
    Animation,
    Ease,
    Linear,
    Power0,
    Power1,
    Power2,
    Power3,
    Power4,
    TweenPlugin
  } from "gsap";

  export class EventDispatcher { }
}

declare module "gsap/TweenMaxBase" {
  export { TweenMax as default, TweenMax } from "gsap";
}

declare module "gsap/TimelineLite" {
  export { TimelineLite as default, TimelineLite } from "gsap";
}

declare module "gsap/TimelineMax" {
  export { TimelineMax as default, TimelineMax } from "gsap";
}

declare module "gsap/CSSPlugin" {

  class CSSPlugin { }
  export { CSSPlugin as default };
}

declare module "gsap/all" {

  import CSSPlugin from "gsap/CSSPlugin";

  export { CSSPlugin };
  export * from "gsap/TweenLite";
  export * from "gsap/TweenMaxBase";
  export * from "gsap/TimelineLite";
  export * from "gsap/TimelineMax";
}

 

 

 

Why don't you just commit this index.d.ts file into the NPM package?

  • Like 2
Link to comment
Share on other sites

I'm creating a new set of definitions for the project I'm currently working on, but they aren't complete. I've only added the stuff I needed, but we can add to the package when I'm done. If you need any definitions for a plugin or something, just let me know, I can post it.

  • Like 3
Link to comment
Share on other sites

10 hours ago, OSUblake said:

I'm creating a new set of definitions for the project I'm currently working on, but they aren't complete. I've only added the stuff I needed, but we can add to the package when I'm done. If you need any definitions for a plugin or something, just let me know, I can post it.

 

Although we bought it the business green or whatever package the major reason we can't adopt GSAP today is because it doesn't have type declarations.

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

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.
×
×
  • Create New...