Vue.extend or vue-class-component

使用 TypeScript 寫 Vue 元件時，有兩種推薦形式：

• Vue.extend()：使用基礎 Vue 構造器，建立一個“子類”。此種寫法與 Vue 單檔案元件標準形式最為接近，唯一不同僅是元件選項需要被包裹在 Vue.extend() 中。
• vue-class-component：通常與 vue-property-decorator 一起使用，提供一系列裝飾器，能讓我們書寫類風格的 Vue 元件。

兩種形式輸出結果一致，同是建立一個 Vue 子類，但在書寫元件選項如 props，mixin 時，有些不同。特別是當你使用 Vue.extend() 時，為了讓 TypeScript 正確推斷型別，你將不得不做一些額外的處理。接下來，我們來聊一聊它們的細節差異。

Prop

由於元件例項的作用域是孤立的，當從父元件傳遞資料到子元件時，我們通常使用 Prop 選項。同時，為了確保 Prop 的型別安全，我們會給 Prop 新增指定型別驗證，形式如下：

export default {
 props: {
  someProp: {
   type: Object,
   required: true,
   default: () => ({ message: 'test' })
  }
 }
}

我們定義了一個 someProp，它的型別是 Object。

使用 JavaScript 時，這並沒有什麼不對的地方，但當你使用 TypeScript 時，這有點不足，我們並不能得到有關於 someProp 更多有用的資訊（比如它含有某些屬性），甚至在 TypeScript 看來，這將會是一個 any 型別：

這意味著我們可以使用 someProp 上的任意屬性（存在或者是不存在的）都可以通過編譯。為了防止此種情況的發生，我們將會給 Prop 新增型別註釋。

Vue.extend()

使用 Vue.extend() 方法新增型別註釋時，需要給 type 斷言：

import Vue from 'vue'
 
interface User {
 name: string,
 age: number
}
 
export default Vue.extend({
 props: {
  testProps: {
   type: Object as () => User
  }
 }
})
 

當元件內訪問 testProps 時，便能得到相關提示：

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

然而，你必須以函式返回值的形式斷言，並不能直接斷言：

export default Vue.extend({
 props: {
  testProps: {
   type: Object as User
  }
 }
})

它會給出錯誤警告，User 介面並沒有實現原生 Object 建構函式所執行的方法：
Type ‘ObjectConstructor’ cannot be converted to type ‘User’. Property ‘id’ is missing in type ‘ObjectConstructor’.

實際上，我們可從 Prop type declaration :

export type Prop<T> = { (): T } | { new (...args: any[]): T & object }
 
export type PropValidator<T> = PropOptions<T> | Prop<T> | Prop<T>[];
 
export interface PropOptions<T=any> {
 type?: Prop<T> | Prop<T>[];
 required?: boolean;
 default?: T | null | undefined | (() => object);
 validator?(value: T): boolean;
}

可知 Prop type 可以以兩種不同方式出現：

• 含有一個呼叫簽名的範型 type，該簽名返回 T；
• 一個範型建構函式簽名，該函式建立指定型別 T 物件 （返回值 T & object 用於降低優先順序，當兩種方式同時滿足時取第一種，其次它還可以用於標記建構函式不應該返回原始型別）。

當我們指定 type 型別為 String/Number/Boolean/Array/Object/Date/Function/Symbol 等原生建構函式時，Prop 會返回它們各自簽名的返回值。

當 type 型別為 String 建構函式時，它的呼叫簽名返回為 string：

// lib.es5.d.ts
 
interface StringConstructor {
 new(value?: any): String;
 (value?: any): string;
 readonly prototype: String;
 fromCharCode(...codes: number[]): string;
}

而這也是上文中，當指定 type 型別為 Object 建構函式時，經過 Vue 的宣告檔案處理，TypeScript 推斷出為 any 型別的原因：

interface ObjectConstructor {
 new(value?: any): Object;
 (): any;
 (value: any): any;
 // 其它屬性 ....
}

類似的，當我們使用關鍵字 as 斷言 Object 為 () => User 時，它能推斷出為 User 。

從 type 第二部分可知，除傳入原生建構函式外，我們還可傳入自定義類：

此外，這裡有個 PR 暴露一個更直觀的型別（ Vue 2.6 版本才可以用）：

props: {
 testProp: Object as PropTypes<{ test: boolean }>
}

vue-class-component

得益於 vue-propperty-decorator Prop 修飾器，當給 Prop 增加型別推斷時，這些將變得簡單：

import { Component, Vue, Prop } from 'vue-property-decorator'
 
@Component
export default class Test extends Vue {
 @Prop({ type: Object })
 private test: { value: string }
}

當我們在元件內訪問 test 時，便能獲取它正確的型別資訊。

mixins

mixins 是一種分發 Vue 元件中可複用功能的一種方式。當在 TypeScript 中使用它時，我們希望得到有關於 mixins 的型別資訊。

當你使用 Vue.extends() 時，這有點困難，它並不能推斷出 mixins 裡的型別：

// ExampleMixin.vue
export default Vue.extend({
 data () {
  return {
   testValue: 'test'
  }
 }
})
 
// other.vue
export default Vue.extend({
 mixins: [ExampleMixin],
 created () {
  this.testValue // error, testValue 不存在！
 }
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

我們需要稍作修改：

// other.vue
export default ExampleMixin.extend({
 mixins: [ExampleMixin],
 created () {
  this.testValue // 編譯通過
 }
})

但這會存在一個問題，當使用多個 mixins 且推斷出型別時，這將無法工作。而在這個 Issuse 中官方也明確表示，這無法被修改。

使用 vue-class-component 這會方便很多：

// ExampleMixin.vue
import Vue from 'vue'
import Component from 'vue-class-component'
 
@Component
export class ExampleMixin extends Vue {
 public testValue = 'test'
}
 
// other.vue
import Component, { mixins } from 'vue-class-component'
import ExampleMixin from 'ExampleMixin.vue'
 
@Component({
 components: {
  ExampleMixin
 }
})
export class MyComp extends mixins(ExampleMixin) {
 created () {
  console.log(this.testValue) // 編譯通過
 }
}

也支援可以傳入多個 mixins。

一些其它

做為 Vue 中最正統的方法（與標準形式最為接近），Vue.extends() 有著自己的優勢，在 VScode Vetur 外掛輔助下，它能正確提示子元件上的 Props:

而類做為 TypeScript 特殊的存在（它既可以作為型別，也可以作為值），當我們使用 vue-class-component 並通過 $refs 繫結為子類元件時，便能獲取子元件上暴露的型別資訊：

匯入 .vue 時，為什麼會報錯？

當你在 Vue 中使用 TypeScript 時，所遇到的第一個問題即是在 ts 檔案中找不到 .vue 檔案，即使你所寫的路徑並沒有問題：

在 TypeScript 中，它僅識別 js/ts/jsx/tsx 檔案，為了讓它識別 .vue 檔案，我們需要顯式告訴 TypeScript，vue 檔案存在，並且指定匯出 VueConstructor：

declare module '*.vue' {
 import Vue from 'vue'
 export default Vue
}

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

但是，這引起了另一個問題，當我們匯入一個並不存在的 .vue 檔案時，也能通過編譯：

是的，這在情理之中。

當我嘗試在 .vue 檔案中匯入已存在或者不存在的 .vue 檔案時，卻得到不同的結果：

檔案不存在時：

檔案存在時：

檔案不存在時，引用 Vue 的宣告檔案。檔案存在時，引用正確的檔案定義。

這讓人很困惑，而這些都是 Vetur 的功勞。

最後

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。