Thursday, June 23, 2016

Using ES6 Modules in CoffeeScript

As we saw in my last post,, we can use the TypeScript compiler to transpile import/export statements in our ES6 files. But were not really limited to ES6.

We can also use CoffeeScript as a pre-processor for the TypeScript compiler. To use modules in CoffeeScript is pretty easy, we can use the tick (`) to escape javascipt. Hopefully this will fully supported soon at the syntax level.

Suppose I create a module like this:

`import Batch from 'gdx/graphics/g2d/Batch'`

class SpriteBatch extends Batch 

`export default SpriteBatch`

and then I compile like this, where my jsconfig.json file references the output from coffee:

coffee -o src/js -bc src/coffee && tsc -p jsconfig.json 

And something like this is emitted by typescript into the outpur file:

define("gdx/graphics/g2d/SpriteBatch", ["require", "exports", "gdx/graphics/g2d/Batch"], function (require, exports, Batch_1) {
    "use strict";
    SpriteBatch = (function (superClass) {
        extend(SpriteBatch, superClass);
        function SpriteBatch() {
            return SpriteBatch.__super__.constructor.apply(this, arguments);
        return SpriteBatch;
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = SpriteBatch;

Using typescript to build my coffescript. Why does that seem so wrong?