angular2 TypeScript性能

时间:2016-04-12 15:21:48

标签: javascript angular typescript

我是Angular,JavaScript和TypeScript的新手,正在使用https://angular.io/docs/js/latest/quickstart.html上的Angular2教程

TypeScript编译了app.component.js

System.register(['angular2/core'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var core_1;
    var AppComponent;
    return {
        setters:[
            function (core_1_1) {
                core_1 = core_1_1;
            }],
        execute: function() {
            AppComponent = (function () {
                function AppComponent() {
                }
                AppComponent = __decorate([
                    core_1.Component({
                        selector: 'my-app',
                        template: '<h1>My First Angular 2 App</h1>'
                    }), 
                    __metadata('design:paramtypes', [])
                ], AppComponent);
                return AppComponent;
            }());
            exports_1("AppComponent", AppComponent);
        }
    }
});

JavaScript示例app.component.js

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

对我来说,Angular2的JavaScript版本更短,更容易理解。 TypeScript编译的那个有点难以接受,就像core_1_1作为参数传入但我看不到我可以传入它的位置。

所以我的问题如下

  1. TypeScript版本的运行速度是否比JavaScript版本慢,因为通常抽象层越多,速度越慢?

  2. TypeScript是未来的推荐方式,因为除了快速入门之外,JavaScript中的教程甚至不可用吗?

  3. 如果我使用TypeScript将Angular编码为模块,我是否需要关注除了错误/调试目的之外的编译JavaScript代码?

  4. 谢谢,

1 个答案:

答案 0 :(得分:2)

TypeScript并不是为编译后的极端可读性而设计的,并且机器编译的代码总是比人工编写的代码更难阅读(直到AI完成我们的工作)。所以回答你的问题:

  1. 我不知道任何表现出主要速度优势或缺点的性能测试。这些天JS语法的细微差别无论如何都不可能成为瓶颈。效率低下的算法,不断的重绘,慢速的网络等都会更加引人注目。

  2. Angular团队确实在努力推动TypeScript。 TBD如果能够流行起来,但他们有足够的资源可以随心所欲地推动。

  3. 不是特别的。 TypeScript的主要好处在于,您不能像常规JS一样不知所措。理论上,这会导致可维护的代码具有更少的错误,更容易调试。最终它将归结为您首选的调试方法,但错误消息对于TypeScript来说并不是更加神秘。