Question

使用类似于此的Typescript类：

class MainCtrl {

    constructor() {
        var vm = this;
        vm.variable = "Text";
    }
}

app.controller("MainCtrl", MainCtrl);

编译到

var MainCtrl = (function () {
    function MainCtrl() {
        var vm = this;
        vm.variable = "Text";
    }
    return MainCtrl;
})();
app.controller("MainCtrl", MainCtrl);

由于我还没有完全理解IIFE，如果MainCtrl对象是一个函数，我可以从中读取，我可以像这样或不同步进入控制器定义。我该如何处理注射？

Answer 1

您需要export您MainCtrl类，因此您的班级定义应该是

export class MainCtrl {
   ...
}

如果您在打字稿代码中指的是如何$inject，那么您可以在MainCtrl类中使用此语法：

public static $inject = [
        '$scope',
        '$location',
        'MyCustmSvc'
];

在你的TS构造函数中：

constructor(
        private $scope: IAppNameScope,
        private $location: ng.ILocationService,
        private IMyCustomSvc) {

   var vm = this;
   vm.variable = "Text";
}

任何带有I的参数都需要您为其定义打字稿interface。

你编译的JS现在应该是这样的：

var MainCtrl = (function () {
    function MainCtrl($scope, $location, MyCustomSvc) {
        var vm = this;
        vm.variable = "Text";
    }
    return MainCtrl;

 MainCtrl.$inject = [
       '$scope',
       '$location',
       'MyCustomSvc'
 ];
return MainCtrl;
})();
app.controller("MainCtrl", MainCtrl);

Answer 2

您可以运行初始化步骤，将TS类转换为可以使用的东西。我们为React组件做了类似的事情 - React使用React.createClass创建工厂而不是直接使用类，所以我们遍历从特定TS基础派生的所有类，然后用结果替换这些值React.createClass。

TS类最终只是变量，您可以随意将其换成另一种形式。此外，如果您反思一些“模块”，您可以删除对App.controller的可疑调用，并将其作为初始步骤。

Answer 3

是的，您可以将TypeScript类与Angular一起使用。

使用TypeScript，您无需在控制器中使用var vm = this。只需使用controllerAs 'vm'代替。

上面的示例变为：

export class MainCtrl {

    variable = "text";

}
app.controller("MainCtrl", MainCtrl);

现在您可以在以下视图中访问它：

要注入控制器，您将使用标准的Angular $inject注释。这适用于TypeScript。

export class MainCtrl {

    static $inject = ['$http'];
    constructor(private $http) {}

    submit(form: YourForm) {
        this.$http.post('/api/form', form);
    }
}

现在，您可以在视图中提交包含vm.submit()的表单。 $http被注入并可从控制器中的任何内部方法访问。

注意我使用export。这允许您在单元测试中使用类类型定义。

不仅要将Controllers创建为类。 Services也应该。唯一的区别是Angular会将服务实例化为单例，因此只有一个实例 - 其中Controllers可以用很多实例进行实例化。

我可以在Angular中使用Typescript类吗？

3 个答案: