具有 vue-class-components 和 typescript 的 vuejs 实例属性时出错

Posted 2023-02-22

【中文标题】具有 vue-class-components 和 typescript 的 vuejs 实例属性时出错

【英文标题】：Error having vuejs instance properties with vue-class-components and typescript

【发布时间】：2020-11-21 18:50:22

【问题描述】：

我想为我的服务器的 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 由于某种原因未定义。

我该如何解决？

【参考方案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;
  

【讨论】：

:o 很遗憾，我不知道 class-components 不会在 vue3 中使用... :'( 谢谢

最终的论点（根据 Evan You 的说法）是它产生的问题多于解决的问题，特别是 Typescript（这是添加它的主要原因）。如果您对更多细节感兴趣，请观看 this talk Evan 谈到该主题，以及 Vue 3 背后的其他基本原理和设计原则以及从 2 过渡。

但是，vue-class-component 目前与 Vue 2 兼容并且可以很好地工作，并且至少在 Vue 3 准备好生产之前它可能会得到维护。我个人的观点是你不应该为此烦恼，因为它总是会遇到更复杂的情况（即：Vuex），所以你最好花时间学习 Vue 3，它完全用 Typescript 编写，不需要任何变通方法用于打字稿。

FWIW 听起来像 vue-class-component may still be supported 与 Vue 3。我碰巧在我的第一个 Vue/Typescript 项目中使用它，这样会很好。

@totalhack, vue-class-component 现在是一个独立开发的插件。它不再被 Vue 嵌入或认可。这意味着当您遇到任何实现问题时，您将无法向整个 Vue 社区询问，您将仅限于 vue-class-component 插件的维护者和用户。

【参考方案2】：

解决了！我需要将 $apiUrl 添加到 Vue 的类型中

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

import Vue from 'vue'

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