Javascript 打字稿声明第三方模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44058101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
typescript declare third party modules
提问by Saman Mohamadi
How could I declare a third party module which looks like this:
我怎么能声明一个看起来像这样的第三方模块：
in third party module:
在第三方模块中：
module.exports = function foo(){
// do somthing
}
in my code:
在我的代码中：
import * as foo from 'foo-module'; // Can not find a declaration module for ...
foo();
回答by Aaron Beall
Check out the documentation on working with 3rd party modules.
查看有关使用 3rd 方模块的文档。
How to write the declaration depends a lot on how the module was written and what it exports.
如何编写声明在很大程度上取决于模块的编写方式及其导出的内容。
The example you've given is a CommonJS module (module.exports = ...) which is not really a valid ES6 module, because ES6 cannot export a function as the module(it can only export function members or a defaultfunction).
您给出的示例是一个 CommonJS 模块 ( module.exports = ...)，它实际上不是一个有效的 ES6 模块，因为 ES6 无法将函数导出为模块（它只能导出函数成员或默认函数）。
Update for TypeScript 2.7+
TypeScript 2.7+ 更新
With the added esModuleInteropcompiler optionyou no longer need to use the "namespace hack" shown below for CommonJS modules that have a non-ES6 compatible export.
使用添加的esModuleInterop编译器选项，您不再需要对具有非 ES6 兼容导出的 CommonJS 模块使用如下所示的“命名空间技巧”。
First, make sure you've enabled esModuleInteropin your tsconfig.json(which is now included by default with tsc --init):
首先，确保你已经启用了esModuleInterop您的tsconfig.json（这是现在在默认情况下包括tsc --init）：
{
"compilerOptions" {
...
"esModuleInterop": true,
...
}
}
Declare your foo-examplein a .d.tsfile like this:
foo-example在这样的.d.ts文件中声明你：
declare module "foo-module" {
function foo(): void;
export = foo;
}
Now you can import it as a namespace like you wanted:
现在您可以将其作为您想要的命名空间导入：
import * as foo from "foo-module";
foo();
Or as a default import:
或者作为默认导入：
import foo from "foo-module";
foo();
Older workaround
较旧的解决方法
You can declare your foo-examplein a .d.tsfile like this:
你可以foo-example在这样的.d.ts文件中声明你的：
declare module "foo-module" {
function foo(): void;
namespace foo { } // This is a hack to allow ES6 wildcard imports
export = foo;
}
And import like you wanted:
并像您想要的那样导入：
import * as foo from "foo-module";
foo();
Or like this:
或者像这样：
import foo = require("foo-module");
foo();
The documentation has a good resource on declaration filesand some templates for various kinds of declaration files.
回答by Poku
You declare that function:
您声明该函数：
Declare var foo: any;
声明 var foo: any;
This will tell Typescript that somewhere you have a function called foo which you will make sure of get injected on the site.
这将告诉 Typescript 在某处你有一个名为 foo 的函数，你将确保它被注入到站点上。
回答by Michael Klishevich
I had a similar problem. And struggled to add type definition to my project. Finally I made it thought.
我有一个类似的问题。并努力将类型定义添加到我的项目中。最后我想到了。
This is some module (just with constants), lets call it some-module- node_modules/some-module/index.js.
这是一些模块（只有常量），我们称之为some-module- node_modules/some-module/index.js。
'use strict';
exports.__esModule = true;
var APPS = exports.APPS = {
ona: 'ona',
tacq: 'tacq',
inetAcq: 'inetAcq'
};
First I add to tsconfig.json baseUrland typeRoots
首先我添加到 tsconfig.jsonbaseUrl和typeRoots
{
...
"compilerOptions": {
...
"baseUrl": "types",
"typeRoots": ["types"]
}
...
}
Second in my project root I create folder typeswith same folders structure for the module types/some-module/index.jsand place the code:
其次在我的项目根目录中，我types为模块创建了具有相同文件夹结构的文件夹types/some-module/index.js并放置代码：
declare?module?'some-module' {
type Apps = {
ona: string;
tacq: string;
inetAcq: string;
};
let APPS: Apps
}
Finally I can import it in my my-file.tswith typings!
最后我可以将它导入到我my-file.ts的打字机中！
import { APPS } from 'some-module';
