.Net 蛤什麼?

前言

---

在使用 TypeScript 時，當你使用到第三方套件時，沒有強型別與 Intellisense 時該怎麼辦? 你必須要加入該套件的 DefinitelyTyped 檔案，也就是 .d.ts 檔案才能夠出現。

但是，若是該套件沒有提供 DefinitelyTyped 檔案時該怎麼辦? 1.就不用  2.自己撰寫....以下就稍微簡單說明一下該如何撰寫第三方套件的 DefinitelyTyped 檔案。

 

以 Angular Block UI 為例

---

首先我們可以先在 angular block ui 的網站上，閱讀他的使用文件，看看它提供了哪些方法可以進行操作，在此你可以不必要將第三方套件的所以內容都定義完成，基本上可以指定義你會使用到的即可。

在稍微瞭解了操作方式後，可以歸納出要定義的內容如下

1. angular block ui 物件本身
2. angular block ui 所提供的 start(), stop(), state(), isBlocking() 方法
3. angular block ui 的 state() 方法回應的內容

知道目標之後就可以開始撰寫 .d.ts 檔案。

 

在 typings 資料夾中，建立一個 angular-block-ui.d.ts 檔案，由於 angular block ui 是相依於 angular，我希望使用 ng 開頭的 module 名稱來找到 blockUI 的型別，要以這種方式呈現就需要將 module 名稱使用跟 angular 一至，如下

declare module angular {

}

接著定義 block ui 中前面所提到 3 點的介面，如下

declare module angular {

    interface IBlockUI {
        instances: IInstances;
        start(): void;
        stop(): void;
        state(): IState;
        isBlocking(): boolean;
    }

    interface IInstances {
        get(blockId: string): IBlockUI;
    }

    interface IState {
        blocking: boolean;
    }

}

 

完成後至 TypeScript 的 .ts 檔案內，你就可以開始享受強型別與 Intellisense 的快感了~

 

 

---

以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教
如有侵權內容也請您與我反應～謝謝您 :)