正确的步骤/语法，将库导入带有名称空间的typescript文件中


Proper steps/syntax to import a library into a typescript file with a namespace in it

我将Typescript与Nodejs，Windows 7 Ultimate x64一起使用。编译器为tsc。

我正在修改现有的代码库，其中有许多文件共享一个命名空间。因此，在每个文件的顶部都有一个声明，如下所示：

1
2
3
namespace program {
    ...
}

我正在尝试使JSZip库在此现有代码库中工作，但是我遇到了一些奇怪之处，我认为这与该命名空间有关。

在开始之前，我想描述一下如何设置库。
首先，我像这样调用npm进行安装：

1
2
npm install --save jszip
npm install --save @types/jszip

然后我将tsconfig.json设置为包含以下内容：

1
2
3
var map = {
    'jszip':                      'node_modules/jszip/dist/jszip.min.js'
};

我不确定该步骤是否重要，但可以允许在下面调用导入" jszip "。

然后我在代码中尝试了一些导入命令，但是遇到了错误。
首先，我尝试了：

1
2
3
4
5
import * as JSZip from 'jszip';

namespace program {
    ...
}

但这会导致该文件中的大量错误。我收到该大名称空间的"已声明名称空间但从未使用过"警告，至少在我正在执行导入调用的文件内。对该名称空间内对外部文件的每个引用也都被破坏了，对于那些我得到一个"找不到名称\\'... \\'"错误。因此，像这样调用导入似乎与名称空间的使用不兼容。

所以我尝试了：

1
2
3
4
5
namespace program {
    import * as JSZip from 'jszip';

    ...
}

因此，在这种情况下，我至少没有得到文件范围的错误，但是该行仍在创建错误。我得到的两个是"命名空间中的导入声明无法引用模块。"和"找不到模块jszip \\'"(值得注意的是，使用前一种方法时，我没有得到后者错误。)<铅>

因此，这使我认为我的方法或设置有问题，但是即使我停留在相对简单的地方，我仍无法找到资源来帮助您理解确切的问题。当然，我找到了一些我至少已经将有限的理解整理到一起的资源，但请参见以下链接：

类型/jszip：https://www.npmjs.com/package/@types/jszip

jszip：https：//www.npmjs.com/package/jszip

这是一个接近的示例，但与我的情况不同。我认为建议的解决方案无法在我的情况下起作用，但我可能会错：如何在TypeScript

中的导入中使用命名空间

这是我了解" import * ... "语法的线索，并将" map "属性添加到tsconfig：在Angular 2项目中导入JSZip

相关讨论

如何在具有串联JavaScript文件的老式环境项目中使用JSZip

根据官方文档，可以手动安装JSZip：

Manually : download JSZip and include the file dist/jszip.js or dist/jszip.min.js

对于TypeScript，最简单的方法是无需输入。创建具有以下内容的新文件：

1
2
// global-defs.d.ts
declare const JSZip: any;

或者，您可以尝试手动导入键入内容。创建文件jszip.d.ts并粘贴其键入的所有内容。现在，删除最后一行export = JSZip;。您的文件结尾为：

1
declare var JSZip: JSZip;

然后，软件包文档中的代码应该起作用。

全新项目的经典解决方案

在干净的目录中：

1
2
3
npm init
npm install --save jszip
npm install -D @types/jszip typescript

然后，创建一个有效的tsconfig.json文件。例如：

1
2
3
4
5
6
7
8
9
{
 "compilerOptions": {
   "module":"commonjs",
   "moduleResolution":"node",
  },
 "exclude": [
   "node_modules"
  ]
}

创建源文件：

1
2
3
4
5
// main.ts
import JSZip = require('jszip');

// Here, use the code from the package documentation
// here: https://www.npmjs.com/package/jszip

一些建议：

  • 请勿将import * as JSZip用于不是模块名称空间对象的内容。您应使用import JSZip = require(…)。
  • 请勿同时使用TypeScript名称空间和ES6模块。您的代码将导入一个模块，因此只需删除namespace program。

有关ES6模块(包括模块名称空间对象)的更多文档。

相关讨论