「譯」TypeScript終極指南二:模塊的導入導出

原文來自 The Definitive TypeScript Guide -(https://www.sitepen.com/blog/2018/10/29/update-the-definitive-typescript-guide/

使用let和const

ES2015引入了使用let和const這兩種聲明變量的新方法。使用let或const聲明變量幾乎總是優於使用var,因為與其他語言相比,var聲明具有一些不尋常的作用域規則。與使用var聲明的變量不同,使用let聲明的變量是“塊作用域”變量,這些變量在它們的包含塊或循環之外是不可見的。這有助於避免使用重複的變量名引起的意外衝突。使用const聲明變量的作用域與使用let的聲明類似 - 最大的區別在於,如果你嘗試重新賦予const變量值,則編譯時會報錯。但是,你仍然可以更改由const聲明的對象中的某個屬性。儘可能使用const有助於程序員發出關於這些變量將會如何表現的意圖 - 這使得代碼更容易理解。

TypeScript 2.0添加了readonly關鍵字,該關鍵字不允許重新賦值,並且具有non-writable(不可寫)屬性或僅有get訪問器的屬性。這並不意味著non-primitives(非原生類型)是不可變的。

import 和 export

為了開始討論如何編寫TypeScript,我們首先需要了解如何創建和加載TypeScript文件。 TypeScript文件使用.ts文件擴展名,與AMD和CommonJS一樣,每個TypeScript文件名義上代表單獨的一個模塊。 在TypeScript中導入模塊遵循ES模塊(ESM)API:

「譯」TypeScript終極指南二:模塊的導入導出

默認情況下,相對路徑的模塊解析在TypeScript中與在AMD和CommonJS中相同,是相對於引用模塊的當前文件目錄進行解析。 絕對路徑的模塊解析方式則略有不同。首先,如果存在匹配的環境模塊聲明(ambient module declaration,在本系列的之後文章中會有介紹到),它的值會被用作as - is。 否則,編譯器從包含引用模塊的當前文件目錄開始遍歷文件系統,在每個父目錄中查找.ts文件,然後是.d.ts文件,直到找到匹配項為止。

在TypeScript 2.0之前,支持兩種解析模塊名稱的方法:classic(模塊名稱始終解析為文件,模塊使用文件夾遍歷搜索)和node(使用類似於Node.js的模塊加載機制)。 遺憾的是,這兩種方法都沒有解決相對於baseUrl定義模塊的方法,這是AMD系統(如Dojo、RequireJS以及SystemJS等)使用的方法,儘管仍在 named/mapped base URLs標準提案中努力。

TypeScript團隊沒有為TypeScript 2.0引入第三方模塊解析,而是在現有系統中添加了配置選項來解決這個問題:baseUrl、paths和rootDirs。只有在設置了baseUrl時才能使用paths。 如果至少定義了其中的一個屬性,那麼TypeScript編譯器將會嘗試使用它來解析模塊名,如果失敗了,將會回到原來默認的步驟。

可以使用export關鍵字從模塊導出值:

「譯」TypeScript終極指南二:模塊的導入導出

使用星號(*)導入整個模塊將會使模塊的導出物在本地具有相同的名稱:foo、bar和MyClass。 要從其他模塊使用上述代碼中導出的這些值,只需導入模塊並訪問其導出的屬性:

「譯」TypeScript終極指南二:模塊的導入導出

要導入單個屬性,請使用花括號括起屬性名稱:

「譯」TypeScript終極指南二:模塊的導入導出

你可以通過在export後添加default關鍵字來指定默認導出:

「譯」TypeScript終極指南二:模塊的導入導出

這相當於從一個AMD工廠函數返回一個值,或者為CommonJS中的module.exports賦一個值。 要使用該值,你只需直接import並使用它:

「譯」TypeScript終極指南二:模塊的導入導出

提供沒有花括號的導入標識符將加載默認導入,並且它將隱式地命名為你指定的任何內容。 可以使用as關鍵字對其他導入進行命名:

「譯」TypeScript終極指南二:模塊的導入導出

要將模塊的導出物附加到一個命名屬性上,就像你將屬性賦值給AMD或CommonJS的exports對象時一樣,為星型(*)的導入提供命名即可:

「譯」TypeScript終極指南二:模塊的導入導出

請注意,當用TypeScript的classes(2.2+)來使用mixins時,有一些微妙的細節將在本系列後期中關於classes的主題部分中進行描述。

未完待續,敬請期待下一篇


分享到:


相關文章: