如何使用 AMD 和 RequireJS 从 JavaScript 访问导出的 TypeScript 类答案

【问题标题】：How to access exported TypeScript class from JavaScript using AMD and RequireJS如何使用 AMD 和 RequireJS 从 JavaScript 访问导出的 TypeScript 类
【发布时间】：2017-05-24 20:00:57
【问题描述】：

我在文件中有以下 TypeScript 类：bar.ts

export class Bar {
   log(message:string):void {
       console.log(message);
   }
}

在文件 foo.ts 我有：

import { Bar } from "bar";

window.onload = () => {
   var foo = new Bar();
   foo.log("Hello World");
};

我正在编译：

lib: ["dom", "es2015.promise", "es2015"]
module: "amd"
declarationFiles: true
target: "ES5"
noImplicitAny: true
out: "test.js

如何实例化 Bar 类？不调用 window.onload 事件。以下是生成的代码：

define("bar", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Bar = (function () {
        function Bar() {
        }
        Bar.prototype.log = function (message) {
            console.log(message);
        };
        return Bar;
    }());
    exports.Bar = Bar;
});

define("foo", ["require", "exports", "bar"], function (require, exports, bar_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    window.onload = function () {
        var foo = new bar_1.Bar();
        foo.log("Hello World");
    };
});

有没有办法从标准 JavaScript 中引用 Bar？我在 HTML 页面中包含了 require.js，页面加载时没有 JavaScript 错误。

这是问题的简化版本，但我需要使用导出，因为该项目有许多类，每个类都存储在单独的文件中，我需要将它们组合成一个文件。

【问题讨论】：

标签： javascript typescript

【解决方案1】：

您应该能够从常规 javascript 中引用 Bar。尝试从 requirejs 数据主脚本中执行此操作。

在 HTML 中：

<script data-main="scripts/main" src="scripts/require.js"></script>

在脚本/主目录中：

requirejs(["bar"], function(bar) {});

【讨论】：