如何在 Ionic 2 / TypeScript 中使用 (Cordova) 插件？

Question

我想将cordova-plugin-fcm 与 Ionic2/TypeScript 一起使用。包装器 FCMPlugin.js 看起来很简单，但我习惯 Angular2/TypeScript 使用 import 语句，不知道如何让这样的插件与 Ionic2 一起使用。

如果我使用代码获取令牌 (FCMPlugin.getToken())，我会得到：

找不到名称“FCMPlugin”

当我尝试这个suggested answer

我明白了：

需求未定义

Answer 1

事实证明 suggested answer 毕竟是有效的。我只是犯了错误在浏览器中测试，看看我是否可以摆脱错误：

Cannot find name 'FCMPlugin'

然后这给了我：

Require is not defined

我以为我被困住了。 Cordova 仅在模拟器或真实设备上运行，但我认为我可以先在浏览器中进行一些测试，直到我摆脱错误（我不能）。但是，在模拟器或设备上运行代码时一切正常。

重要的是您必须摆脱 TypeScript 错误“找不到名称”，否则它将无法运行。要在没有类型定义文件（d.ts 文件）的情况下做到这一点，您只需声明一个变量，如：

declare var FCMPlugin:any;

就在导入的下方。

这样就不会出现 TypeScript 错误，一切都在模拟器/设备上运行良好。

Answer 2

如果您希望它与 TypeScript 一起使用，您可以在文件中声明为 @majodi 说：

declare var FCMPlugin: any;

但您不会有自动完成功能。

您还可以创建一个fcm-plugin.d.ts 文件以放入yourAppName/src/app/fcm-plugin.d.ts，它应该看起来像这样：

declare var fcmPlugin: FCMPlugin.IFCMPlugin;

// Support AMD require
declare module 'fcmPlugin' {
    export = fcmPlugin;
}

declare namespace FCMPlugin {
    interface IFCMPlugin {
        onNotification(onNotificationCallback, successCallback, errorCallback);
        getToken(successCallback, errorCallback);
        onTokenRefresh(onTokenRefreshCallback);
        subscribeToTopic(topic: string, successCallback, errorCallback);
        unsubscribeFromTopic(topic: string, successCallback, errorCallback);
    }
}

在确认您使用的是科尔多瓦设备后，不要忘记调用 fcmPlugin：

if (platform.is('cordova')) {
    fcmPlugin.getToken(token => {
        console.log('getToken() succeed: ', token);
    }, err => {
        console.error('getToken() failed: ', err);
    });
}

否则当你做ionic serve时会有fcmPlugin does not exists

然后您只需调用 fcmPlugin 并让 TypeScript 自动完成魔法发生！