Javascript 在AngularJs中使用依赖项注入和类型脚本

我正在将一个组件（AngularJS 1.6）从javascript转换为typescript

class NewProjectCtrl {
    price: number;

    static $inject = ['$http'];

    constructor($http) {
        let ctrl = this;
        ctrl.price = '50'; 
        ...
    }

    createProject() {
        $http.post('/api/project', ctrl.project)
        ...
    }
}

angular
    .module('app.projects-selection')
    .component('newProject', {
        templateUrl: 'app/projects-selection/components/new-project/new-project.tmpl.html',
        controller: NewProjectCtrl,
        bindings: {
            user: '<',
        }
    });

类NewProjectCtrl{
价格：数量；
静态$inject=['$http']；
构造函数（$http）{
让ctrl=this；
ctrl.price='50'；
...
}
createProject（）{
$http.post（'/api/project'，ctrl.project）
...
}
}
有棱角的
.module（'应用程序项目选择'）
.component（'newProject'{
templateUrl:'app/projects selection/components/new project/new project.tmpl.html'，
控制器：NewProjectCtrl，
绑定：{
用户：“您正在创建一个类，而不仅仅是一个函数。
$http
被注入到您的
构造函数中并存在于那里，但它不存在于
createProject
中。您需要将其作为属性存储在实例上：

private $http;  // should be declared first too, preferably with type hint

constructor($http) {
    this.$http = $http;
}

createProject() {
    this.$http.post('/api/project', ctrl.project)
}

TypeScript对此有一个速记：

constructor(private $http) {
}

createProject() {
    this.$http.post('/api/project', ctrl.project)
}

让ctrl=this
看起来也很奇怪，我认为这没有多大意义。我不知道你在构造函数中还做了什么，但我会重构你要做的：

class NewProjectCtrl {
    price: number = 50;

    static $inject = ['$http'];

    constructor(private $http) { }

    createProject() {
        this.$http.post('/api/project', ctrl.project);
    }
}

你忘记了
这个
。注射后使用
这个。$http

另外，根据styleguides，我建议您一些方法：

namespace myNameSpace {

  class NewProjectCtrl {
    private static $inject = ['$http'];

    public price: number;

    constructor(private $http) {}

    createProject() {
      this.$http.post('/api/project', ctrl.project)
    }
  }

  class NewProjectComponent implements ng.IComponentOptions {
    constructor() {
      this.bindings: {
        user: '<',
      };
      this.templateUrl: 'app/projects-selection/components/new-project/new-project.tmpl.html';
      this.controller: NewProjectCtrl;
    }
  }

  angular
    .module('app.projects-selection', [])
    .component('newProject', new NewProjectCtrl());
}

名称空间myNameSpace{
类NewProjectCtrl{
私有静态$inject=['$http']；
公开价格：数字；
构造函数（私有$http）{}
createProject（）{
这是.http.post（'/api/project'，ctrl.project）
}
}
类NewProjectComponent实现ng.IComponentOptions{
构造函数（）{
此文件包含以下绑定：{
用户：“此样式指南在哪里？我遵循了ng升级指南。指南是否未更新？我使用和样式指南。”