javascript - 如何以一种不会中断使用普通旧式 JavaScript 访问对象的方式导出 TypeScript 类

Question

请原谅我对此的无知，我陷入困境并希望得到一些指导。

拿这个Greeter在 TypeScript 的 playground page 上找到的类示例:

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 类现在绑定(bind)到该定义 block ，所以我显然无法实例化这样的新类:

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

抛出错误:

Uncaught ReferenceError: Greeter is not defined

1. 我将如何导出该类，以一种不会中断以普通 JavaScript 方式访问对象的方式？
2. 我想做的事情可能吗？
3. 这是一个合理的目标，还是我完全走错了路？

Answer 1

问得好，你问的确实有道理。

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

TypeScript 有 compiler option --module 允许您选择要编译并生成输出的模块目标。然而，对于外部模块系统，例如 AMD 和 CommonJS，它实际上并不输出使其工作所需的模块系统，它只是发出与这些系统兼容的 JavaScript系统。由您决定是否包含模块系统，例如 RequireJS ，或者在内置支持的环境中运行，例如 NodeJS 的 CommonJS 模块系统。如果将 --module 目标设置为 es6，您将看到它按原样保留 export 语句，并且这可以在浏览器中使用支持 ES6 模块(假设导入路径解析为浏览器可以访问的文件)。

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

希望有帮助。