TS の getter/setter を JS へトランスパイルした結果/ Result of transpile of TS getter/setter to JS

TypeScript の getter/setter を JavaScript へトランスパイルした結果/ Result of JavaScript Transpile of getter/setter of TypeScript

f:id:ic_lifewood:20200807022459p:plain

普段 Angular の@Input で、getter/setter を使っていますがビルドされた（トランスパイル）された JavaScript がどの様になっているか興味を持ったので、実験しました。
I usually use getter/setter in Angular @Input, but it was built (transpiled) Since I was interested in what the JavaScript looks like, I experimented

TypeScript のサンプルコード / Sample code of TypeScript

 class Child {
  private _item: string;

  constructor() {
    this._item = 'test';
  }

  get Item() {
    return this._item;
  }

  set item(value: string) {
    this._item = value;
  }
 }

 class Parent {
  child = new Child();
  constructor() {}

  sampleMethod() {
    console.log('this.child.Item', this.child.Item);
  }
 }

TypeScript のサンプルコードをトランスパイルします(ES5) / Transpile the TypeScript code(ES5)

$ tsc -t es5 main.ts

ECMA Script 5 の場合 / For ECMA Script 5

var Child = /** @class */ (function () {
  function Child() {
    this._item = 'test';
  }
  Object.defineProperty(Child.prototype, "Item", {
    get: function () {
      return this._item;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Child.prototype, "item", {
    set: function (value) {
      this._item = value;
    },
    enumerable: false,
    configurable: true
  });
  return Child;
}());
var Parent = /** @class */ (function () {
  function Parent() {
    this.child = new Child();
  }
  Parent.prototype.sampleMethod = function () {
    console.log('this.child.Item', this.child.Item);
  };
  return Parent;
}());

TypeScript のサンプルコードをトランスパイルします(ES2015) / Transpile the TypeScript code(ES2015)

$ tsc -t es2015 main.ts

ECMA Script 2015 の場合 / For ECMA Script 2015

class Child {
  constructor() {
    this._item = 'test';
  }
  get Item() {
    return this._item;
  }
  set item(value) {
    this._item = value;
  }
}
class Parent {
  constructor() {
    this.child = new Child();
  }
  sampleMethod() {
    console.log('this.child.Item', this.child.Item);
  }
}

ECMA Script 2015 以降だと Java や C# のようにトランスパイルされているので、個人的には、かなり見易いと思いました。
Since ECMA Script 2015, it is transpiled like Java and C#, so I personally thought it was quite easy to see.

Angular では、ES2015 以降で、ビルドするので、ECMA Script 2015 の形式で出力されるはずです。
Since Angular builds on ES2015 or later, it will be output in the ECMA Script 2015 format.

Angular のコード

TypeScript のサンプルコード / Sample code of TypeScript

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input()
  get item () {
    return this._item;
  }
  set item(value: string) {
    this._item = value;
  }
  private _item: string;

  constructor() { }

  ngOnInit(): void {
    console.log('_item', this._item);
  }

  sampleMethod() {
    console.log('sampleMethod()');
  }
}

ECMA Script 5 の場合 / For ECMA Script 5

var ChildComponent = /** @class */ (function () {
    function ChildComponent() {
    }
    Object.defineProperty(ChildComponent.prototype, "item", {
        get: function () {
            return this._item;
        },
        set: function (value) {
            this._item = value;
        },
        enumerable: false,
        configurable: true
    });
    ChildComponent.prototype.ngOnInit = function () {
        console.log('_item', this._item);
    };
    ChildComponent.prototype.sampleMethod = function () {
        console.log('sampleMethod()');
    };
    ChildComponent.ɵfac = function ChildComponent_Factory(t) { return new (t || ChildComponent)(); };
    ChildComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: ChildComponent, selectors: [["app-child"]], inputs: { item: "item" }, decls: 2, vars: 0, template: function ChildComponent_Template(rf, ctx) { if (rf & 1) {
            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "p");
            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "child works!");
            _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        } }, styles: ["\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2NoaWxkL2NoaWxkLmNvbXBvbmVudC5jc3MifQ== */"] });
    return ChildComponent;
}());

ECMA Script 2015 の場合 / For ECMA Script 2015

class ChildComponent {
    constructor() { }
    get item() {
        return this._item;
    }
    set item(value) {
        this._item = value;
    }
    ngOnInit() {
        console.log('_item', this._item);
    }
    sampleMethod() {
        console.log('sampleMethod()');
    }
}
ChildComponent.ɵfac = function ChildComponent_Factory(t) { return new (t || ChildComponent)(); };
ChildComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: ChildComponent, selectors: [["app-child"]], inputs: { item: "item" }, decls: 2, vars: 0, template: function ChildComponent_Template(rf, ctx) { if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "p");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "child works!");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    } }, styles: ["\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2NoaWxkL2NoaWxkLmNvbXBvbmVudC5jc3MifQ== */"] });
/*@__PURE__*/ (function () { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵsetClassMetadata"](ChildComponent, [{
        type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],
        args: [{
                selector: 'app-child',
                templateUrl: './child.component.html',
                styleUrls: ['./child.component.css']
            }]
    }], function () { return []; }, { item: [{
            type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"]
        }] }); })();


/***/ }),