如何在Angular 2 / Typescript应用程序中使用第三方js库？

Question

我正在尝试在Angular 2 / Typescript应用程序中使用第三方.js库。网上有一些例子（比如使用declare var libraryVar：any;）但似乎没什么用。是否有一种正确的方法可以将.js库集成到Typescript / Angular2中？

Answer 1

  

网上有一些例子（比如使用declare var libraryVar：any;）但似乎没什么用。是否有一种正确的方法将.js库集成到Typescript / Angular2

中

也许您忘了将declare var libraryVar:any;放在没有根级别导入/导出的 vendor.d.ts 文件中。

更多：https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html

Answer 2

Web上充满了使用第三方库的打字稿项目的示例。

Here是我的一个使用arcgis-js-api。

Here是使用openlayers的。

在你的情况下你会尝试这个：

bower init
bower install node-uuid --save
tsd install uuid --save

然后设置您的tsconfig.json文件。我认为Angular 2使用systemjs所以你想要设置module =＆＃34; system＆＃34; （见system）除非你有理由不这样做。

我对systemjs运气不错，但你可能需要做这样的事情才能让它加载uuid或任何其他AMD模块：

window.define = System.amdDefine;
window.require = System.amdRequire;

请参阅system-api以获取解释。

Answer 3

我发现使用外部库的最好方法是在打字稿的顶部为它创建一个变量并导入js。通过这样做，变量将提供库中提供的所有函数，而无需任何额外的工作。

例如，如果你想使用moment.js做一些时间计算。 将此添加到您的ts文件

var moment = require("./scripts/moment");

之后，您可以直接使用变量

来使用打字稿中的函数

moment.fromNow("SOMEDATE");

我几天前遇到了确切的问题，我看到这是一个很好的选择，另一个简洁的方法是创建一个包含所有帮助程序的typescript类，并将typescript引用到您的文件中并调用其中的帮助程序。仍在试验一个坚实的模式，但这将是起点。