TypeScript徹底解讀(26課時)_20.聲明文件

首先學習識別已有的js庫的類型
識別已有的js庫的類型
UMD既能夠做爲全局庫使用，也能夠做爲模塊使用

先在着手來編寫一個全局的庫

新建文件

接收一個title，改變頁面title的值
這裏用到 &&的特性，若是操做符兩邊的條件都爲true，那他的返回值纔是true
若是第一個爲false了，因此它確定也不是true，後面的邏輯不會走，利用這個特性能夠簡化咱們的代碼，就不用寫if document是否爲空的判斷了
這句話的意思就是若是document爲真纔會執行後面的語句

若是document存在就返回document.title.若是不存在就返回爲空字符串

而後再定義一個變量，調用getTitle()方法賦值

咱們在這裏全局引用一下

運行起來是找不到這個文件的。


在終端執行npm run build看一下運行以後的效果，在dist文件夾下面只有一個index.html和main.js文件
index.ts內引入的js文件都打包到main.js文件夾內，並無把咱們的handle-title.js引進來，因此使用這種相對路徑的方式是無法引入的

這裏可使用一個webpack的插件，把這個handle-title.js文件直接拷貝過去，不須要編譯
npm install -D copy-webpack-plugin：安裝這個插件

webpack.config.js內把這個插件引進來

它接收一個對象，對象有兩個屬性


這裏用到Node.js裏的一個模塊Path，在上面先引入一下

path.join拼接一個路徑，__dirname表明當前js執行的一個絕對路徑
由於webpack.config.js是在build的文件夾下，因此要想找到handle-title.js這個文件的路徑就須要往上返一個目錄



to：就是複製到哪一個文件夾下

npm run build再來從新編譯一下，handle-t

引用的路徑改爲同級別的js文件

再次npm run build，生成的最終結果

咱們在js裏面輸出一句話，來證實咱們引用成功了

能夠看到咱們引用成功了,打印出了123

ahndle-title.js裏面定義的方法是全局的，那麼咱們在咱們項目的每一天個ts文件內均可以引用到，
建立一個新的文件

而後在index.ts內引入

如今調用會報錯，找不到名稱，就是由於咱們須要給它寫一個聲明文件

咱們在src下新建index.d.ts文件

15分32秒
在tsconfig.json內增長include的選項

會引入src下面的全部.ts的文件

還須要引入src目錄下的.d.ts的格式的文件 

若是不寫include的配置，會把全部的文件都引進來
下面在這個文件夾裏面，編寫聲明
全局寫生命苦的模板：
https://www.tslang.cn/docs/handbook/declaration-files/templates.html

global.d.ts 當你要爲一個全局庫寫聲明文件的模板

暴露在全局的函數重載，前面要用declar修飾符修飾，這是一個全局的
 
這裏給myLib定義的接口，讓這個庫做爲一種類型，定義一下只要是這種類型，必須有哪些字段

這個庫還有這一些全局的屬性，這裏導出爲命名空間了


handle-title.js裏面寫聲明

用declare去修飾，設置傳入的title的值必須是stirng或者是數字的，、由於它沒有返回值，這裏返回類型就寫void


第二個getTitle方法和第三個全局的變量

這個地方仍是有報錯

可是這裏已經打出了ts-learn

是由於咱們這裏的命名，不該該寫成index.d.t和index.js重名,都叫作index因此只會引入index.ts

index.d.ts更名爲：global.d.ts 這個裏面用來放全部的全局的一些東西 聲明

這個地方就不會報錯了，npm start從新編譯一下;修改完文件須要從新編譯纔會從新加載這些聲明文件

再來調用setTitle的方法，能夠看到咱們沒有引入，可是可使用這個函數，還有正確的類型提示

頁面的title已經改變了

打印出來咱們getTitle方法返回的值;

這就是一個簡單的全局聲明的書寫，能夠參考官方的模塊

模塊化庫：

也就是依賴了模塊解析器的庫
接下來看下，如何判斷一個庫是模塊化庫
在模塊化中你通常會看到，impport引入語句，輸出語句，或者無條件的調用一些require或者define方法，這些都是要依賴模塊解析器的。

或者賦值給export點什麼賦一個值，用來導出一個東西

或者module.expports導出一個默認的東西，這種他就是一個模塊化的庫

極少會在模塊化庫中看到對window、global的賦值，固然這也不是絕對的，有些庫他就是要操做window的一些屬性
https://www.tslang.cn/docs/handbook/declaration-files/templates.html
官方模板，module開頭的有四個文件

module-class.d.ts

若是你要引入一個模塊能夠直接當作一個函數來調用，就能夠參考：module-function.d.ts
若是這個模塊引入以後，能夠當作類來使用，可使用new關鍵字來建立實例，就能夠參考module-class.d.ts
若是既不能作實例也不能作函數使用就參考：module.d.ts
實戰的時候會講

UMD庫

將全局庫和模塊庫的功能進行了合併，他會首先判斷環境中有沒有模塊加載器以及特定的方法
好比去判斷define，有沒有這個方法 define 、typeof有沒有結合

不等於undefined,說明是有define方法的

若是說判斷下module等於這個object

module上面還有exports屬性，說明他是有模塊加載系統的。若是這兩種都沒有，就走全局的形式，通常有這些判斷的在UMD庫中會看到這些判斷邏輯

如今不少都是UMD庫，既能夠在html中用script方式引入，也可使用模塊系統來加載，好比jquery、moment這些庫

處理庫的聲明文件

基本上全部的庫都有第三方給他們編寫的聲明文件
好比咱們如今想使用一個庫，在node_modules/arr-diff這麼一個庫，能夠看到這個庫裏面只有這四個文件，它沒有一個聲明文件，若是使用裏面的方法就會報錯

須要安裝它的聲明：npm install @types/arr-diff -D:做爲開發依賴來安裝 若是安裝成功了說明有這個庫的聲明文件嗎，若是沒有安裝成功，說明沒有社區給他編寫聲明文件，那咱們就須要本身寫了

看到這個帶加號的說明有這個聲明文件

node_modules/@types/arr-diff/index.d.ts聲明文件

它的聲明文件比較簡單。就是導出了一主方法，能夠在全局中使用也能夠在模塊中使用


再把它卸載掉：npm uninstall @types/arr-diff

模塊插件或者UDM插件

處理庫聲明文件裏面第一部分：模塊插件或者UDM插件
一些模塊或者拆件是支持插件機制的，好比咱們常見的jquery，它的插件就很是多，能夠爲這個庫數寫聲明文件的爲庫的鍵？定義聲明文件？(聽不大清楚，多是這樣的)，能夠參考：module-plugin.d.ts
https://www.tslang.cn/docs/handbook/declaration-files/templates.html

修改全局的模塊

有一些是影響全局的全局插件，有些庫會在原生的js數據類型的原型對象上添加一些方法，使用原生的數據可以調用更爲豐富的方法，
下面來舉個例子，咱們要string的遠行對象上加個方法

在string 的原型對象上，構造函數原型對象上添加一個getFirstLetter方法，會放回當這個值的第一個字符

在瀏覽器中查看效果

這種模塊引進來之後會修改全局，對全局的string函數都會構成影響，
這個模塊，咱們要爲它寫聲明文件
它會給String作生命合併，定義一個接口String在裏面定義個方法getFirstLetter它的返回值類型是string

那麼咱們要引入這個模塊

  在寫的時候已經有代碼提示了name.getFirstLetter

若是把這個聲明去掉

那麼就會報錯了

這就是修改全局的模塊寫聲明文件

使用依賴

庫多數會依賴其餘庫，好比node.js的一些模塊會依賴node原生的一些自帶的內置的一些模塊，好比fs或者剛纔咱們用的那個Path，因此能夠在定義庫聲明文件的時候，聲明對其餘庫的依賴，從而加載其餘庫的聲明，若是依賴全局的聲明就用三個斜線referemce type這種形式來指定加載了某個全局庫

moment是有的，他就會在這裏引入全局庫moment的聲明文件

若是咱們依賴的是模塊庫，就可使用import語句。例如這裏引入moment，這會把這個模塊引進來。如今就能夠在裏面適應moment的一些東西

若是全局庫依賴的是某個UMD模塊，也可使用reference來引入，來指定對某個UDM模塊的依賴

最後有三點要注意的地方：
1.防止命名衝突，在寫全局聲明的時候，在全局範圍定義大量類型有時候會致使命名衝突，因此建議相關的命名放在命名空間裏。命名空間很大的做用就是防止命名的污染，用的時候才用對象訪問屬性的方式
2.es6模塊插件的影響，一些開發者爲一些庫開發了插件，用於在原有庫的基礎上，添加更多的功能，這每每須要修改原有庫的導出的模塊的。在講模塊的時候說過，es6模塊標準中，導出的模塊是不容許修改的，可是在CommenJS和其餘一些加載器裏是容許的。
因此要使用es6模塊的話要注意這一點

3.es6模塊的調用，咱們在使用一些苦的時候，導出的模塊能夠做爲函數直接調用，在es6的模塊頂層對象上是一個對象，他不能做爲函數調用，好比直接用export導出幾個內容，
以前在c.js裏面導出了這些東西

在使用的時候，使用解構賦值的這種形式就

就能夠直接打印出來引入的這個

假設要在c.js導出一個函數，在引入進來的地方呢要直接調用，就須要使用默認導出

快捷外部模塊聲明

若是使用一個新模塊，不想花時間精力爲這各模塊寫聲明，ts在2.0版本支持了快捷外部模塊聲明
在typings文件夾下建立moment文件夾，在下面建立index.d.ts

在這裏面寫聲明，這樣你再引入模塊的時候，是沒有問題的。當讓咱們知道這個moment庫它自身就帶了聲明文件，不須要再用@types去安裝獨立的聲明文件

一些沒有聲明文件，又沒有社區爲它編寫聲明文件，咱們能夠這樣快速的導出這個模塊，。這樣咱們在引入的時候是沒有問題的


爲一些模塊編寫聲明文件，會在後面的實戰過程當中來看下實際的操做