在 TypeScript 中使用 import/require 来获取接口声明

Posted 2023-03-13

【中文标题】在 TypeScript 中使用 import/require 来获取接口声明

【英文标题】：Use import/require in TypeScript to get interface declarations

【发布时间】：2012-10-10 14:54:40

【问题描述】：

如果我使用 /// <reference path="..."/> 语法引用 TypeScript 声明文件（例如 jquery.d.ts），我需要确保通过其他方式加载相应的库，即仅引用 .d。 ts 文件不加载库。

有没有办法让 TypeScript 在我使用它时为库生成 require() 调用？如果我不使用 AMD/requirejs，我可以手动调用 require，但我想让它与 AMD 一起使用。

这样做的好处是我的依赖项不会在两个地方定义。从 .ts 文件中引用库就足以确保它加载，而不必在我的 html 中手动维护依赖项列表。

更新：我打开了new question，澄清了我的确切情况。由于我没有提供所有必要的详细信息，因此我想感谢我对原始问题的回答。

【参考方案1】：

是的，TypeScript 支持“外部”模块，这些模块基本上是一流的 AMD 或 CommonJS 模块。例如：

MyLib.ts

export function foo()  return 'bar' 

MyProj.ts

import lib = module('./MyLib.ts')
lib.foo(); // returns bar

用“--module amd”编译它，你会得到正确的模块和为你生成的语法。

【讨论】：

Modules 非常适合直接提供函数和变量的库，但对于扩展现有功能（如 jQuery 插件）的库，我需要类似的东西。其中没有可导出的内容，但加载它们会在 JQuery 接口（在 jquery.d.ts 中定义）上添加额外的调用

平心而论，我认为您的回答确实适用于我原来的问题。我只是没有完全说明我的问题。我会将此标记为答案并提出更清晰的问题。

【参考方案2】：

我在我的博客上写了something 关于这个。您还可以在 GitHub 上找到示例。

解决方案的解释相当长，但基本上我使用带有 Require.JS 的填充程序来定义一个代表我要加载的 javascript 库的模块名称。然后我创建一个同名的 TypeScript 文件，让 TypeScript 编译器生成可以使用我想要的 JS 库的 Javascript 代码。像这样真的没有意义，但请阅读帖子，我认为它会更有意义。

【讨论】：

感谢您的回复。但是我认为这不能解决我的问题。此解决方案仍假定库至少有一个***调用，以便 TypeScript 将在 define 调用中生成依赖项。我没有任何***方法或变量，因为这些库是扩展现有功能的插件。另外我认为你真的不需要在你的例子中使用垫片。如果你只是在 underscore.js 旁边创建一个 underscore.d.ts，你可以导入 'libs/underscore' 模块，TypeScript 将使用 .d.ts 文件。

d.ts 文件仅由 Typescript 用于确定您的代码是否正确键入。基本上它只是一个接口，因此 Typescript 编译器不会生成任何代码。您必须以某种方式提供 Javascript 库的实现。一种解决方案是在 html 中引用您不想做的 Javascript 文件。另一种解决方案是使用 AMD 异步加载它。这就是我提出的解决方案。

明白，但我仍然认为您的解决方案由于垫片而不必要地复杂。

是的，但我没有找到另一个更简单的解决方案。请注意，此解决方案适用于无法修改的库，例如 JQuery。我看到了你的另一个问题，我承认情况并非如此。

为什么不直接使用import underscore = module('libs/underscore'); 并拥有一个libs/underscore.d.ts 文件？这样一来，TypeScript 就可以找到声明并加载生成的代码下划线，而无需定义任何别名。此外，我假设您使用的是支持 AMD 样式加载的旧版本下划线。貌似最新的版本只支持全局'_'。