“默认”类型不存在属性答案

【问题标题】：Property does not exist on type 'default'“默认”类型不存在属性
【发布时间】：2020-04-09 02:52:50
【问题描述】：

我是 VueJS 的初学者，我尝试四处寻找有关这方面的一些提示，但找不到任何东西。

我正在维护一个 Vue 应用程序，并开始实施 Google SSO 登录流程。为此，我使用了vue-google-oauth2

所以在我的main.ts 我这样做：

Vue.use(GAuth, {
  clientId: "client_id",
  scope: "profile email",
  prompt: "select_account"
});

在我的登录组件中我有这个：

export default class extends Vue {
  private googleHandleClick() {
    this.$gAuth.signIn()
      .then(GoogleUser => {
        this.isSignIn = this.$gAuth.isAuthorized
      })
      .catch(error  => {
        //on fail do something
      })
  }
}

但是，我在 this.$gAuth 上收到一个构建错误，内容如下：

“默认”类型上不存在属性“$gAuth”。

代码在运行时工作，这表明$gAuth确实确实存在，但由于某种原因，类型检查在构建时搞砸了，这会破坏 CI 和其他东西。

基本上问题是：如何让 Vue 的 this 知道该属性存在，以及它具有的类型

【问题讨论】：

标签： vue.js

【解决方案1】：

您可以在 Vue 论坛上查看this discussion。答案是：

您或其他一些插件通过添加 $gAuth 属性来增强 Vue 原型。

Vue 的默认类型当然不包含这个属性，所以如果没有插件作者或你自己的任何额外调整，Typescript 会抱怨 Vue 的类型没有名为 $gAuth 的属性。

它链接到docs，它显示了这个例子（少数之一）：

例如，以字符串类型声明实例属性 $myProperty：

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $myProperty: string
  }
}

【讨论】：