Go语言视频零基础入门到精通

admin

mixin报错

1. [code]import { Component, Prop, Vue ,Mixins} from "vue-property-decorator"
2. import httpminix from "../mixin/httpMixin"
3. @Component({
4.   mixins:[httpminix]
5. })
6. export default class HelloWorld extends Vue {
7.   public async getUser() : Promise<void> {
8.     const r = await this.apiGet("/show") //HelloWorld上没有apiGet方法
9.     this.firstName = JSON.stringify(r.data)
10.   }
11. }

复制代码

[/code]
解决方案

1. [code]import { Component, Prop, Vue ,Mixins} from "vue-property-decorator"
2. import httpminix from "../mixin/httpMixin"
3. @Component
4. // 这里从继承Vue改成继承Minix函数，这样就有提示了
5. export default class HelloWorld extends Mixins(httpminix) {
6.   public async getUser() : Promise<void> {
7.     const r = await this.apiGet("/show")
8.     this.firstName = JSON.stringify(r.data)
9.   }
10.   public mounted() {
11.    this.getUser()
12.   }
13. }

复制代码

[/code]
扩展属性报错
我们现在代码里写一段window,然后用编辑器跳转到其.d.ts文件中去

1. [code]// 定义一个全局变量 window 类型为Window
2. declare var window: Window;
3. // 截取Window接口
4. interface Window

复制代码

[/code]
由于这个接口为全局接口，所以我们可以声明一个同名全局全局接口，TS会帮我们合并

1. [code]interface Window {
2.   // 也可以添加
3.   // 字符串签名 可以允许添加未知名称属性
4.   [p: string]: any
5. }
6. // 这样就可以使用如下代码不报错
7. import axios from "axios"
8. window.axios = axios

复制代码

[/code]
然后我们发现

1. [code]window.axios //这里没有属性提示

复制代码

[/code]
然后我想把这个axios具体类型挂载上去,当然一想，像下面这样做

1. [code]import {AxiosStatic} from "axios"
2. interface Window {
3.   axios: AxiosStatic
4. }

复制代码

[/code]
然后发现报错了，window上没有axios这个属性，就很疑惑，尝试改回去，仍然报错

1. [code]import {AxiosStatic} from "axios"
2. interface Window {
3.   [p: string]: any
4. }

复制代码

[/code]
我就想这两个区别就是导入了一个类型，突然想到
TS中没有import和export的TS文件变量被视为全局
然后回去一看原本Window的定义

1. [code]// 注意lib.dom.d.ts这里没有export
2. interface Window

复制代码

[/code]
好的，想通了，就是因为使用import导入了一个类型，导致我自定义Window接口变成了模块内的，这时候的解决方案当然是看看内置语法有没有能显示定义全局性的变量

1. [code]// bingo  此时window.axios有提示啦
2. import { AxiosStatic } from "axios";
4. declare global {
5.   interface Window {
6.       axios: AxiosStatic
7.   }
8. }
10. export { };

复制代码

[/code]
TS为我们在模块定义全局提供了一个方式,用于解决在模块中扩展全局

1. [code]declare global {
2.   // your type code
3. }

复制代码

[/code]
扩展vue属性例子

1. [code]import Vue from "vue"
2. declare module "vue/types/vue" {
3.   interface Vue {
4.     $message: string;
5.   }
6. }
8. 在组件类中可以这样访问
9. this.$messgae //这里有属性提示

复制代码

[/code]
总结
需要扩展一个第三方声明文件，需要确定其命名空间以及扩展变量实现的接口结构，然后复制该接口写一次自己的类型即可