TypeScript 型別宣告檔案
TS 中的兩種檔案型別
-
.ts
檔案(是implementation
程式碼實現檔案) -
既包含型別資訊又可執行程式碼。
-
可以被編譯為 .js 檔案,然後,執行程式碼。
-
用途:編寫程式程式碼的地方。
-
.d.ts
檔案(是declaration
型別宣告檔案) -
只包含型別資訊的型別宣告檔案。不能出現可執行程式碼
-
不會生成 .js 檔案,僅用於提供型別資訊。
-
型別宣告檔案的使用說明
在 TS 中,型別宣告檔案的使用有2種方式:
-
使用已有的型別宣告檔案
-
使用已有的型別宣告檔案
-
內建型別宣告檔案:TS 為 JS 執行時可用的所有標準化內建 API 都提供了宣告檔案。(通過 Ctrl + 滑鼠左鍵 | mac:option + 滑鼠左鍵)
-
第三方庫的型別宣告檔案(有兩種存在形式):
-
庫自帶型別宣告檔案 例:axios (匯入時 TS 會自動載入庫自己的型別宣告檔案)
-
由
DefinitelyTyped
提供 -
DefinitelyTyped
是 github 倉庫,用來提供高質量 TypeScript 型別宣告。可以通過 npm / yarn 來下載該倉庫提供的 TS 型別宣告包,這些包的名稱格式為:@types/*
-
當安裝
@types/*
型別宣告包後,TS 也會自動載入該類宣告包,以提供該庫的型別宣告。 -
建立自己的型別宣告檔案
-
專案內共享型別
-
建立
index.d.ts
型別宣告檔案 -
建立需要共享的型別,並使用 export 匯出 (TS 中的型別也可以使用
import / export
實現模組化功能) -
在需要使用共享型別的 .ts 檔案中,通過 import 匯入即可(
.d.ts
字尾匯入時,直接省略)
-
為已有 JS 檔案提供型別宣告
-
將 JS 專案遷移到 TS 專案時,為了讓已有的 .js 檔案有型別宣告
-
成為庫作者,建立庫給其他人使用
-
型別宣告檔案的編寫與模組化方式相關,不同的模組化方式有不同的寫法。
-
在匯入 .js 檔案時, TS 會自動載入與 .js 同名的
.d.ts
-
declare
關鍵字:用於型別宣告,為其他地方(比如 .js 檔案)已存在的變數宣告型別,而不是建立一個新的變數。 -
對於
type \ interface
等這些明確就是 TS 型別的(只能在 TS 中使用),可以省略 declare 關鍵字 -
對於
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 }