在使用 TypeScript 的過程中，套件的支援度一直是被社群討論的話題
好在目前有名的套件都有支援 TypeScript
就算沒有支援，也都會提供型別定義檔案(index.d.ts)
讓我們在使用上面不會有太大的問題

然而，有些比較小眾或是較久沒更新的套件
就會缺少型別定義檔案，這時候我們如果沒有處理就會無法編譯
這邊分享我們在安裝套件後會採取的步驟

1. 先安裝套件

   yarn add xxx
   

2. 檢查套件是否內建型別定義檔案
   基本上第一步是「相信」
   直接在程式碼裡面開始使用套件，如果沒問題就沒事了
   如果引入後出現 linting 錯誤（VSCode 預設有 TSLint 檢查）

3. 安裝型別定義檔案
   如果出現紅色的底線，就代表套件沒有內建型別定義檔案
   這時候我們可以看看社群上有沒有已經撰寫好的型別定義檔案
   我們可以使用底下方式來安裝

   yarn add --dev @types/xxx
   

   由於型別定義檔案僅有在編譯的時候才會使用
   所以我們不需要安裝到生產環境，安裝在開發環境即可
   技術社群上的大大們會將尚未有型別定義檔案的套件撰寫定義檔案後
   push 到這個 Repo 如此一來大家就可以直接安裝寫好的型別定義檔案了

4. 自己撰寫型別定義檔案
   想要使用的套件若是沒有在 DefinitelyTyped 裡面，只好自己來寫了
   如果你只是需要能盡快可以使用套件，會建議你直接在 react-app-env.d.ts 裡面寫

   declare module 'xxx' {
    function method1(): string
   }
   

   以下是偷懶的寫法，只有定義模組，沒有定義裡面的用法（趕專案用）

   declare module 'xxx'
   // import xxx from 'xxx' 時，xxx 會變成 any 型別
   

   如果你想要貢獻技術社群，那麼建議 clone DefinitelyTyped 這個 Repo，並且按照他上面的方式，新建一個跟套件同名的資料夾，撰寫 index.d.ts 與測試，然後再送 PR

注意：DefinitelyTyped 安裝的型別定義檔案需要與套件版本相對應，不然會有所衝突

結語

今天撰寫的內容較少，為了預留體力明天寫篇完整的文章
到目前為止已經將環境建置、專案架構、型別定義與套件使用說明了一遍
明天會直接拿個完整的舉例來貫穿這幾天的內容

murmur...
剩三天啦啦啦～～～