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 //這里有屬性提示

總結

需要擴展一個第三方聲明文件，需要確定其命名空間以及擴展變量實現的接口結構，然后復制該接口寫一次自己的類型即可