与 AMD 和导出模块不匹配的匿名 define() 模块打字稿答案

【问题标题】：mismatched anonymous define() module typescript with AMD and export module与 AMD 和导出模块不匹配的匿名 define() 模块打字稿
【发布时间】：2016-04-28 02:01:01
【问题描述】：

我正在尝试使用 Typescript(1.7.5) 和 AMD 模块创建应用程序。我添加了对 r.js 和 requirejs.js 的引用。以下是我的 TS 代码：

export module TestNs {
    export class TestClass {
        public fn(): void{
            debugger;
        }
    }
}

这是我调用“fn()”的aspx页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TypeScriptPage.aspx.cs" Inherits="WebApplication1.TypeScriptPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div1">
        </div>
        <script src="Scripts/r.js"></script>
        <script src="Scripts/require.js"></script>
        <script src="Scripts/TypeScriptBegin.js"></script>
        <script type="text/javascript">

            var testObj = new TestNs.TestClass();
            testObj.fn();

        </script>
    </form>
</body>
</html>

但我遇到以下错误：

TestNS 未定义

“JavaScript 运行时错误：不匹配的匿名 define() 模块：函数 (require,exports)”

但是，当我删除 "export" 关键字时，上面的代码可以正常工作。我是 Typescript 和 requirejs 的新手。谁能指出我做错了什么以及如何解决这个问题？

提前致谢。

【问题讨论】：

标签： typescript visual-studio-2013 requirejs amd

【解决方案1】：

我认为您应该删除以下行：

export module TestNs

类型脚本中的每个文件都是一个模块，所以你不需要那个部分。

编辑

然后在您的 javascript 中删除脚本标记以加载您的类并使用如下内容：

var moduleName = 'Scripts/TypeScriptBegin';
require([moduleName], function(TestNs){
            var testObj = new TestNs.TestClass();
            testObj.fn();
})

希望这会有所帮助。

【讨论】：

如果我删除“export”关键字，那么它也可以正常工作，因为它现在正在创建“define("require","exports",require,exports)" 标签，但是代码不会使用 requirejs在运行时加载任何依赖项。当我根据您的建议修改代码时，出现以下错误：0x800a139e - JavaScript 运行时错误：尚未为上下文加载模块名称“Scripts/TypeScriptBegin”：_。使用 require([])
再问一个问题，如果我删除'export module TestNs'，那么第二行是否应该使用TestNs？以及何时会触发 fn 中的调试器？
不，你不应该。导入时将为模块分配名称。在 requirejs 的情况下 - 它是函数中传递的参数的名称（TestNs）。我已经在最新的 chrome 中测试了上面的代码 - 调试器将在加载页面时停止。
好的。感谢您的帮助。通过反复试验，我找到了使用“导出模块 ModName”的建议的扩展。请参阅我发布的答案。

【解决方案2】：

感谢Amid，我找到了答案（以防将来有任何身体需要）：

TypeScriptBegin.ts

export module TestNs {
    export class TestClass {
        public fn(): void {
            //var v = new TSTest.TSTest.TestClass();
            debugger;
            //v.fn();
        }
    }
}

从 aspx 调用：

<script src="Scripts/r.js"></script>
        <script src="Scripts/require.js"></script>
        <script type="text/javascript">

            var moduleName = 'Scripts/TypeScriptBegin';
            require([moduleName], function (TestMod) {
                var testObj = new TestMod.TestNs.TestClass();
                testObj.call();
            });

        </script>

【讨论】：

在这里查看“不需要的命名空间”部分：github.com/Microsoft/TypeScript-Handbook/blob/master/pages/…
不错的信息，值得一读。但是我正在开发的应用程序已经存在并且非常庞大，以至于我将不得不使用模块。