Aurelia + Typescript + @bindable

ฉันเริ่มเรียนรู้ Aurelia และกำลังทำตามคู่มือเริ่มต้นบนเว็บไซต์ของพวกเขา แต่แทนที่จะใช้ Javascript ฉันใช้ Typescript ทุกอย่างดี แต่ฉันมีปัญหาในการทำให้ decorator @bindable ทำงานใน component nav-bar

การตั้งค่าของฉันมีดังนี้:

• Visual Studio 2015 (โปรเจกต์ ASP.NET vNext)
• ไทป์สคริปต์ 1.5.3
• JSPM 0.16.0 เบต้า 7
• SystemJS 0.18.9
• Aurelia (เฟรมเวิร์ก: 0.15.0; ตัวบูตสแตรปเปอร์: 0.16.0)

นี่คือเนื้อหาของไฟล์ nav-bar.ts ของฉัน:

import {bindable} from "aurelia-framework";
import {Router} from "aurelia-router";

export class NavBar {
      @bindable router: Router = null;
}

ฉันมีไฟล์ tsconfig.json ดังนี้:

{
   "compilerOptions": {
      "noImplicitAny": false,
      "noEmitOnError": false,
      "removeComments": false,
      "target": "es5",
      "module": "system",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true
   }
}

ถ้าฉันปล่อยให้ VS แปลงไฟล์ Typescript ไฟล์ nav-bar.js ที่สร้างขึ้นจะดูเหมือนนี้:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};System.register(['aurelia-framework', 'aurelia-router'], function(exports_1) {
    var aurelia_framework_1, aurelia_router_1;
    var NavBar;
    return {
        setters:[
            function (_aurelia_framework_1) {
                aurelia_framework_1 = _aurelia_framework_1;
            },
            function (_aurelia_router_1) {
                aurelia_router_1 = _aurelia_router_1;
            }],
        execute: function() {
            NavBar = (function () {
                function NavBar() {
                    this.router = null;
                }
                __decorate([
                    aurelia_framework_1.bindable, 
                    __metadata('design:type', aurelia_router_1.Router)
                ], NavBar.prototype, "router");
                return NavBar;
            })();
            exports_1("NavBar", NavBar);
        }
    }
});

ฉันก็ลองใช้ gulp-typescript แล้วและผลลัพธ์ก็เหมือนเดิม ด้วยสองวิธีนี้ การผูกข้อมูลไม่ทำงานและแถบนำทางว่างเปล่า

ถ้าฉันใช้ gulp-babel แทน ไฟล์ nav-bar.js ที่ถูกสร้างขึ้นจะมีลักษณะดังนี้:

System.register(["aurelia-framework", "aurelia-router"], function (_export) {
    "use strict";

    var bindable, Router, NavBar;

    var _createDecoratedClass = (function () { function defineProperties(target, descriptors, initializers) { for (var i = 0; i < descriptors.length; i++) { var descriptor = descriptors[i]; var decorators = descriptor.decorators; var key = descriptor.key; delete descriptor.key; delete descriptor.decorators; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor || descriptor.initializer) descriptor.writable = true; if (decorators) { for (var f = 0; f < decorators.length; f++) { var decorator = decorators[f]; if (typeof decorator === "function") { descriptor = decorator(target, key, descriptor) || descriptor; } else { throw new TypeError("The decorator for method " + descriptor.key + " is of the invalid type " + typeof decorator); } } if (descriptor.initializer !== undefined) { initializers[key] = descriptor; continue; } } Object.defineProperty(target, key, descriptor); } } return function (Constructor, protoProps, staticProps, protoInitializers, staticInitializers) { if (protoProps) defineProperties(Constructor.prototype, protoProps, protoInitializers); if (staticProps) defineProperties(Constructor, staticProps, staticInitializers); return Constructor; }; })();

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    function _defineDecoratedPropertyDescriptor(target, key, descriptors) { var _descriptor = descriptors[key]; if (!_descriptor) return; var descriptor = {}; for (var _key in _descriptor) descriptor[_key] = _descriptor[_key]; descriptor.value = descriptor.initializer ? descriptor.initializer.call(target) : undefined; Object.defineProperty(target, key, descriptor); }

    return {
        setters: [function (_aureliaFramework) {
            bindable = _aureliaFramework.bindable;
        }, function (_aureliaRouter) {
            Router = _aureliaRouter.Router;
        }],
        execute: function () {
            NavBar = (function () {
                var _instanceInitializers = {};

                function NavBar() {
                    _classCallCheck(this, NavBar);

                    _defineDecoratedPropertyDescriptor(this, "router", _instanceInitializers);
                }

                _createDecoratedClass(NavBar, [{
                    key: "router",
                    decorators: [bindable],
                    initializer: function initializer() {
                        return null;
                    },
                    enumerable: true
                }], null, _instanceInitializers);

                return NavBar;
            })();

            _export("NavBar", NavBar);
        }
    };
});

การใช้วิธี gulp-babel ใช้งานได้ แต่ผมคิดว่ามันไม่จำเป็นต้องเป็นตัวเลือกที่ถูกต้องเพราะผมไม่คิดว่า babel ถูกออกแบบมาเพื่อแปลงโค้ด Typescript ดังนั้นผมอาจมีปัญหาในภายหลังเมื่อเขียนโค้ดขั้นสูงบางอย่าง

คำถาม

มีอะไรที่ฉันสามารถทำให้มันทำงานได้โดยใช้ตัวแปลง Typescript อย่างเป็นทางการบ้างไหม?

มีใครสำเร็จไหม?

คำตอบ #1

กรุณาลองใช้โมดูล: "amd" แทนโมดูล: "system"