TypeScript AMD 无法使用自定义 require.config baseUrl 解析外部模块答案

【问题标题】：TypeScript AMD unable to resolve external module with custom require.config baseUrlTypeScript AMD 无法使用自定义 require.config baseUrl 解析外部模块
【发布时间】：2015-01-18 20:14:36
【问题描述】：

我在使用 typescript + requirejs 时遇到了一些问题。我有两个项目（主要的一个和一个带有单元测试的项目）。它看起来像这样：

模块A.ts：

export class A {
    constructor(someThing: string) {
        this.someThing = someThing;
    }
    someThing: string;
}
export var aInst = new A("hello from module A");

模块B.ts：

import moduleA = require('moduleA');

export class B {
    private a: moduleA.A;

    constructor(a: moduleA.A) {
        this.a = a;
    }

    getSomeThing() {
        return this.a.someThing;
    }
}

export var bInst = new B(moduleA.aInst);

要求配置.js：

require.config({
    baseUrl: "/app",
});

myTest.ts：

import moduleB = require('moduleB');

QUnit.test('my test', () => {
    QUnit.equal("hello from module A", moduleB.bInst.getSomeThing());
});

testRequreConfig.js：

require.config({
    baseUrl: "../Base/app",
});

索引.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="Content/qunit.css" type="text/css" />
    <script type="text/javascript" src="Scripts/qunit.js"></script>

    <script src="Scripts/require.js"></script>
    <script src="test/testRequreConfig.js"></script>
</head>
<body>
    <h1 id="qunit-header">Unit Tests</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture">test markup, will be hidden</div>

    <script type="text/javascript">
        (function () {
            QUnit.config.autostart = false;
            require(['test/myTest.js'], QUnit.start);
        }());
    </script>
</body>
</html>

我们无法更改 Base 项目。我们希望能够在 Test 项目中使用 moduleB（通过 'moduleB' 字符串由 requirejs 加载）。我们有什么：

TypeScript 编译器无法解析外部模块（因为它不知道在哪里寻找它）。如果我们把

declare module "moduleB" {
 
    export  ...
}

在 *.d.ts 文件中 - 然后我们就可以使用它了。但是在实际项目中，我们有很多打字稿文件，不可能为每个文件手动编写“声明”。有什么办法可以处理吗？主要问题是我们无法编辑 require.config（由于某些原因）。

是否可以让 tsc.exe 了解 require.config？

【问题讨论】：

当前的解决方法是为每个模块编写 .d.ts 文件 declare module "moduleB" {...} 使用自定义名称（相对于 require.config baseUrl）。是否可以使用带有自定义名称字符串的环境模块声明使 tsc.exe 生成 .d.ts？如果我们能以某种方式在 tsc 生成的 .d.ts 文件的内容周围添加 declare module %some_string% { 和 } （并删除所有 declare 关键字）。
好的，完成了“构建后”事件并更正了 tsc 生成的 .d.ts 文件（用 declare module 包装，相对路径对应于 require.config 中的 baseUrl） .这是一种可行的解决方法，但仍然只是一种解决方法。继续寻找更好的解决方案。

标签： visual-studio requirejs typescript amd

【解决方案1】：

是否可以让 tsc.exe 了解 require.config？

很遗憾，没有。您的两个选项是创建 def 来告诉 typescript 配置或使用完整的相对路径。

【讨论】：

完整路径对我来说不是解决方案，因为在项目中我们有模块依赖项，这些依赖项在运行时由 requirejs 及其自定义 baseUrl 解决（我们导入模块，该模块导入另一个模块等等）。
@ValeryPetrov 完整的相对路径
相对路径和绝对路径都不能解决我们的问题，因为我们在 require.config 中有自定义的 baseUrl。因此，如果我们将完整的相对路径放入 import ... = require(...) 构造中，requirejs 将找不到任何模块。由于自定义 baseUrl 导致的所有问题 - tsc 对此一无所知，如果我们在 require(...)
@ValeryPetrov 大家找到解决方案了吗？为同样的事情苦苦挣扎。
@YngvarKristiansen 相对路径始终相对于当前文件，不应受 baseUrl 影响。我使用这个（并与其他人一起维护）：github.com/grunt-ts/grunt-ts#transforms

【解决方案2】：

我找到了一个可能对你也有帮助的解决方法。

我注意到 jquery.d.ts 的底部有以下代码：

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

遇到 TypeScript import x=require(<module string>); 语句时找到环境模块声明。

使用这种技术，您可以定义您的类型，然后添加导出这些类型并在 require 中被识别的环境模块声明。

【讨论】：