Question

所以，我在使用Typewriter编译转换后的C＃类时遇到了问题。我将在下面展示的打字稿没有正确编译到需要JS输出中的依赖项。这导致浏览器中出现大量丢失的文件。

以下是带有来自另一个文件的import语句的typescript的示例 - 另一个文件看起来与此代码非常相似，带有导出的接口和类：

如果你能帮我理解这里发生的事情，我们将不胜感激。

// -- 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(),

        }
    }
    //
}
//

你可以看到ChecklistItemState不仅用在IChecklistItem的接口中，而且还用在ChecklistItem的类中作为＆＃39; state＆＃39;。

您可以想象这段代码的编译将是./ChecklistItemState文件的require语句，但这里是实际的编译代码：

  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

为了表明它在这里正确编译其他代码，另一段代码显示了＆＃34; define＆＃34;正确调用已编译的JS。

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

Answer 1

汇编的结果对我来说很好。

正在发生的事情是TypeScript编译器会在您导入的模块的编译代码中发出依赖关系当且仅当您的代码在运行时依赖于它们时。如果您的代码依赖于它们仅用于类型检查，那么这是一个编译时依赖项，编译器不会在编译代码中发出依赖关系。

在您的第一个TypeScript代码段中，您仅在编译时依赖./ChecklistItemState，以便执行类型检查，而不是在运行时，因此您不会获得它的依赖关系。（如果添加了new ChecklistItemState或x instanceof ChecklistItemState之类的语句，那么您将具有运行时依赖性，并且会在编译的代码中发出依赖关系。）

在第二个TypeScript代码段中，使用new SnakeViewModel。因此，您的代码需要能够在运行时找到SnakeViewModel函数，因此运行时需要运行时依赖性。

Typescript 2.3在Visual Studio中没有正确编译AMD？

1 个答案: