Aurelia를 배우기 시작했고 웹 사이트의 시작 안내서를 따르고 있지만 Javascript 대신 Typescript를 사용하고 있습니다. 모두 좋지만 구성 요소 @bindable
에서 데코레이터가 작동하도록 만드는 데 문제가 nav-bar
있습니다.
내 설정은 다음과 같습니다.
다음은 내 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
결과는 동일합니다. 이 두 가지 솔루션을 사용하면 바인딩이 작동하지 않고 navbar가 비어 있습니다.
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 메서드를 사용하면 작동하지만 바벨이 Typescript를 변환하는 것이 아니라고 생각하므로 나중에 고급 코드를 작성할 때 문제가 발생할 수 있으므로 반드시 올바른 옵션은 아닙니다.
공식 Typescript 트랜스 파일러를 사용하여 작동하도록 할 수있는 것이 있습니까?
누구나 성공 했습니까?
모듈 : "system"대신 "amd"모듈을 시도하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다