Using typescript for ES6 support, with Angular JS

Question

I am looking for a transpiler that gives me the following:-

Use ES6 syntax for classes, "let" scoping, fat arrow syntax
Some support for imports (ideally ES6 proposed syntax)
Support for IE8 (that is, compiles down to ES3)
Compatibility with AngularJS
Compatibility with gulp
Compile all my code into a single file without requirejs/AMD.

Now, most of that is covered by TypeScript, but typescript comes with its own type syntax which I prefer not using as it seems to require me to download/setup interfaces/definition files.

I have had a play with it and I have had not much success. You can see the code below. Can someone either please suggest an alternative (and no, I don't want to use Dart), or tell me what I am doing wrong.

app.ts (my "main" file)

/// <reference path="MyController.ts"/>
/// <reference path="MyService.ts"/>
// <reference path="../bower_components/angular/angular.min.js"/>

angular.module("test")
      .controller("MyController", MyController.injections)
      .factory("MyService", MyService.injections);

MyController.ts

/// <reference path="MyService.ts"/>
module MyController {
    class MyController {
        constructor(MyService) {
            this.MyService = MyService;
        }

        callSomething() {
            this.MyService.doSomething();
        }
    }
    export var injections = [ "MyService", MyController ];
}

MyService.ts

module MyService {
    export class MyService {
        constructor($http) {

        }

        doSomething() {
            console.log("Yo");
        }
    }
    export var injections = [ "$http", MyService ];
}

Here are the issues the typescript compiler's output:-

C:\dev\temp\angulargulp>gulp compile
[gulp] Using gulpfile C:\dev\temp\angulargulp\gulpfile.js
[gulp] Starting 'compile'...
[gulp] Finished 'compile' after 3.87 ms
[gulp] Compiling TypeScript files using tsc version 1.0.1.0
[gulp] [tsc] > error TS5023: Unknown option 'allowimportmodule'
[gulp] [tsc] > C:\dev\temp\angulargulp\app\scripts\MyController.ts(5,9): error TS2094: The property 'MyService' does not exist on value of type 'MyController'.
[gulp] [tsc] > Use the '--help' flag to see options.
[gulp] [tsc] > C:\dev\temp\angulargulp\app\scripts\MyController.ts(9,9): error TS2094: The property 'MyService' does not exist on value of type 'MyController'.
[gulp] [tsc] > C:\dev\temp\angulargulp\app\scripts\app.ts(5,1): error TS2095: Could not find symbol 'angular'.
[gulp] Failed to compile TypeScript: Error: tsc command has exited with code:1

events.js:72
        throw er; // Unhandled 'error' event
              ^
[←[32mgulp←[39m] Error in plugin '←[36mgulp-tsc←[39m': Failed to compile: tsc command has exited with code:1
    at C:\dev\temp\angulargulp\node_modules\gulp-tsc\index.js:51:33
    at C:\dev\temp\angulargulp\node_modules\gulp-tsc\lib\compiler.js:326:8
    at Array.forEach (native)
    at Function.Compiler._allAborted (C:\dev\temp\angulargulp\node_modules\gulp-tsc\lib\compiler.js:325:13)
    at Function.Compiler.abortAll (C:\dev\temp\angulargulp\node_modules\gulp-tsc\lib\compiler.js:303:14)
    at C:\dev\temp\angulargulp\node_modules\gulp-tsc\index.js:50:20
    at C:\dev\temp\angulargulp\node_modules\gulp-tsc\lib\compiler.js:110:7
    at Transform.<anonymous> (C:\dev\temp\angulargulp\node_modules\gulp-tsc\lib\compiler.js:205:5)
    at Transform.EventEmitter.emit (events.js:117:20)
    at C:\dev\temp\angulargulp\node_modules\gulp-tsc\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:942:16

/// <reference path="../bower_components/DefinitelyTyped/angularjs/angular.d.ts" /> — PM 77-1
– PM 77-1, Commented May 31, 2014 at 3:11
Traceur does not support IE8. If it did, it would be perfect. — user1545858
– user1545858, Commented May 31, 2014 at 22:18

CodingWithSpike · Accepted Answer · 2014-05-31 03:04:48Z

I think this reference:

// <reference path="../bower_components/angular/angular.min.js"/>

should actually be to a .d.ts type definition file for Angular.

In this class:

class MyController {
    constructor(MyService) {
        this.MyService = MyService;
    }

you try to use this.MyService but you never declared it.

class MyController {
    MyService: MyService.MyService;

    constructor(MyService) {
        this.MyService = MyService;
    }

-or- you can automatically make the constructor arguments into class variables like this:

class MyController {

    constructor(private MyService: MyService.MyService) {
    }

Collectives™ on Stack Overflow

Using typescript for ES6 support, with Angular JS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related