javascript - Typescript:无法在构造函数中使用 : 符号编译文件

Question

我正在关注 Ionic(带有 Angular 2)应用程序的一些示例。所有类的构造函数都有类似的内容:

export class UserService {
    constructor(http: Http) {
        this.http = http;
    }
}

但编译器输出此错误:

Unexpected token (14:17)
  12 |  }
  13 | 
> 14 |  constructor(http: Http)
at Parser.pp.raise (/home/cbenseler/dev/apps/expressoapp/node_modules/babylon/index.js:1425:13)

这可能是我的应用程序(使用 babel 和 webpack)的设置有问题，但我找不到问题所在。

webpack.config.js 文件包含以下内容:

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015'],
          plugins: ['transform-decorators-legacy']
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  }

有人有什么想法吗？

Answer 1

我会看到一件可能会错过的事情:

• 您忘记导入 Http 类，因此编译器无法解析它:

  import {Http} from 'angular2/http';
  

编辑

如果你只使用ES6(似乎是这样)，你可以在参数级别使用type。在这种情况下注入(inject)，你需要使用这样的方法:

@Injectable()
export class UserService {
  constructor(http) {
    this.http = http;
  }

  static get parameters() {
    return [[Http]];
  }
}

请参阅以下链接了解更多详细信息:

• angular2 cannot read property 'validator' of undefined when use ngFormModel (ES6)
• https://medium.com/@euphocat/angular2-router-in-es6-7-and-dependency-injection-b96944c3ba2e#.qat3cl6b4