在vue3 + ts 項目中,我們通過ref引用element-plus組件內部方法時,編輯器沒有提示信息,通常我們都是如下寫法
這里想進行一下表單校驗,需要引用el-form組件中的validate方法,從這里可以看出是沒有給相應的提示信息的。這是因為 ref() 沒有指定泛型,沒有呢指定泛型,ts就默認為泛型類型就是 any,對于 any 任意類型,是無法給出提示的。
所以這里就需要指定一下泛型類型。
就會想到直接用element-plus提供的類型,就有了上述代碼,但是ElForm是一個值,不是一個類型,根據錯誤提示,就可以用 typeof 去獲取類型。
但是這樣還是沒有給出想要的提示信息。給出的組件實例內部方法
這里需要理解什么是模板(或class或構造器),什么是實例
// 這是一個 class
class A {}
// 這是一個實例
const a = new A();
而 ElForm 是一個模板,ElForm在template中應用出來的是一個組件實例,所以這里的泛型類型應該是一個組件實例。所以需要用ts提供的一個內置類型操作符InstanceType,用InstanceType進行封裝一下,如下
這是就可以正確提示出來了。
封裝成一個公共方法
/**
* T extends abstract new (...args: any) => any:對 T 進行一個約束,只有類才有實例
* _comp: T 泛型的類型引導,_ 表示,告訴編譯器并不需要
*/
function useCompRef<T extends abstract new (...args: any) => any>(_comp: T) {return ref<InstanceType<T>>();
}