如何在打字稿文件中导入没有定义文件的js库

问题描述 投票:0回答:6

随着我们的项目变得越来越大,我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理。然而,我们使用许多库作为 amd 模块,我们不想将其转换为 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
是一个amd模块,包含在一个巨大的JavaScript库中,我们不想触及它。

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

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 模块导入到 TypeScript 中,并在 TypeScript 文件中使用它,而无需创建定义文件?

javascript requirejs typescript
6个回答
32
投票

这里给出的 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 评论此处


5
投票

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

declare module "lib/errorInfoHandler" {}

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

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

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

注意:我不知道后者是否仍然有效,这就是我最初处理缺失的 AMD 依赖项的方式。另请注意,使用此方法您将无法获得该文件的 IntelliSense。


2
投票

lib
中创建一个名为
errorInfoHandler.d.ts
的文件。在那里写:

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

现在

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


0
投票

通常,如果您只想需要一个临时更快的解决方案,可以通过在项目文件夹的根目录中定义一个新的

index.d.ts
来完成,然后创建一个如
package.json
文件中所述的模块名称

例如

// 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;
}

0
投票

在 2020 年遇到了这个问题,并找到了一个简单的解决方案:

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

  2. 放置此声明:

    declare module 'lib/errorInfoHandler';
    

这消除了我的案例中的错误。我正在使用 TypeScript 3.9.7


0
投票

尝试忽略这样的打字稿错误如何

// @ts-ignore
import alert = require('lib/errorInfoHandler');
© www.soinside.com 2019 - 2024. All rights reserved.