使用 vue-class-components 和 typescript 的 vuejs 实例属性出错

Question

我想为我的服务器 url 设置一个全局变量。

我把这个写在我的 main.ts

Vue.prototype.$apiUrl = "http://localhost:3000";

然后尝试在 App.vue

中使用它

console.log(this.$apiUrl)

我可以在浏览器的控制台中看到 url。

但是我收到了这个错误： Property '$apiUrl' does not exist on type 'App'.Vetur(2339)

我无法继续，因为在应用程序的某些部分 this.$apiUrl 由于某种原因未定义。

我该如何解决？

Answer 1

请注意 Class API proposal 已被放弃。要在 Vue 3 出来之前使用 Vue + Typescript，最好使用 Vue.extend({}) 组件样式：

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    ...
  })
</script>

要向您的 Vue 实例添加全局类型，请阅读 Typescript Support。

具体来说，您应该将此添加到垫片中：

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $apiUrl: string;
  }
}

Answer 2

已解决！我需要将 $apiUrl 添加到 Vue

的类型中

我在我的@types 文件夹中创建了一个 .d.ts 文件并添加以下内容

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $apiUrl: string
  }
}

Error having vuejs instance properties with vue-class-components and typescript