使用typescript支持ES6，使用Angular JS

Using typescript for ES6 support, with Angular JS

本文关键字：使用 Angular JS ES6 typescript 支持      更新时间：2023-09-26

我正在寻找一个转译器，给我以下内容:-

  • 使用ES6语法的类，"let"作用域，胖箭头语法
  • 对导入的一些支持(理想情况下是ES6建议的语法)
  • 支持IE8(即编译到ES3)
    • 与AngularJS的兼容性
  • 与gulp
    • 兼容
  • 编译我所有的代码到一个单一的文件，没有要求/AMD。

现在，大部分都是由TypeScript覆盖的，但是TypeScript有自己的类型语法，我不喜欢使用，因为它似乎需要我下载/设置接口/定义文件。

我试了一下，但没有多大成功。您可以看到下面的代码。有人可以建议一个替代方案(不，我不想使用Dart)，或者告诉我我做错了什么。

应用程序。t(我的"main"文件)

/// <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 ];
}

以下是typescript编译器输出的问题:-

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/angular/angular.min.js"/>

实际上应该指向Angular的.d.ts类型定义文件。

In this class:

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

您尝试使用this.MyService，但您从未声明过它。

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

-or-你可以自动把构造函数参数变成类变量，像这样:

class MyController {
    constructor(private MyService: MyService.MyService) {
    }
相关文章：