解决Vue+ts里面this.$store问题
Vue+ts里this.$store问题
vuex里面我调用this.$store访问仓库state时,调用失败报错
解决办法
(this as any).$store
Vue实践ts中的一些常见错误
mixin报错
import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator' import httpminix from '../mixin/httpMixin' @Component({ mixins:[httpminix] }) export default class HelloWorld extends Vue { public async getUser() : Promise<void> { const r = await this.apiGet('/show') //HelloWorld上没有apiGet方法 this.firstName = JSON.stringify(r.data) } }
解决方案
import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator' import httpminix from '../mixin/httpMixin' @Component // 这里从继承Vue改成继承Minix函数,这样就有提示了 export default class HelloWorld extends Mixins(httpminix) { public async getUser() : Promise<void> { const r = await this.apiGet('/show') this.firstName = JSON.stringify(r.data) } public mounted() { this.getUser() } }
扩展属性报错
我们现在代码里写一段window,然后用编辑器跳转到其.d.ts文件中去
// 定义一个全局变量 window 类型为Window declare var window: Window; // 截取Window接口 interface Window
由于这个接口为全局接口,所以我们可以声明一个同名全局全局接口,TS会帮我们合并
interface Window { // 也可以添加 // 字符串签名 可以允许添加未知名称属性 [p: string]: any } // 这样就可以使用如下代码不报错 import axios from 'axios' window.axios = axios
然后我们发现
window.axios //这里没有属性提示
然后我想把这个axios具体类型挂载上去,当然一想,像下面这样做
import {AxiosStatic} from 'axios' interface Window { axios: AxiosStatic }
然后发现报错了,window上没有axios这个属性,就很疑惑,尝试改回去,仍然报错
import {AxiosStatic} from 'axios' interface Window { [p: string]: any }
我就想这两个区别就是导入了一个类型,突然想到
TS中没有import和export的TS文件变量被视为全局
然后回去一看原本Window的定义
// 注意lib.dom.d.ts这里没有export interface Window
好的,想通了,就是因为使用import导入了一个类型,导致我自定义Window接口变成了模块内的,这时候的解决方案当然是看看内置语法有没有能显示定义全局性的变量
// bingo 此时window.axios有提示啦 import { AxiosStatic } from "axios"; declare global { interface Window { axios: AxiosStatic } } export { };
TS为我们在模块定义全局提供了一个方式,用于解决在模块中扩展全局
declare global { // your type code }
扩展Vue属性例子
import Vue from 'vue' declare module "vue/types/vue" { interface Vue { $message: string; } }
在组件类中可以这样访问
this.$messgae //这里有属性提示
总结:需要扩展一个第三方声明文件,需要确定其命名空间以及扩展变量实现的接口结构,然后复制该接口写一次自己的类型即可
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Laravel 如何在blade文件中使用Vue组件的示例代码
这篇文章主要介绍了Laravel 如何在blade文件中使用Vue组件,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法
这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法,解决方法不复杂通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-08-08详解Vue+elementUI build打包部署后字体图标丢失问题
这篇文章主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论