VueJS + Typescript:类型上不存在属性

Posted

技术标签:

【中文标题】VueJS + Typescript:类型上不存在属性【英文标题】:VueJS + Typescript: Property does not exist on type 【发布时间】:2019-06-28 10:00:30 【问题描述】:

我使用 vue-cli 3 创建了一个简单的 Vue 应用程序,并使用 TypeScript 进行了配置。我还安装了 axios,我正在尝试在 mounted() 中使用它,以便加载数据并将其显示在组件中。

代码如下:

<script lang='ts'>

import  Component, Prop, Vue  from 'vue-property-decorator';
import SearchBar from '@/components/prods_comp/SearchBar.vue';
import ProdsTable from '@/components/prods_comp/ProdsTable.vue';

@Component(
  components: 
    SearchBar,
    ProdsTable,
  ,
)
export default class MainProds extends Vue 

  @Prop( default: 'Produits' ) private message!: string;

  mounted() 
    const baseURI = 'http://localhost:8069';
    this.$http(
      method: 'POST',
      url: baseURI + '/vue_web_services/msg/',
      headers:  'content-type': 'application/json',,
      data: 
      
    ).then(function (response) 
      console.log(response.data);
    );
  


</script>

这是一个相当基本的 API 调用。有用。问题是控制台中不断弹出这条消息:

ERROR in D:/ODOO/Vue/bons_commande/src/components/prods_comp/MainProds.vue
26:10 Property '$http' does not exist on type 'MainProds'.
    24 |   mounted() 
    25 |     const baseURI = 'http://localhost:8069';
  > 26 |     this.$http(
       |          ^
    27 |       method: 'POST',
    28 |       url: baseURI + '/vue_web_services/msg/',
    29 |       crossdomain: true,

编辑:这是 ma​​in.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueSweetalert2 from 'vue-sweetalert2';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/scss/tailwind.scss';
import axios from 'axios';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;

Vue.use(ElementUI);
Vue.use(VueSweetalert2);

new Vue(
    router,
    store,
    render: h => h(App)
).$mount('#app');

【问题讨论】:

【参考方案1】:

制作一个像下面这样的插件文件并在 main.ts 中使用这个插件

详细文档-- https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

import _Vue from 'vue';
import Axios from 'axios';
export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void 
   // do stuff with options
   Vue.prototype.$http = Axios;
 
export class AxiosPluginOptions  // add stuff  
import  AxiosStatic  from 'axios';
declare module 'vue/types/vue' 
   interface Vue 
     $http: AxiosStatic;
 

【讨论】:

感谢您的回复,但我对自定义插件不太熟悉。我将如何将它添加到我的 main.ts 文件中?【参考方案2】:

看起来您可能缺少 vue-axios,它将 $http 添加到 Vue 原型中,允许从单个文件组件调用 this.$http()

解决问题:

    从命令行安装vue-axios

    npm i -S vue-axios
    

    main.ts中添加如下代码:

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)
    

【讨论】:

以上是关于VueJS + Typescript:类型上不存在属性的主要内容,如果未能解决你的问题,请参考以下文章

VueJS 项目和 TypeScript 中的范围错误

TypeScript:类型“”上不存在属性

类型“”上不存在 Typescript 错误属性“成员”

TypeScript - 类型上不存在属性(但存在)?

TypeScript:“文档”类型上不存在属性“slug”

如何使用jsdom和typescript防止“属性'...'在'Global'类型上不存在”?