Typescript 2.3 not compiling AMD correctly in Visual Studio?

Question

So, I am having issues with the compilation of converted C# classes using Typewriter. The typescript produced which I will show below doesn't properly compile to requiring dependencies in JS output. This results in a bunch of missing files in the browser.

Here is an example of the typescript with an import statement from another file - the other file looks very similar to this code with an exported Interface and Class:

If you can help me understand what is happening here it would be greatly appreciated.

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

        }
    }
    //
}
//

You can see that ChecklistItemState is being used not only in the Interface of IChecklistItem but also the class of ChecklistItem as 'state'.

You would imagine that the compilation of this code would be a require statement for the ./ChecklistItemState file but here is the actual compiled code:

  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  

To show that it compiles other code correctly here is another snippet of code that shows the "define" call in the compiled JS correctly.

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);
    }
});

And then here is the compiled output of that code:

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

The results of the compilation look fine to me.

What's happening is that the TypeScript compiler will emit a dependency in the compiled code for modules that you import if and only if your code depends on them at run-time. If your code depends on them only for type-checking, then that is a compile-time dependency and the compiler won't emit a dependency in the compiled code.

In your first TypeScript snippet, you depend on ./ChecklistItemState only at compile-time, in order to perform type checks, and not at run-time and thus you don't get a dependency for it. (If you added a statement like new ChecklistItemState or x instanceof ChecklistItemState, then you'd have a run-time depenency and would get a dependency emitted in the compiled code.)

In your 2nd TypeScript snippet, you use new SnakeViewModel. So your code needs to be able to find the SnakeViewModel function at run-time, and thus a run-time dependency is needed for your code to run.