angular2 TypeScript performance

Question

I am new to Angular, JavaScript, and TypeScript and am playing with Angular2 tutorial at https://angular.io/docs/js/latest/quickstart.html

The TypeScript compiled 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);
        }
    }
});

The JavaScript example 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 = {}));

To me the JavaScript version of Angular2 is much shorter and easier to understand. The compiled one by TypeScript is a bit hard to swallow, like core_1_1 passed in as parameter but I don't see where I can pass it in.

So my questions are as follows

1. Will TypeScript version runs slower than the JavaScript version, since usually the more abstraction layers the slower?

2. Is TypeScript the recommended way to go in the future since the tutorial in JavaScript is not even available other than quick start?

3. If I use TypeScript for coding Angular to modules do I have to care much compiled JavaScript code other than error/debugging purpose?

Thanks,

Answer 1

TypeScript is not really designed for extreme readability post-compilation, and machine-compiled code will always be harder to read than well-written-by-a-human code (until AI takes our jobs). So to answer your questions:

1. I'm unaware of any performance tests that show major speed benefits or drawbacks either way. These days slight differences in JS syntax are not likely to be a bottleneck anyhow. Inefficient algorithms, constant repaints, slow network, etc are much more noticeable.

2. The Angular team does seem to be pushing hard for TypeScript. TBD if that will catch on, but they have the resources to push for as long as they want.

3. Not particularly. The main benefit of TypeScript is that you can't be all willy-nilly with your data types like in regular JS. In theory, this leads to maintainable code with fewer errors that are easier to debug. Ultimately it will come down to your preferred methods of debugging, but error messages are not more cryptic with TypeScript.