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,
编辑:这是 main.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:类型上不存在属性的主要内容,如果未能解决你的问题,请参考以下文章