因此,我遇到了使用打字機編譯轉換後的C#類的問題。我將在下面顯示的打字稿無法正確編譯爲需要JS輸出中的依賴關係。這會導致瀏覽器中一堆丟失的文件。Typescript 2.3無法在Visual Studio中正確編譯AMD?
這裏是從另一個文件中的import語句的打字稿的例子 - 其他文件看起來非常相似,這個代碼與導出接口和類:
如果你能幫助我理解這裏發生了什麼它將不勝感激。
// -- Imports --
import { ChecklistItemState, IChecklistItemState } from './ChecklistItemState';
//
// -- Interface --
export interface IChecklistItem {
itemId: number;
workflowPhaseId: number;
task: string;
description: string;
sortOrder: number;
created: Date;
modified: Date;
state: ChecklistItemState;
}
//
// -- Knockout Class --
export class ChecklistItem {
itemId = ko.observable<number>();
workflowPhaseId = ko.observable<number>();
task = ko.observable<string>();
description = ko.observable<string>();
sortOrder = ko.observable<number>();
created = ko.observable<Date>();
modified = ko.observable<Date>();
state = ko.observable<ChecklistItemState>();
constructor(model: IChecklistItem) {
this.map(model);
}
//
// -- Map Interface to Class --
map(model: IChecklistItem) {
this.itemId(model.itemId);
this.workflowPhaseId(model.workflowPhaseId);
this.task(model.task);
this.description(model.description);
this.sortOrder(model.sortOrder);
this.created(model.created);
this.modified(model.modified);
this.state(model.state);
}
//
// -- Return JSON Model --
getModel() {
return {
itemId: this.itemId(),
workflowPhaseId: this.workflowPhaseId(),
task: this.task(),
description: this.description(),
sortOrder: this.sortOrder(),
created: this.created(),
modified: this.modified(),
state: this.state(),
}
}
//
}
//
你可以看到正在使用不僅在IChecklistItem的接口也是類ChecklistItem作爲「國家」 ChecklistItemState。
你可以想象這個代碼的編譯是爲./ChecklistItemState文件要求語句,但這裏是實際的編譯代碼:
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//
// -- Knockout Class --
var ChecklistItem = (function() {
function ChecklistItem(model) {
this.itemId = ko.observable();
this.workflowPhaseId = ko.observable();
this.task = ko.observable();
this.description = ko.observable();
this.sortOrder = ko.observable();
this.created = ko.observable();
this.modified = ko.observable();
this.state = ko.observable();
this.map(model);
}
//
// -- Map Interface to Class --
ChecklistItem.prototype.map = function (model) {
this.itemId(model.itemId);
this.workflowPhaseId(model.workflowPhaseId);
this.task(model.task);
this.description(model.description);
this.sortOrder(model.sortOrder);
this.created(model.created);
this.modified(model.modified);
this.state(model.state);
};
//
// -- Return JSON Model --
ChecklistItem.prototype.getModel = function() {
return {
itemId: this.itemId(),
workflowPhaseId: this.workflowPhaseId(),
task: this.task(),
description: this.description(),
sortOrder: this.sortOrder(),
created: this.created(),
modified: this.modified(),
state: this.state(),
};
};
return ChecklistItem;
}());
exports.ChecklistItem = ChecklistItem;
});
//
//# sourceMappingURL=ChecklistItem.js.map
,以表明它正確編譯其他代碼這裏是另一個代碼片段在編譯後的JS中正確顯示「define」調用。
import { SnakeViewModel } from '../../../Core/classes/SnakeViewModel';
let initModel = {
projId: $("#projId").val(),
wfId: $("#wfId").val()
},
viewModel;
$.post("/ProjectApi/ProjectSnakeView",
initModel,
data => {
if (data != null) {
console.log(data);
var viewModel = new SnakeViewModel(data);
}
});
然後在這裏是代碼的編譯後的輸出:
define(["require", "exports", "../../../Core/classes/SnakeViewModel"],
function (require, exports, SnakeViewModel_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var initModel = {
projId: $("#projId").val(),
wfId: $("#wfId").val()
}, viewModel;
$.post("/ProjectApi/ProjectSnakeView", initModel, function (data) {
if (data != null) {
console.log(data);
var viewModel = new SnakeViewModel_1.SnakeViewModel(data);
}
});
});
//# sourceMappingURL=snake.js.map
好的,那讓我對此有所瞭解。所以現在我需要弄清楚爲什麼var viewModel = new SnakeViewModel(data);'返回undefined .. SnakeViewModel類似ChecklistItem類的結構更加複雜。關於下一步的任何想法? – Aquaritek
如果'viewModel'保持未定義狀態,這與您在編寫問題時關注的問題不同。你正在處理異步代碼。你確定你正在查看'viewModel'嗎?你有沒有嘗試在'var viewModel = new SnakeViewModel(data);'後面查看'viewModel'具有什麼值,然後立即**放置'console.log' **?在'new'調用之後,'console.log'必須**立即**,而不是例如在你的模塊結尾。 (我也看到你定義了'viewModel'兩次:在模塊的外部範圍和回調中。) – Louis
原來這是標題與駱駝的問題 - 呃...現在我意識到我的KO可觀察值是隻有一個深度...在這裏,我們繼續穿越並實例化來自SnakeViewModel :)的每個較低級別的對象。謝謝你讓我在腦海中擺脫雜草。 – Aquaritek