Search code examples
javascripttypescripttweengsap

How can I get Greensock CustomEase to work with typescript?

I'm creating a game using typescript with pixijs and greensock (or is it gsap?) for all the tweening. I ran into a situation where I needed to do some custom easing with cubic-bezier curves. Greensock has a customease file you can get if you create an account, which I did. But the file doesn't have a typescript definition for it.

I have no idea how to incorporate this CustomEase.js file into my application without a type def file. I tried using this https://github.com/bigp/gsap-customease but it didn't work. I think its old and outdated.

How can I go about incorporating the CustomEase.js file into my typescript application?

Solution

  • There are several ways you can do this and they all have different implications. I find them all useful for different situations.

    Not knowing the basic structure of the file, if it is a module or a global, and not knowing how complex it is, it is difficult to say which would be the most suitable but here are a few options (there are many more)

    1. You can use --allowJs ("allowJs": true in tsconfig compilerOptions) which allows you to consume the JavaScript sources directly from comingled TypeScript source without any declarations needed. (ES Next syntax will of course be transpiled automatically)

    2. Write a declaration file by hand.

    3. Generate a declaration file automatically (also a great starting point for a hand written declaration) in the following manner

      • Create a copy of CustomEase.js

      • Rename it to CustomEase.ts

      • In a one time step, run tsc --declaration ./CustomEase.ts

      • Delete CustomEase.ts

      • Leave the generated CustomEase.d.ts declaration file alongside the JavaScript.

    4. Rename the file to CustomEase.ts and leave it alone. You will probably get type errors but if it contains valid JavaScript, TypeScript will happily consume it and also transpile it as necessary.

    5. (Not recommended) If the shape of the file is very simple, for example if it just defines a global named customEase, you could just write

      declare const customEase: any;

      whenever/wherever you need to refer to it. (Note this is just an example since I have no idea what the file declares)

    If 2 or 3 work well, send it back to the maintainers and ask them to include it in future releases.