前言

要說今年最熱門的前端技術，Vue3 和 TS 絕對榜上有名了。今天就給大家分享一下如何在 Vue3 組件中結(jié)合 Composition-Api 使用 TS 類型。如果有不會或者不熟的小伙伴，一起學起來吧！

一、為 props 標注類型

使用 < script setup >

當使用 < script setup > 時，defineProps() 宏函數(shù)支持從它的參數(shù)中推導類型：

這被稱為 運行時聲明 ，因為傳遞給 defineProps() 的參數(shù)會作為運行時的 props 選項使用。
第二種方式，通過泛型參數(shù)來定義 props 的類型，這種方式更加直接：

這被稱為 基于類型的聲明 ，編譯器會盡可能地嘗試根據(jù)類型參數(shù)推導出等價的運行時選項。 這種方式的不足之處在于，失去了定義 props 默認值的能力。為了解決這個問題，我們可以使用 withDefaults 編譯器宏：

上面代碼會被編譯為等價的運行時 props 的 default 選項。

非 < script setup >

如果沒有使用 < script setup >，那么為了開啟 props 的類型推導，必須使用 defineComponent()。傳入 setup() 的 props 對象類型是從 props 選項中推導而來。

二、為 emits 標注類型

使用 < script setup >

在 < script setup > 中，emit 函數(shù)的類型標注也可以使用 運行時聲明 或者 基于類型的聲明 ：

我們可以看到，基于類型的聲明 可以使我們對所觸發(fā)事件的類型進行更細粒度的控制。

非 < script setup >

若沒有使用 < script setup >，defineComponent() 也可以根據(jù) emits 選項推導暴露在 setup 上下文中的 emit 函數(shù)的類型：

三、為 ref() 標注類型

默認推導類型

ref 會根據(jù)初始化時的值自動推導其類型：

通過接口指定類型

有時我們可能想為 ref 內(nèi)的值指定一個更復雜的類型，可以使用 Ref 這個接口：

通過泛型指定類型

或者，在調(diào)用 ref() 時傳入一個泛型參數(shù)，來覆蓋默認的推導行為：

注意：如果你指定了一個泛型參數(shù)但沒有給出初始值，那么最后得到的就將是一個包含 undefined 的聯(lián)合類型。

四、為 reactive() 標注類型

默認推導類型

reactive() 也會隱式地從它的參數(shù)中推導類型：

通過接口指定類型

要顯式地指定一個 reactive 變量的類型，我們可以使用接口：

五、為 computed() 標注類型

默認推導類型

computed() 會自動從其計算函數(shù)的返回值上推導出類型：

通過泛型指定類型

你還可以通過泛型參數(shù)顯式指定類型：

六、為事件處理函數(shù)標注類型

在處理原生 DOM 事件時，應該給事件處理函數(shù)的參數(shù)正確地標注類型：

當沒有類型標注時，這個 event 參數(shù)會隱式地標注為 any 類型。這也會在 tsconfig.json 中配置了 "strict": true 或 "noImplicitAny": true 時報出一個 TS 錯誤。因此，建議顯式地為事件處理函數(shù)的參數(shù)標注類型。此外，你可能需要顯式地強制轉(zhuǎn)換 event 上的屬性：

七、為 provide / inject 標注類型

provide 和 inject 通常會在不同的組件中運行。要正確地為注入的值標記類型，Vue 提供了一個 InjectionKey 接口，它是一個繼承自 Symbol 的泛型類型，可以用來在提供者和消費者之間同步注入值的類型：

建議將注入 key 的類型放在一個單獨的文件中，這樣它就可以被多個組件導入。
當使用字符串注入 key 時，注入值的類型是 unknown，需要通過泛型參數(shù)顯式聲明：

注意注入的值仍然可以是 undefined，因為無法保證提供者一定會在運行時 provide 這個值。當提供了一個默認值后，這個 undefined 類型就可以被移除：

如果你確定該值將始終被提供，則還可以強制轉(zhuǎn)換該值：

八、為 dom 模板引用標注類型

模板 ref 需要通過一個顯式指定的泛型參數(shù)和一個初始值 null 來創(chuàng)建：

注意為了嚴格的類型安全，有必要在訪問 el.value 時使用可選鏈或類型守衛(wèi)。這是因為直到組件被掛載前，這個 ref 的值都是初始的 null，并且 v-if 將引用的元素卸載時也會被設置為 null。

九、為組件模板引用標注類型

有時，我們需要為一個子組件添加一個模板 ref，以便調(diào)用它公開的方法。比如，我們有一個 MyComponent 子組件，它有一個打開模態(tài)框的方法：

為了獲取 MyComponent 的類型，我們首先需要通過 typeof 得到其類型，再使用 TypeScript 內(nèi)置的 InstanceType 工具類型來獲取其實例類型：

小結(jié)

好了，以上就是在 Vue3 組件中使用 TS 類型的基本方法，也是我最近的 Vue3 學習筆記。歡迎在評論區(qū)交流討論，一起學習成長！文章來源地址http://www.zghlxwxcb.cn/news/detail-402163.html

到了這里，關于何為 Vue3 組件標注 TS 類型，看這篇文章就夠了！的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！