使用Angular JS将打字稿用于ES6支持

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

Answer 1

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) {
    }