Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Friebel

Right source for Typescript definitions files?

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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks for your answer Jack. I appreciate it.

I can really recommend using Typescript! It's briljant and one can write OO-classes like C# or Actionscript again!  ;-)

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@greensock you definitly used typescript before. Because it is like as3 on DOM and more. I would like to see this happened. +1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Nice work, Blake. Thanks for doing that. 

Share this post


Link to post
Share on other sites

This is great, Blake. I hope you will be able to add this to the Definitely Typed repository so that it is accessible through the tsd package manager.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Lovely.. I would love to see what happens next. I'm a Typescript enthusiast do you need help with the definitions? 
Can I send pull requests your way?
Where is the repository for this?

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hey Blake, would love to know once this becomes available. I'll keep checking back here for updates, thanks for doing it as well.

 

I <3 TypeScript!

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Any news? Right now GSAP is the only one library we use and we don't have a definitions file for. :/

  • Like 1

Share this post


Link to post
Share on other sites

Has this been done yet? Would be very much appreciated to be able to learn with intellisense.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×