Typescript 2.3はVisual StudioでAMDを正しくコンパイルしていませんか？

Question

したがって、私はTypewriterを使用して変換されたC＃クラスのコンパイルに問題があります。私が以下に示すように生成されたtypescriptは、JS出力の依存関係を必要とするために適切にコンパイルされません。この結果、ブラウザにファイルがたくさん残ってしまいます。

ここ

別のファイルからのインポート文と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のクラスで使用されていることがわかります。それは正しくここに他のコードをコンパイルし、別のあることを示すために

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 

：

あなたは、このコードのコンパイルは./ChecklistItemStateファイルに対して必要声明であろうと想像するだろうが、ここでは、実際のコンパイルされたコードですコンパイルされた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スニペットでは、実行時ではなくタイプチェックを実行するために、コンパイル時に./ChecklistItemStateに依存します。そのため、依存関係はありません。 （あなたがnew ChecklistItemStateまたはx instanceof ChecklistItemStateのような文を追加した場合、その後、あなたは実行時depenencyを持っていると思いますし、コンパイルされたコードに放出依存性を得るでしょう。）

をあなたの第二活字体スニペットでは、new SnakeViewModelを使用しています。したがって、コードは実行時にSnakeViewModel関数を見つける必要があります。したがって、コードを実行するには実行時の依存関係が必要です。