Tapcript 2.3 ne compile pas correctement AMD dans Visual Studio?

Question

Donc, j'ai des problèmes avec la compilation de classes C# converties en utilisant Typewriter. Le tapuscrit produit que je vais montrer ci-dessous ne compile pas correctement pour exiger des dépendances dans la sortie JS. Cela entraîne un tas de fichiers manquants dans le navigateur.

Voici un exemple du tapuscrit avec une instruction d'importation d'un autre fichier - l'autre fichier ressemble beaucoup à ce code avec une interface exportée et classe:

Si vous pouvez me aider à comprendre ce qui se passe ici, il serait grandement apprécié.

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

     } 
    } 
    // 
} 
// 

Vous pouvez voir que ChecklistItemState est utilisé non seulement dans l'interface de IChecklistItem mais aussi la classe de ChecklistItem comme « État ».

Vous imagine que la compilation de ce code serait require pour le fichier ./ChecklistItemState mais voici le code compilé réel:

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 

Pour montrer qu'il compile tout autre code correctement est ici une autre extrait de code qui affiche correctement l'appel "define" dans le JS compilé.

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

Et voici la sortie de ce code compilé:

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

Les résultats de la compilation semblent bien pour moi.

Qu'est-ce qui se passe est que le compilateur TypeScript va émettre une dépendance dans le code compilé pour les modules que vous importez si et seulement si votre code en dépend au moment de l'exécution. Si votre code ne dépend que d'eux pour la vérification de type, alors il s'agit d'une dépendance à la compilation et le compilateur n'émettra pas de dépendance dans le code compilé.

Dans votre premier extrait de typeScript, vous dépendez de ./ChecklistItemState uniquement au moment de la compilation, afin d'effectuer des vérifications de type, et non au moment de l'exécution, vous n'avez donc pas de dépendance. (Si vous avez ajouté une déclaration comme new ChecklistItemState ou x instanceof ChecklistItemState, alors vous auriez un depenency d'exécution et obtiendriez une dépendance émis dans le code compilé.)

Dans votre 2ème extrait dactylographié, vous utilisez new SnakeViewModel. Votre code doit donc être capable de trouver la fonction SnakeViewModel au moment de l'exécution, et une dépendance d'exécution est donc nécessaire pour que votre code s'exécute.