Introduction to dts2as: Using TypeScript definitions with ActionScript

With Apache FlexJS™, you can write code in ActionScript and transpile it to JavaScript. Your ActionScript code can access web browser APIs, including full access to the HTML DOM. It's even possible to work with third-party JavaScript libraries using ActionScript — with full compile-time type checking.

The TypeScript community has collected type information for thousands of JavaScript libraries already, and ActionScript developers can benefit from their hard work too. The popular DefinitelyTyped repository on Github contains TypeScript definitions for thousands of JavaScript libraries.

Let's say that you want to work with Pixi.js. With many similarities to the display list from Adobe Flash Player, Pixi.js is an obvious JavaScript library to use with ActionScript.

Using the dts2as command line utility, we can generate a SWC file from the Pixi.js TypeScript definitions. Then, we'll see how to build a simple app with this new SWC and Apache FlexJS.

Requirements

For this tutorial, you should install Apache FlexJS 0.7 or newer. It may be downloaded with the Apache Flex SDK Installer.

Additionally, the dts2as command line utility requires Node.js. You'll learn how to install dts2as in a moment.

Getting started

Start by creating a new directory for your project. You might call it HelloPixi.

mkdir HelloPixi
cd HelloPixi

Download pixi.js.d.ts from DefinitelyTyped on Github (click the "Raw" button), and save it in the HelloPixi directory.

Next, install the dts2as command line utility.

It is available from Node Package Manager, and it should take just a few moments to download.

npm install -g dts2as

dts2as will be automatically added to your system path, so you can run it from anywhere.

Create the SWC

When you run dts2as, it converts the TypeScript definitions into ActionScript code. Then, it runs the Apache FlexJS compiler to automatically create a SWC file.

dts2as --flexHome /path/to/flexjs --outSWC pixijs.swc pixi.js.d.ts

First, you must tell dts2as where Apache FlexJS is located. However, you may omit the --flexHome option if the FLEX_HOME environment variable already points to Apache FlexJS on your system.

Then, tell dts2as where to save the SWC file. Let's call it pixijs.swc. Finally, pass in one or more TypeScript definitions. In this case, you should pass in the pixi.js.d.ts file that you downloaded a moment ago.

Run the command, and in a few seconds, dts2as will create pixijs.swc. Let's try using Pixi.js in a simple ActionScript project.

Your first project with pixijs.swc

Inside the HelloPixi directory, create a new src directory:

mkdir src

Then, create a file named HelloPixi.as in the src directory:

package
{
    import PIXI.Container;
    import PIXI.Sprite;
    import PIXI.Texture;
    import PIXI.autoDetectRenderer;

    public class HelloPixi
    {
        public function HelloPixi()
        {
            renderer = autoDetectRenderer(320, 320, {backgroundColor : 0x1099bb});
            document.body.appendChild(renderer.view);

            // create the root of the scene graph
            stage = new Container();

            // create a texture from an image path
            var texture:Texture = Texture.fromImage("images/bunny.png");

            // create a new Sprite using the texture
            bunny = new Sprite(texture);

            // center the sprite's anchor point
            bunny.anchor.x = 0.5;
            bunny.anchor.y = 0.5;

            // move the sprite to the center of the screen
            bunny.position.x = 160;
            bunny.position.y = 160;

            stage.addChild(bunny);

            // start animating
            animate();
        }
        
        private var renderer:Object;
        private var stage:Container;
        private var bunny:Sprite;
        
        private function animate():void
        {
            requestAnimationFrame(animate);

            // just for fun, let's rotate mr rabbit a little
            bunny.rotation += 0.1;

            // render the container
            renderer.render(stage);
        }
        
    }
}

Compile the application on the command line

Just like we did in the Hello World example, we'll use asjsc to compile our project. This time, we'll refence pixijs.swc as an external library:

asjsc --external-library-path+=pixijs.swc src/HelloPixi.as

The --external-library-path option tells the compiler that the classes in our SWC exist, but that it shouldn't include them in the final output because the real code for the library will be loaded by a

Obviously, you can use a local copy of Pixi.js, if you prefer not to load it from a CDN.

Run the application

Open up release.html in a web browser. You should see something like this:

See a live demo in your browser