Vue.extend or vue-class-component

使用 TypeScript 寫(xiě) Vue 組件時(shí)，有兩種推薦形式：

• Vue.extend()：使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。此種寫(xiě)法與 Vue 單文件組件標(biāo)準(zhǔn)形式最為接近，唯一不同僅是組件選項(xiàng)需要被包裹在 Vue.extend() 中。
• vue-class-component：通常與 vue-property-decorator 一起使用，提供一系列裝飾器，能讓我們書(shū)寫(xiě)類(lèi)風(fēng)格的 Vue 組件。

兩種形式輸出結(jié)果一致，同是創(chuàng)建一個(gè) Vue 子類(lèi)，但在書(shū)寫(xiě)組件選項(xiàng)如 props，mixin 時(shí)，有些不同。特別是當(dāng)你使用 Vue.extend() 時(shí)，為了讓 TypeScript 正確推斷類(lèi)型，你將不得不做一些額外的處理。接下來(lái)，我們來(lái)聊一聊它們的細(xì)節(jié)差異。

Prop

由于組件實(shí)例的作用域是孤立的，當(dāng)從父組件傳遞數(shù)據(jù)到子組件時(shí)，我們通常使用 Prop 選項(xiàng)。同時(shí)，為了確保 Prop 的類(lèi)型安全，我們會(huì)給 Prop 添加指定類(lèi)型驗(yàn)證，形式如下：

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

我們定義了一個(gè) someProp，它的類(lèi)型是 Object。

使用 JavaScript 時(shí)，這并沒(méi)有什么不對(duì)的地方，但當(dāng)你使用 TypeScript 時(shí)，這有點(diǎn)不足，我們并不能得到有關(guān)于 someProp 更多有用的信息（比如它含有某些屬性），甚至在 TypeScript 看來(lái)，這將會(huì)是一個(gè) any 類(lèi)型：

這意味著我們可以使用 someProp 上的任意屬性（存在或者是不存在的）都可以通過(guò)編譯。為了防止此種情況的發(fā)生，我們將會(huì)給 Prop 添加類(lèi)型注釋。

Vue.extend()

使用 Vue.extend() 方法添加類(lèi)型注釋時(shí)，需要給 type 斷言：

import Vue from 'vue'

interface User {
 name: string,
 age: number
}

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

當(dāng)組件內(nèi)訪問(wèn) testProps 時(shí)，便能得到相關(guān)提示：

然而，你必須以函數(shù)返回值的形式斷言，并不能直接斷言：

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

它會(huì)給出錯(cuò)誤警告，User 接口并沒(méi)有實(shí)現(xiàn)原生 Object 構(gòu)造函數(shù)所執(zhí)行的方法：
Type 'ObjectConstructor' cannot be converted to type 'User'. Property 'id' is missing in type 'ObjectConstructor'.

實(shí)際上，我們可從 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 可以以兩種不同方式出現(xiàn)：

• 含有一個(gè)調(diào)用簽名的范型 type，該簽名返回 T；
• 一個(gè)范型構(gòu)造函數(shù)簽名，該函數(shù)創(chuàng)建指定類(lèi)型 T 對(duì)象 （返回值 T & object 用于降低優(yōu)先級(jí)，當(dāng)兩種方式同時(shí)滿足時(shí)取第一種，其次它還可以用于標(biāo)記構(gòu)造函數(shù)不應(yīng)該返回原始類(lèi)型）。

當(dāng)我們指定 type 類(lèi)型為 String/Number/Boolean/Array/Object/Date/Function/Symbol 等原生構(gòu)造函數(shù)時(shí)，Prop<T> 會(huì)返回它們各自簽名的返回值。

當(dāng) type 類(lèi)型為 String 構(gòu)造函數(shù)時(shí)，它的調(diào)用簽名返回為 string：

// lib.es5.d.ts

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

而這也是上文中，當(dāng)指定 type 類(lèi)型為 Object 構(gòu)造函數(shù)時(shí)，經(jīng)過(guò) Vue 的聲明文件處理，TypeScript 推斷出為 any 類(lèi)型的原因：

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

類(lèi)似的，當(dāng)我們使用關(guān)鍵字 as 斷言 Object 為 () => User 時(shí)，它能推斷出為 User 。

從 type 第二部分可知，除傳入原生構(gòu)造函數(shù)外，我們還可傳入自定義類(lèi)：

此外，這里有個(gè) PR 暴露一個(gè)更直觀的類(lèi)型（ Vue 2.6 版本才可以用）：

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

vue-class-component

得益于 vue-propperty-decorator Prop 修飾器，當(dāng)給 Prop 增加類(lèi)型推斷時(shí)，這些將變得簡(jiǎn)單：

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
 @Prop({ type: Object })
 private test: { value: string }
}

當(dāng)我們?cè)诮M件內(nèi)訪問(wèn) test 時(shí)，便能獲取它正確的類(lèi)型信息。

mixins

mixins 是一種分發(fā) Vue 組件中可復(fù)用功能的一種方式。當(dāng)在 TypeScript 中使用它時(shí)，我們希望得到有關(guān)于 mixins 的類(lèi)型信息。

當(dāng)你使用 Vue.extends() 時(shí)，這有點(diǎn)困難，它并不能推斷出 mixins 里的類(lèi)型：

// ExampleMixin.vue
export default Vue.extend({
 data () {
  return {
   testValue: 'test'
  }
 }
})

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

我們需要稍作修改：

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

但這會(huì)存在一個(gè)問(wèn)題，當(dāng)使用多個(gè) mixins 且推斷出類(lèi)型時(shí)，這將無(wú)法工作。而在這個(gè) Issuse 中官方也明確表示，這無(wú)法被修改。

使用 vue-class-component 這會(huì)方便很多：

// 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) // 編譯通過(guò)
 }
}

也支持可以傳入多個(gè) mixins。

一些其它

做為 Vue 中最正統(tǒng)的方法（與標(biāo)準(zhǔn)形式最為接近），Vue.extends() 有著自己的優(yōu)勢(shì)，在 VScode Vetur 插件輔助下，它能正確提示子組件上的 Props:

而類(lèi)做為 TypeScript 特殊的存在（它既可以作為類(lèi)型，也可以作為值），當(dāng)我們使用 vue-class-component 并通過(guò) $refs 綁定為子類(lèi)組件時(shí)，便能獲取子組件上暴露的類(lèi)型信息：

導(dǎo)入 .vue 時(shí)，為什么會(huì)報(bào)錯(cuò)？

當(dāng)你在 Vue 中使用 TypeScript 時(shí)，所遇到的第一個(gè)問(wèn)題即是在 ts 文件中找不到 .vue 文件，即使你所寫(xiě)的路徑并沒(méi)有問(wèn)題：

在 TypeScript 中，它僅識(shí)別 js/ts/jsx/tsx 文件，為了讓它識(shí)別 .vue 文件，我們需要顯式告訴 TypeScript，vue 文件存在，并且指定導(dǎo)出 VueConstructor：

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

但是，這引起了另一個(gè)問(wèn)題，當(dāng)我們導(dǎo)入一個(gè)并不存在的 .vue 文件時(shí)，也能通過(guò)編譯：

是的，這在情理之中。

當(dāng)我嘗試在 .vue 文件中導(dǎo)入已存在或者不存在的 .vue 文件時(shí)，卻得到不同的結(jié)果：

文件不存在時(shí)：

文件存在時(shí)：

文件不存在時(shí)，引用 Vue 的聲明文件。文件存在時(shí)，引用正確的文件定義。

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

在這個(gè) PR 下，我找到相關(guān)解答：這個(gè) PR 里，Vetur 提供解析其他 .vue 文件的功能，以便能獲取正確的信息，當(dāng) .vue 文件不存在時(shí)，會(huì)讀取 .d.ts 里的信息。

參考

https://github.com/vuejs/vue/pull/5887

https://github.com/vuejs/vue/issues/7211

https://github.com/vuejs/vue/pull/6856

https://github.com/vuejs/vue/pull/5887/files/1092efe6070da2052a8df97a802c9434436eef1e#diff-23d7799dcc9e9be419d28a15348b0d99

https://github.com/Microsoft/TypeScript/blob/8e47c18636da814117071a2640ccf87c5f16fcfd/src/compiler/types.ts#L3563-L3583

https://github.com/vuejs/vetur/pull/94

最新評(píng)論