使用打字稿时在Vue项目中注册第三方包

Posted 2023-03-13

【中文标题】使用打字稿时在Vue项目中注册第三方包

【英文标题】：Registering a third party package in a Vue project when using typescript

【发布时间】：2019-08-28 22:02:51

【问题描述】：

我在我使用 vue-cli 创建的 vue.js 项目中安装了一个包，并且我正在使用 typescript。该软件包用于 google 的社交身份验证。 https://www.npmjs.com/package/vue-google-oauth2

现在，当我在 main.ts 文件中导入包时，它会给出如下错误：

找不到模块“vue-google-oauth2”的声明文件。隐式具有“任何”类型。

尝试npm install @types/vue-google-oauth2（如果存在）或添加新的 包含declare module 'vue-google-oauth2';的声明（.d.ts）文件

我只需在我的 shims.d.ts 文件中添加行 declare module 'vue-google-oauth2'; 即可消除错误。但是，现在这个问题已经解决了，即使应用程序运行良好，我的终端仍然会出现另一个错误。新的错误如下：

“AuthMixin”类型上不存在属性“$gAuth”

基本上我正在使用 this.$gAuth ，即使它正在工作，终端仍然说它在我的 vue 实例中不存在。我怎样才能让这个错误消失？

【参考方案1】：

我不确定vue-google-oauth2 是如何工作的，但我认为它添加了带有getter $gAuth 的全局混合。在这种情况下，您有 2 个选择：

声明$gAuth的类型：

declare module 'vue/types/vue' 

    interface Vue 
        $gAuth: any; // or specify gAuth type if .d.ts is provided
    

或者使用对象键语法：

this['$gAuth']() // or w/e you use to call it

【讨论】：

嗨！非常感谢您的回答，但不幸的是我仍然有点迷路。 mixin实际上是我自己的。我制作了 mixin，并使用了我在 main.ts 文件中的 vue 实例中注册的 vue-google-oauth2 包。所以 this.$gAuth 应该像 this.$store 一样工作。但事实并非如此。而您的解决方案并不能完全解决错误

请提供所有代码，Mixin + 你如何调用它以及它失败的代码，以及错误堆栈跟踪。这是编译错误吗？

Typescript 必须被明确告知 $gAuth 存在于 Vue 实例上，上面的声明 应该 覆盖它以进行编译，因为正如您所说，它在运行时存在。如果它不起作用，我使用的界面和这个界面略有不同。

好的，我已经编辑了我的问题，还包括了 authMixin 代码的一部分。如您所见，代码在运行时运行良好，只是在我的终端中给出了一个错误，即 this.$gAuth 不存在。但是， this.$http 不会给出任何此类错误。所以我似乎无法弄清楚我应该如何正确声明 gAuth 以及我应该在哪里做它