欠你們的

本系列文章是我20年開(kāi)始寫的, 這個(gè)模塊聲明也是本系列的最后一課, 中間因?yàn)闀r(shí)間安排間隔了1年, 當(dāng)時(shí)答應(yīng)大家要補(bǔ)充的, 現(xiàn)在來(lái)還債??.

中間的時(shí)間我寫了vue3的入門教程, 現(xiàn)在寫了一半了吧, 帶視頻的, 如果有需要的小伙伴可以去看看. https://www.yuque.com/books/share/c0ab3348-87ab-4e77-a34e-10ede7dfb00e?# 《vue3知識(shí)點(diǎn)"精選"》

往期目錄

第一課, 體驗(yàn)typescript

第二課, 基礎(chǔ)類型和入門高級(jí)類型

第三課, 泛型

第四課, 解讀高級(jí)類型

第五課, 命名空間(namespace)是什么

特別篇, 在vue3??源碼中學(xué)會(huì)typescript?? - "is"

第六課, 什么是聲明文件(declare)? ?? - 全局聲明篇

第七課, 通過(guò)vue3實(shí)例說(shuō)說(shuō)declare module語(yǔ)法怎么用??模塊聲明篇

新開(kāi)發(fā)vscode插件: ?any-type, 一鍵json到ts類型

使用場(chǎng)景

npm下載的"包"自帶了聲明文件, 如果我們需要對(duì)其類型聲明進(jìn)行擴(kuò)展就可以使用"declare module"語(yǔ)法.

讓vue3支持this.$axios

typescript // main.ts app.config.globalProperties.$axios = axios; 功能上我們實(shí)現(xiàn)了"this.$axios", 但是ts并不能自動(dòng)推斷出我們添加了$axios字段, 所以添加如下聲明文件: ```typescript // global.d.ts

// axios的實(shí)例類型 import { AxiosInstance } from 'axios'

// 聲明要擴(kuò)充@vue/runtime-core包的聲明. // 這里擴(kuò)充"ComponentCustomProperties"接口, 因?yàn)樗莢ue3中實(shí)例的屬性的類型. declare module '@vue/runtime-core' {

// 給this.$http提供類型 interface ComponentCustomProperties { $axios: AxiosInstance; } } ``` 這里擴(kuò)充"ComponentCustomProperties"接口, 因?yàn)樗莢ue3中實(shí)例的屬性的類型.

更全面的例子

上面的例子中我們擴(kuò)充了原聲明中的interface, 但是如果導(dǎo)出是一個(gè)Class我們?cè)撊绾螌懩? 下面我們對(duì)"any-touch"的類型進(jìn)行擴(kuò)充, 這里"any-touch"的默認(rèn)導(dǎo)出是一個(gè)Class. 假設(shè)我們對(duì)"any-touch"的代碼做了如下修改:

1. 導(dǎo)出增加"aaa"變量, 是string類型.
2. 類的實(shí)例增加"bbb"屬性, 是number類型.
3. 類增加靜態(tài)屬性"ccc", 是個(gè)函數(shù). ```typescript // global.d.ts

// AnyTouch一定要導(dǎo)入, 因?yàn)橹挥袑?dǎo)入才是擴(kuò)充, 不導(dǎo)入就會(huì)變成覆蓋. import AnyTouch from 'any-touch'

declare module 'any-touch' { // 導(dǎo)出增加"aaa"變量, 是個(gè)字符串. export const aaa: string;

export default class {
  // 類增加靜態(tài)屬性"ccc", 是個(gè)函數(shù).
  static ccc:()=>void
  // 類的實(shí)例增加"bbb"屬性, 是number類型.
  bbb: number
}

} ``` 注意: AnyTouch一定要導(dǎo)入, 因?yàn)橹挥袑?dǎo)入才是類型擴(kuò)充, 不導(dǎo)入就會(huì)變成覆蓋. ?

測(cè)試下, 類型都已經(jīng)正確的添加: ```typescript // index.ts import AT,{aaa} from 'any-touch';

const s = aaa.substr(0,1);

const at = new AT(); at.bbb = 123;

AT.ccc = ()=>{}; ```

對(duì)非ts/js文件模塊進(jìn)行類型擴(kuò)充

ts只支持模塊的導(dǎo)入導(dǎo)出, 但是有些時(shí)候你可能需要引入css/html等文件, 這時(shí)候就需要用通配符讓ts把他們當(dāng)做模塊, 下面是對(duì)".vue"文件的導(dǎo)入支持(來(lái)自vue官方): typescript // global.d.ts declare module '*.vue' { import { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } typescript // App.vue // 可以識(shí)別vue文件 import X1 from './X1.vue'; export default defineComponent({ components:{X1} }) 聲明把vue文件當(dāng)做模塊, 同時(shí)標(biāo)注模塊的默認(rèn)導(dǎo)出是"component"類型. 這樣在vue的components字段中注冊(cè)模塊才可以正確識(shí)別類型.

vuex

下面是vuex官方提供的, 在vue的實(shí)例上聲明增加$store屬性, 有了前面的支持, 看這個(gè)應(yīng)該很輕松. ```typescript // vuex.d.ts

import { ComponentCustomProperties } from 'vue' import { Store } from 'vuex'

// 聲明要擴(kuò)充@vue/runtime-core包的聲明 declare module '@vue/runtime-core' { // declare your own store states interface State { count: number }

// provide typings for this.$store interface ComponentCustomProperties { $store: Store } } ```

并非全部?jī)?nèi)容

到此聲明的內(nèi)容就都結(jié)束了, 但實(shí)際上還有些"模塊聲明"的方式并沒(méi)有覆蓋到, 因?yàn)楸菊n程的最終目的是基于vue3開(kāi)發(fā)暫不涉獵npm包的開(kāi)發(fā),所以其他的內(nèi)容就不展開(kāi)了, 有需要的同學(xué)可以看ts文檔來(lái)學(xué)習(xí), 有了本文的基礎(chǔ), 相信你會(huì)很輕松學(xué)會(huì)更多.

微信群

感謝大家的閱讀, 如有疑問(wèn)可以加我微信, 我拉你進(jìn)入微信群(由于騰訊對(duì)微信群的100人限制, 超過(guò)100人后必須由群成員拉入)

github

我個(gè)人的開(kāi)源都是基于ts的, 歡迎大家訪問(wèn)https://github.com/any86

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-421581.html