Как экспортировать класс TypeScript таким образом, чтобы он не нарушал доступ к объекту с использованием простого старого ванильного JavaScript

Question

Простите мое невежество по этому поводу, я застрял и надеюсь получить какое-то руководство.

Возьмите этот Greeter пример класса, найденный на странице детской площадки TypeScript :

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 теперь связан с этим блоком определения, я, очевидно, не могу создать экземпляр нового класса как такового:

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

Выдает ошибку:

Uncaught ReferenceError: Greeter is not defined

1. Как мне экспортировать этот класс таким образом, чтобы не нарушить доступ к объекту, скажем, в стиле ванильного JavaScript?
2. Возможно ли то, что я пытаюсь сделать?
3. Это разумная цель, или я здесь совершенно не на том пути?

Answer 1

Хороший вопрос, то, что вы спрашиваете, вполне разумно.

Прежде всего, стоит отметить, что то, что вы называете «vanilla JavaScript», - это ES5 с совместимостью с библиотекой модулей AMD. ES6 представил модули уровня родного языка для JavaScript, то есть синтаксиса export и import.

В TypeScript есть опция компилятора --module, которая позволяет вам выбрать, для какого модуля нужно скомпилировать и произвести вывод. Однако в случае внешних модульных систем, таких как AMD и CommonJS, он фактически не выводит модульную систему, необходимую для его работы, он просто излучает JavaScript, совместимый с этими системами. Вы можете включить модульную систему, такую ​​как RequireJS , или запустить в среде со встроенной поддержкой, такой как модульная система NodeJS CommonJS. Если вы установите для цели --module значение es6, вы увидите, что он оставляет операторы export как есть, и это будет работать в браузере, который поддерживает модули ES6 (при условии, что путь импорта разрешается в файл, к которому браузер может получить доступ). ).

Стоит также упомянуть, что с помощью комплектов JavaScript, таких как Webpack или Browserify, вы можете взять практически любой вывод модуля из TypeScript и связать его для браузера без необходимости представлять модуль времени выполнения самостоятельно, потому что об этом заботится упаковщик.

Надеюсь, это поможет.