将 In App Browser cordova 插件与打字稿一起使用答案

【问题标题】：Using In App Browser cordova plugin with typescript将 In App Browser cordova 插件与打字稿一起使用
【发布时间】：2017-06-25 00:45:39
【问题描述】：

我正在尝试使用 typescript + react 构建 cordova 应用程序。

所以我需要在外部应用程序（图库或 PDF 阅读器，用户可以手动选择选项）中打开 base64 图像或 pdf，然后遇到了这个 cordova 插件“InAppBrowser”。

问题是，整个参考和文档都是为 JavaScript 制作的，当我尝试在 TS 中使用它时会导致错误

var ref = cordova.InAppBrowser.open(base64path, '_blank', 'location=yes');

“Cordova”类型上不存在“InAppBrowser”属性。

我已经为“cordova”和“cordova-in-app-browser-plugin”（index.d.ts 文件）安装了类型，但它并没有解决问题。有人知道解决方案吗？谢谢。

【问题讨论】：

我一直在看这个，并将它与其他文件进行比较。我认为打字稿 InAppBrowser 文件中可能有一些“错误”的东西......基本上，我在“InAppBrowser.d.ts”文件（打字文件夹）中添加了以下内容： interface Cordova { InAppBrowser:InAppBrowser } 然后调用它喜欢： var ref = cordova.InAppBrowser.open('google.com', '_blank', 'location=yes');你能告诉我这对你有用吗？
@Aaron 是的，谢谢！像魅力一样工作。
很高兴它有效@Quimmo。如果你不介意的话，我把它变成了答案:)
@Aaron 不，我不介意，这是正确的答案。）我想这个接口应该通过 pull request 直接添加到类型文件到 repo。这可以节省几个小时。

标签： javascript android cordova reactjs typescript

【解决方案1】：

就我而言，我所要做的就是将以下行添加到文件的开头：

declare var cordova: any;

【讨论】：

【解决方案2】：

作为对上述答案的补充，我在编译到 cordova 项目的 www 文件夹的多平台 angular 5 应用程序中遇到了类似的问题。 Typescript 无法解析 window.cordova.InAppBrowser（即使在添加 cordova-plugin-inappbrowser 作为开发依赖项之后。）

就我而言，我需要将“interface Cordova{...”定义添加到主项目根文件夹中的 typings.d.ts 文件中。

希望这能像上面的帖子帮助我一样帮助其他人:)

【讨论】：

【解决方案3】：

我已经为cordova-plugin-inappbrowser 提交了一个更正的类型文件到DefinitelyTyped。从version 1.7.0 开始，此错误已修复。

【讨论】：

【解决方案4】：

似乎由于某种原因，InAppBrowser 类型文件在安装时没有“打开”。我能够使用新的 cordova 项目在本地重现该问题 -> 通过 config.xml GUI“添加”安装 InAppBrowser，通过 NPM 安装类型。

我不确定如果先安装了typings，然后添加了cordova插件，这是否会重现-我想它可能会，但无论哪种方式，解决方案是永远不会将InAppBrowser界面添加到cordova。这是一个简单的解决方案。

导航到类型文件夹 InAppBrowser.d.ts，然后添加：

interface Cordova{
    InAppBrowser: InAppBrowser
}

然后，按照您原来帖子中的方式调用（我使用的是 google.com）：

var ref = cordova.InAppBrowser.open('http://www.google.com','_blank','location=yes')

【讨论】：