1. 程式人生 > 其它 >TypeScript 型別宣告檔案

TypeScript 型別宣告檔案

型別宣告檔案:用來為已存在的 JS 庫提供型別資訊。

TS 中的兩種檔案型別

    1. .ts 檔案(是 implementation 程式碼實現檔案)

      1. 既包含型別資訊又可執行程式碼。

      2. 可以被編譯為 .js 檔案,然後,執行程式碼。

      3. 用途:編寫程式程式碼的地方。

    2. .d.ts 檔案(是 declaration 型別宣告檔案)

      1. 只包含型別資訊的型別宣告檔案。不能出現可執行程式碼

      2. 不會生成 .js 檔案,僅用於提供型別資訊。

      3. 用途:為 JS 提供型別資訊。

 

型別宣告檔案的使用說明

在 TS 中,型別宣告檔案的使用有2種方式:

  1. 使用已有的型別宣告檔案

    1. 使用已有的型別宣告檔案

      1. 內建型別宣告檔案:TS 為 JS 執行時可用的所有標準化內建 API 都提供了宣告檔案。(通過 Ctrl + 滑鼠左鍵 | mac:option + 滑鼠左鍵)

      2. 第三方庫的型別宣告檔案(有兩種存在形式):

        1. 庫自帶型別宣告檔案 例:axios (匯入時 TS 會自動載入庫自己的型別宣告檔案)

        2. DefinitelyTyped 提供

          1. DefinitelyTyped 是 github 倉庫,用來提供高質量 TypeScript 型別宣告。可以通過 npm / yarn 來下載該倉庫提供的 TS 型別宣告包,這些包的名稱格式為:@types/*

          2. 當安裝 @types/* 型別宣告包後,TS 也會自動載入該類宣告包,以提供該庫的型別宣告。

  2. 建立自己的型別宣告檔案

    1. 專案內共享型別

    1. 建立 index.d.ts 型別宣告檔案

    2. 建立需要共享的型別,並使用 export 匯出 (TS 中的型別也可以使用 import / export 實現模組化功能)

    3. 在需要使用共享型別的 .ts 檔案中,通過 import 匯入即可(.d.ts 字尾匯入時,直接省略)

      1. 為已有 JS 檔案提供型別宣告

        1. 將 JS 專案遷移到 TS 專案時,為了讓已有的 .js 檔案有型別宣告

        2. 成為庫作者,建立庫給其他人使用

        3. 型別宣告檔案的編寫與模組化方式相關,不同的模組化方式有不同的寫法。

        4. 在匯入 .js 檔案時, TS 會自動載入與 .js 同名的 .d.ts

          檔案

        5. declare 關鍵字:用於型別宣告,為其他地方(比如 .js 檔案)已存在的變數宣告型別,而不是建立一個新的變數。

          1. 對於 type \ interface 等這些明確就是 TS 型別的(只能在 TS 中使用),可以省略 declare 關鍵字

          2. 對於 let \ function 等具有雙重含義(在 JS \ TS 中都能用),應該使用 declare 關鍵字,明確指定此處用於型別宣告

      window、document等 BOM、DOM API 也都有相應的型別宣告(lib.dom.d.ts)

      declare let count: number 
      declare let songName: string interface Point { x: number, y: number } 
      declare let position: Point 
      declare function add (x: number, y: number): number 
      type FomartPoint = (point: Point) => void 
      declare const fomartPoint: FomartPoint // 注意:型別提供好以後,需要使用 模組化方案 中提供的模組化語法,來匯出宣告好的型別。然後,才能在其他的 .ts 檔案中使用 
      export { count, position, songName, Point, add, fomartPoint }