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

Using a Typescript class looking something like this:

使用类似于这样的Typescript类:

class MainCtrl {

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

app.controller("MainCtrl", MainCtrl);

Compiles to

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

And since I have not quite grasped IIFE's yet, I cant read from this if the MainCtrlobject is a function I can shove into the controller definition like this or not. And how would I handle injections?

而且由于我还没有完全掌握IIFE,如果MainCtrlobject是一个我可以像这样或不能进入控制器定义的函数,我就无法读取。我该如何处理注射?

3 个解决方案

#1

You need to export you MainCtrl class so your class definition should look like

您需要导出MainCtrl类,以便您的类定义看起来像

export class MainCtrl {
   ...
}

If you're referring to how you can $inject in your typescript code then you can use this syntax in your MainCtrl class:

如果您指的是如何在您的打字稿代码中注入$,那么您可以在MainCtrl类中使用此语法:

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

And in you TS constructor:

在你的TS构造函数中:

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

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

Any parameter with an I before it requires you to define a typescript interface for it.

任何带有I之前的参数都需要您为它定义一个打字稿界面。

Your compiled JS should now look something like this:

你编译的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);

#2

You can run an initialize step that converts the TS class into a thing you can use. We do something similar for React components- React uses React.createClass to create factories rather than using the classes directly, so we iterate over all of our classes that derive from a specific TS base, and then replace those values with the result of React.createClass.

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

TS classes are ultimately just variables that you can wrap as you please into another form. Also, if you reflect on some "modules", you can remove that hideous call to App.controller and do that as an init step.

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

#3

Yes you can use TypeScript classes with Angular.

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

With TypeScript you do not need to use var vm = this inside your controller. Just use controllerAs 'vm' instead.

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

Your example above becomes:

您的上述示例变为:

export class MainCtrl {

    variable = "text";

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

So now you can access this in your views like:

所以现在你可以在你的视图中访问它,如:

To inject into your controller you will use the standard Angular $inject annotation. This works nicely with TypeScript.

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

export class MainCtrl {

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

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

Now from the view you can submit a form with vm.submit(). $http is injected and accessable from any internal method in the controller.

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

Notice I use export. This allows you to use the Class type definition within your unit tests.

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

Not only should Controllers be created as classes. Services should as well. The only difference is Angular will instantiate services as singletons, so there will only be one instance -- where Controllers can be instantiated with many instances.

控制器不仅应该被创建为类。服务也应如此。唯一的区别是Angular将服务实例化为单例,因此只有一个实例 - 控制器可以用很多实例进行实例化。

#1