可以在不使用 export 命令的情况下编写此打字稿答案

【问题标题】：Possible to write this typescript without using the exports command可以在不使用 export 命令的情况下编写此打字稿
【发布时间】：2016-08-11 23:34:05
【问题描述】：

学习 TypeScript 并拥有一个简单的 Angular 服务：

interface IBaConfigFactory {
    dateTimeNow: Date; 
}

export class BaConfigFactory implements IBaConfigFactory {
    dateTimeNow: Date;

    constructor() { 
        this.dateTimeNow = new Date();
    }
}

angular
    .module("blogApp")
    .service("BaConfigFactory", BaConfigFactory);

但是浏览器抱怨：

baConfigService.ts:6 Uncaught ReferenceError: 未定义导出（匿名函数）@ baConfigService.ts:6 app.ts:48

根据我的学习，我需要 Webpack 或 CommonJS 之类的东西来让浏览器理解导出。是否可以重写它以便我不使用导出命令？一次只专注于学习一件事。

【问题讨论】：

我不知道是否有办法在不使用export 的情况下做到这一点。使用 VS2015 很容易包含一个模块系统。这些选项位于 TypeScript Build > Module system 下的 Project 属性中。
我必须在我的项目中包含 require.js。将我的 tsconfig.json 设置为以 es6 为目标，并使用 AMD 作为模块构建系统。成功了

标签： javascript angularjs typescript visual-studio-2015 typescript1.8

【解决方案1】：

如果您不使用模块系统加载文件，并且不将代码放在模块/命名空间中，则不需要导出。

例如，这应该可以正常工作：

class MyClass {
    private x: number;

    constructor(x: number) {
        this.x = x;
    }

    getX(): number {
        return this.x;
    }

    doit(y: number): number {
        return this.x * y;
    }
}

function echo(value: any): any {
    return value;
}

(sample.ts)

<html>
    <head>
        <script src="example.js"></script>
        <script>
            var a1 = new MyClass(10),
                a2 = new MyClass(43);

            console.log(echo("hey there!"));
            console.log(a1.doit(a2.getX()));
        </script>
    </head>
    <body></body>
</html>

不过，使用export 应该没问题，因为它不应该出现在编译后的js 中（只要确保不要在compiler options 中使用-m 或--module）。

例如，这个：

module MyModule {
    export class MyClass {
        private x: number;

        constructor(x: number) {
            this.x = x;
        }

        getX(): number {
            return this.x;
        }

        doit(y: number): number {
            return this.x * y;
        }
    }

    export function echo(value: any): any {
        return value;
    }
}

编译成这样：

var MyModule;
(function (MyModule) {
    var MyClass = (function () {
        function MyClass(x) {
            this.x = x;
        }
        MyClass.prototype.getX = function () {
            return this.x;
        };
        MyClass.prototype.doit = function (y) {
            return this.x * y;
        };
        return MyClass;
    }());
    MyModule.MyClass = MyClass;
    function echo(value) {
        return value;
    }
    MyModule.echo = echo;
})(MyModule || (MyModule = {}));

(Code in Playground)

您会注意到编译后的js中没有export。
那么你只需：

<html>
    <head>
        <script src="example.js"></script>
        <script>
            var a1 = new MyModule.MyClass(10),
                a2 = new MyModule.MyClass(43);

            console.log(MyModule.echo("hey there!"));
            console.log(a1.doit(a2.getX()));
        </script>
    </head>
    <body></body>
</html>

【讨论】：