将 RequireJS 与 TypeScript 一起使用并保留 Intellisense答案

【问题标题】：Using RequireJS with TypeScript and Retaining Intellisense将 RequireJS 与 TypeScript 一起使用并保留 Intellisense
【发布时间】：2013-08-04 13:21:52
【问题描述】：

我已经习惯在 Visual Studio 中使用 TypeScript，但只编写纯 JavaScript（我意识到 TypeScript 自定义语法的强大功能，但更喜欢对冲我的赌注并保持我的 JS 熟练度！）。我的问题与在这种环境中使用 RequireJS 有关。例如：

require(["jquery", "app/utils.js"], function ($, utils) {
    console.log(utils.doSomething());
});

...我的 utils.js 看起来像这样：

define([], function () {
    var doSomething = function () {
        return "ok";
    };
    return {
        doSomething: doSomething
    };
});

这是我用 TypeScript 写的。在我完美的小世界中，我希望能够在这种情况下利用智能感知来查看utils 的属性（所以当我输入utils 时，我会看到utils.doSomething 作为一个选项）。

我猜答案是“做不到”，我必须使用导入/导出 TS 语法，但我想我还是会检查一下！

【问题讨论】：

为什么不直接写 TypeScript？如果您稍后改变主意，只需编译一次代码，删除 .ts 文件，然后开始编辑生成的 .js 文件。
如果您不想使用 typescript，我建议您使用 webstorm，因为它可以根据需要提供语法 .intelisence。如果你使用 Visual Studio，你也可以使用 resharper，但不太确定。
很好的回应，谢谢！看起来是时候咬紧牙关，全力以赴使用 TypeScript。

标签： typescript

【解决方案1】：

TypeScript 默认使用 CommonJS 样式的模块导出（即将成员分配给 exports 变量）。这是在 TypeScript 中使用 Intellisense 支持 Visual Studio 的方法：

define([], function () {
    var doSomething = function () {
        return "ok";
    };
    var r = {
        doSomething: doSomething
    };
    export = r;
});

但是，如果您想 100% 使用 JavaScript，则需要为您的模块编写类型定义文件 app.d.ts 以提供类型信息：

declare module "app/utils"
{
        function doSomething(): string;
}

在您的应用中：

///<reference path="app.d.ts" />

require(["jquery", "app/utils"], function ($, utils) {
    console.log(utils.doSomething());
});

【讨论】：

【解决方案2】：

如果 utils.js 确实是一个 javascript 文件，那么 TypeScript 不会免费为您提供智能感知。您需要为 javascript 文件编写声明：

因此您可以创建一个 utils.d.ts 文件，如下所示：

module utils {
    doSomething():string;
}

这将使您能够将其添加到您的原始文件中：

///<reference src="app/utils.d.ts" />

现在你应该得到智能感知了。

然而这感觉很不对劲，你为什么要为你自己写的new javascript代码写定义文件，这几乎就像写了两次代码一样。如果您可以硬着头皮继续使用打字稿，那么您应该这样做。对冲你的赌注，让你做更多的工作（当然，如果我们谈论的是现有代码，那么定义/声明文件可能是值得的，因为你不必移植现有代码。

【讨论】：

【解决方案3】：

你可以内联定义接口：

require(["jquery", "app/utils.js"], function ($, utils : { doSomething:()=>string; } ) {
    console.log(utils.doSomething());
});

还是在外面

interface IUtils {
    doSomething:()=>string; 
}
require(["jquery", "app/utils.js"], function ($, utils : IUtils ) {
    console.log(utils.doSomething());
});

【讨论】：