当使用AMD模块时，避免在Typescript中重复引用/导入外部javascript库

Avoid duplicate reference / import of external javascript library in Typescript when using AMD modules

本文关键字：引用 导入 javascript 外部 Typescript AMD 模块      更新时间：2023-09-26

假设我使用--module AMD来获得AMD模块对Typescript的支持并使用requirejs。现在，使用来自DefinetelyTyped的jquery.ts.d，我提出了以下最小的例子:

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require("jquery");
export class Greeter
{
    sayHello() {
       $('#mydiv').text('hello world');
    }
}

可以清楚地看到，我必须两次引用jQuery:一次通过///<reference ... />语句，一次通过import jquery = require("jquery")语句。

现在，如果我省略///<reference ... />部分，typescript编译器tsc将会报错未知的$变量。另一方面，如果我省略import语句，编译将工作，但在运行时jQuery将不包括在内(因为它不在编译的源代码中所需组件的列表中)。

所以我看到的唯一方法就是总是包括这两个陈述，这对我来说是错误的，因为我在重复自己。这是"预期的方式"(TM)吗?还是我遗漏了什么?

我建议添加一个vendor.d.ts文件来整合所有外部定义，如:

/// <reference path="./jquery/jquery.d.ts" />
/// <reference path="./other/other.d.ts" />

然后你只引用vendor.d.ts: 

/// <reference path="../../typings/vendor.d.ts" />
import $ = require("jquery");

顺便说一句，如果你使用的是tsd https://github.com/DefinitelyTyped/tsd，它会为你创建一个tsd.d.ts文件，扮演vendor.d.ts的角色

如果在相同的路径中有一个名为jquery.d.ts的文件，并且该文件是用顶级导出(而不是declare module "jquery" {)编写的，那么您不需要引用标记。

你也可以通过你所有的d。ts文件作为tsc的显式参数

否则，编译器无法知道在哪里找到关于jQuery模块的类型信息。

相关文章：