Question

我有一个JavaScript文件，要将文件上传到Microsoft Dynamics CRM。此JavaScript文件通过RequireJS引用另一个JavaScript文件。它引用的JavaScript文件是从几个Typescript文件编译而来的。 Typescript文件设置模型以存储要上载的数据以及与Dynamics API交互的逻辑。我已经阅读了Typescript / RequireJS文档以及一些相关的SO问题，但我还没有弄清楚如何让RequireJS中的define语句正常工作，这样我就可以使用我的模型＆amp;我的JavaScript文件中的Dynamics API逻辑。我是否正确地从Typescript导出我的类？我在JavaScript中正确定义了我的导入吗？

Model.ts

export class ExpenseTransaction extends ModelBase {

    public Field1: string;
    public Field2: number;
    .
    .
    .

    constructor() {
        super();
    }

    toJSON(): any {
        let json = {
            "ccseq_Field1@odata.bind": this.Connection + "(" + this.Field1 + ")",
            "ccseq_Field2": this.Field2, 
             .
             .
             .               
        };

        return json;

    }

}

WebAPI.ts

import * as Model from './Model';

export class ExpenseTransaction extends APIBase {

constructor() {
    super();
}

ConvertToEntity = (data: Array<Object>): Array<Model.ExpenseTransaction> => {
    let result: Array<Model.ExpenseTransaction> = new Array<Model.ExpenseTransaction>();
    for (let i: number = 0; i < data.length; i++) {

        let newRecord: Model.ExpenseTransaction = new Model.ExpenseTransaction();

        newRecord.Field1 = data[i]["_Field1_value"];
        newRecord.Field2 = data[i]["ccseq_Field2"];

        result[i] = newRecord;
    }
    return result;
}

Get(): Promise<{}> {
    let expenses: Array<Model.ExpenseTransaction>;
    let self = this;
    return new Promise((resolve, reject) => {
        $.ajax({
            url: this.ExpenseTransaction,
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: (data: any): void => {resolve(self.ConvertToEntity(data.value));},
            error: (data: any) => { reject(data.status); }
        });
    });
};

Create(expense: Model.ExpenseTransaction): Promise<{}> {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: this.Connection,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(expense.toJSON()),
            success: (data: any): void => {resolve(data.value);},
            error: (data: any) => {reject(data.status);}
        });
    });
};
}

编译的稿件

define("CCSEQ/Model", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });

    class ExpenseTransaction extends ModelBase {
        constructor() {
            super();
        }
        toJSON() {
            let json = {
                "ccseq_Field1@odata.bind": this.Connection + "(" + this.Field1 + ")",
                "ccseq_Field2": this.Field2
            };
            return json;
        }
    }
    exports.ExpenseTransaction = ExpenseTransaction;

define("CCSEQ/WebAPI", ["require", "exports", "CCSEQ/Model"], function (require, exports, Model) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });

    class ExpenseTransaction extends APIBase {
        constructor() {
            super();
            this.ConvertToEntity = (data) => {
                let result = new Array();
                for (let i = 0; i < data.length; i++) {
                    let newRecord = new Model.ExpenseTransaction();
                    newRecord.Field1 = data[i]["_Field1_value"];
                    newRecord.Field2 = data[i]["Field2"];
                    result[i] = newRecord;
                }
                return result;
            };
        }
        Get() {
            let expenses;
            let self = this;
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: this.ExpenseTransaction,
                    type: "GET",
                    contentType: "application/json",
                    dataType: "json",
                    success: (data) => { resolve(self.ConvertToEntity(data.value)); },
                    error: (data) => { reject(data.status); }
                });
            });
        }
        ;
        Create(expense) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: this.Connection,
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(expense.toJSON()),
                    success: (data) => { resolve(data.value); },
                    error: (data) => { reject(data.status); }
                });
            });
        }
        ;
    }
    exports.ExpenseTransaction = ExpenseTransaction;

JavaScript.js

    requirejs.config({
    bundles: {
        '../CCSEQ.Library': ['CCSEQ/Model']
    }
})

define(["require", "../jquery-3.1.1", "../papaparse.min", "CCSEQ/Model"], function (require, jquery, Papa, Model) {
    "use strict"; 
    $(document).ready(() => {
        //$("#loading").hide();
        setupHandlers();
    });
    function setupHandlers() {
        "use strict";
        $("#csv-file").change((e) => {
            //$("#loading").show();
            let file = e.target.files[0];
            if (!file) {
                return;
            }
            Papa.parse(file, {
                complete: (results) => {
                    ImportExpenseTransaction(results.data);
                }
            });
        });
    }
    function ImportExpenseTransaction(data) {
        let importData = new Array();
        data.forEach((expense) => {
            let newRecord = new Library.Model.ExpenseTransaction();
            newRecord.Field1 = expense["Field1"];
            newRecord.Field2 = expense["Field1"];
            importData.push(newRecord);
        });
        let expenseTransactionAPI = new ExpenseTransaction();
        expenseTransactionAPI.Create(importData[0]).then(() => { console.log("success"); }).catch(() => { console.log("failure"); });
    }
});

Answer 1

您似乎没有为../CCSEQ.Library定义的模块，因为它可能是您选择的文件名，但其中唯一的ID是CCSEQ/Model和CCSEQ/WebAPI

通常在AMD中，每个文件会有一个模块，但可以告诉他们使用一些额外的配置（http://requirejs.org/docs/api.html#config-bundles）将多个模块映射到一个文件

requirejs.config({
  bundles: {
    'js/CCSEQ.Library': ['CCSEQ/Model', 'CCSEQ/WebAPI']
  }
})

其中js/CCSEQ.Library是相对于baseUrl的js文件的路径（我假设您的编译TS位于/js/CCSEQ.Library.js - 替换您的真实路径，减去.js扩展）

然后，您将直接需要模块本身，这将使用查找来加载正确的父文件

require(["../jquery-3.1.1", "../papaparse.min", "CCSEQ/Model",  "CCSEQ/WebAPI"], (jquery, Papa, Model, WebAPI) {
  const myModel = new Model.ExpenseTransaction()
  const myAPI = new WebAPI. ExpenseTransaction()
})

或者，如果您想通过单个库模块进行访问，则需要添加另一个打字稿模块以将其导出...

Library.ts

import * as Model from './Model'
import * as WebAPI from './WebAPI'
export default { Model, WebAPI }

这应创建一个模块CCSEQ/Library 如果您要将编译后的TS输出到相对于RequireJS baseUrl的CCSEQ/Library.js，您应该可以直接使用它而无需额外的配置，否则就像之前一样进行映射配置

requirejs.config({
  bundles: {
    'js/CCSEQ.Library': ['CCSEQ/Library']
  }
})

require(["../jquery-3.1.1", "../papaparse.min", "CCSEQ/Library"], (jquery, Papa, Library) {
  const myModel = new Library.Model.ExpenseTransaction()
  const myAPI = new Library.WebAPI.ExpenseTransaction()
})

如何在JavaScript文件中引用导出的typescript类？

Model.ts

WebAPI.ts

编译的稿件

JavaScript.js

1 个答案: