如何使用普通的旧版JavaScript JavaScript以不中断访问对象的方式导出TypeScript类

Question

原谅我的无知，我被困住了，希望得到一些指导。

以在TypeScript的游乐场页面上找到的Greeter类示例为例：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

我的任务是构建和管理可以在纯HTML + JavaScript环境以及Angular应用程序中使用的单个组件。 我正在用TypeScript管理/编写此代码，并使用TypeScript将输出编译为JavaScript。

回到上面的示例，如果我想在Angular中提供该类（作为导入），我需要导出该类吗？

export class Greeter {
    ...
}

当我这样做时，页面将引发错误：

Uncaught ReferenceError: define is not defined

编译后的JavaScript如下所示：

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Greeter = /** @class */ (function () {
        function Greeter(message) {
            this.greeting = message;
        }
        Greeter.prototype.greet = function () {
            return "Hello, " + this.greeting;
        };
        return Greeter;
    }());
    exports.Greeter = Greeter;
    var greeter = new Greeter("world");
});

因为现在Greeter类已绑定到该define块，所以我显然不能像这样实例化新类：

let greeter = new Greeter("world"); // < -- Won't work.

引发错误：

Uncaught ReferenceError: Greeter is not defined

1. 我将如何以不会破坏普通JavaScript语言访问对象的方式导出该类？
2. 我要做什么甚至有可能吗？
3. 这是一个合理的目标，还是我在这里完全走错了路？

Answer 1

好问题，您要问的绝对是合理的。

首先，值得一提的是，您所说的“原始JavaScript”是具有AMD模块库兼容性的ES5。 ES6在JavaScript中引入了本机语言级别的模块，这就是export和import语法。

TypeScript有一个编译器选项 --module ，可让您选择要编译的模块目标并为其生成输出。 但是，对于外部模块系统（例如AMD和CommonJS ，它实际上并不输出使其正常工作所需的模块系统，而只是发出与那些系统兼容的JavaScript。 是否包含模块系统（例如RequireJS ）或在内置支持的环境（例如NodeJS的CommonJS模块系统）中运行，完全取决于您。 如果将--module目标设置为es6您将看到它按es6了export语句，这将在支持ES6模块的浏览器中正常工作（假设导入路径解析为浏览器可以访问的文件）。

还值得一提的是，使用Webpack或Browserify之类的JavaScript捆绑器，您几乎可以从TypeScript中获取任何模块输出并将其捆绑到浏览器中，而无需自己引入模块运行时，因为捆绑器会处理它。

希望能有所帮助。