如何在typescript文件中导入没有定义文件的js库

IT技术 javascript requirejs typescript
2021-02-23 19:07:32

随着我们的项目越来越大，我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理。但是，我们将许多库用作 amd module，我们不想将其转换为 TypeScript。

我们仍然想将它们导入到 TypeScript 文件中，但我们也不想生成定义文件。我们怎样才能做到这一点？

例如新的typescript文件：

/// <reference path="../../../../definetelyTyped/jquery.d.ts" />
/// <reference path="../../../../definetelyTyped/require.d.ts" />
import $ = require('jquery');
import alert = require('lib/errorInfoHandler');

这lib/errorInfoHandler是一个包含在我们不想接触的巨大 JavaScript 库中的 amd module。

使用上面的代码会产生以下错误：

Unable to resolve external module ''lib/errorInfoHandler'' 
Module cannot be aliased to a non-module type.

这实际上应该产生以下代码：

define(["require", "exports", "jquery", "lib/errorInfoHandler"], function(require, exports, $, alert) {
...

}

有没有办法将 JavaScript 库作为 amd module导入 TypeScript 并在 TypeScript 文件中使用它而无需制作定义文件？

5个回答

此处给出的 2 个答案的组合对我有用。

//errorInfoHandler.d.ts
declare module "lib/errorInfoHandler" {
   var noTypeInfoYet: any; // any var name here really
   export = noTypeInfoYet;
}

我仍然是 TypeScript 的新手，但看起来这只是通过导出一个没有类型信息的虚拟变量来告诉 TypeScript 停止的一种方式。

编辑

在此答案的评论中已经指出，您只需声明即可获得相同的结果：

//errorInfoHandler.d.ts
declare module "*";

请参阅此处的 github 评论。

请注意'声明module“module名称”；' 将只允许这个module没有类型，而 '*' 将声明所有module具有更多类型。我们更喜欢前者，因为我们可以根据具体情况确定哪些module没有类型。
2021-04-21 19:07:32
是的 - 只需根据 @gronostaj 使用这个最小声明。
2021-05-11 19:07:32
您可以跳过declare module刚刚添加的部分 yvar
2021-05-16 19:07:32
根据GitHub上的这个评论就 declare module "*"足够了。
2021-05-16 19:07:32

使用以下内容创建自己的定义文件：

declare module "lib/errorInfoHandler" {}

并在要使用导入的位置引用此文件。

或者将以下行添加到文件的顶部：

/// <amd-dependency path="lib/errorInfoHandler">

注意：我不知道后者是否仍然有效，这是我最初处理缺少的 AMD 依赖项的方式。另请注意，使用这种方法，您将不会拥有该文件的 IntelliSense。

在lib名为errorInfoHandler.d.ts. 在那里，写：

var noTypeInfoYet: any; // any var name here really
export = noTypeInfoYet;

现在alert导入将成功并且类型为any。

谢谢你的信息。但是它仍然抛出错误`无法解析外部module`我需要在import require语句中添加带有扩展名的js文件的路径吗？
2021-04-23 19:07:32
在第一行declare之前需要Avar才能工作
2021-05-04 19:07:32

通常，如果您只需要一个临时更快的解决方案，可以通过index.d.ts在项目文件夹的根目录中定义一个 new 来完成，然后创建一个类似于package.json文件中描述的module名称

例如 

// somefile.ts
import Foo from '@awesome/my-module'

// index.d.ts on @awesome/my-module
declare module '@awesome/my-module' {
  const bind: any;
  export default bind;
}

在 2020 年遇到了那个问题，并找到了一个简单的解决方案：

  1. 在 TS 项目的根目录中创建一个decs.d.ts文件。

  2. 放置此声明：

    declare module 'lib/errorInfoHandler';

这消除了我的情况下的错误。我正在使用 TypeScript 3.9.7

其它你可能感兴趣的问题
上一篇jQuery - 仅从元素获取第一个类 下一篇检查输入的数字是否是 jquery 中的数字