TypeScript徹底解讀(26課時)_15.模塊和命名空間

新建文件夾ts-modules

並新建index.ts
在根index.ts內引入

新建a.ts文件

ts在1.5以前有兩個概念一個是內部模塊，一個是外部模塊，由於在1.5以前es6的標準尚未提出
1,.5版本開始內部模塊更名稱作命名空間，外部模塊改稱爲模塊
ts的模塊出了遵循es6的標準語法外，還有一些特定的語法

export語句

不只能導出變量、函數、類，還能夠導出ts中特有的類型別名和接口
2分46秒

再建立一個模塊B

b.ts的定義


引入b模塊同時導出，

能夠只導出裏面的name

還能夠給導出的內容起別名

import語句

引入部份內容

還可使用* as 變量的形式。打印出來就是一個對象，裏面就是咱們在b裏面導出的全部字段

導入一樣的也能夠起別名

剛纔咱們在a.ts內 導出了b裏面的*

咱們在index.ts內引入a.ts看一下
把A這個對象輸出出來


接口在輸出的內容裏是看不到的，咱們只能看到一些在js中能夠用的東西，好比兩個類

export default

就是默認導出，新建c.ts

直接導出一個值

name就是默認導出的字符串

ts中新增的 

ts爲了兼容es6和nodejs的寫法
export 等於和import require

使用name =require

npm install moment：安裝這個moment模塊，這是一個處理時間很強大的庫，安裝完成後從新運行


第二種方式是引入了全部，包括默認導出

第三種寫法：

以上就是模塊

命名空間

13分01


 

命名空間在1.5之間的版本叫作內部模塊，在ts1.5版本以前es6版本尚未正式成爲標準
1.5版本以後，使用命名空間代替內部模塊，外部模塊就改爲了叫作模塊
什麼狀況下使用命名空間，什麼狀況下使用模塊呢
當咱們在程序內部，用於防止全局的污染的時候，想把先關的內容都放在一塊兒的時候，咱們建議使用命名空間
當咱們封裝了一個工具或者庫要適用於模塊系統中引入的時候呢就是和使用模塊，模塊也能起到防止全局污染的做用，多數狀況適合用模塊的

命名空間的定義和使用

至關於定義了一個大的對象，裏面能夠定義變量，接口、類、方法等等，可是若是不是用export關鍵字，指定哪些內容個對外可見的話，外部是無法訪問到的

把全部涉及到內容驗證的都放在一塊兒，使用namespce來定義命名空間，正則表達是驗證是字母開頭的



若是想要命名空間裏面對外可使用的內容，須要使用export把它標記爲對外可見的
定義常量isNumberReg用來驗證是數字類型
定義完兩個正則表達式，再定義一個函數checkLetter，接收一個字符串返回正則表達式對於字符串校驗的結果

使用三斜線來標記要使用哪一個命名空間，表示要引入space.ts裏面的命名空間

命名空間若是不是使用webpack等工具進行編譯的話，直接在終端使用tsc編譯，只要在外部使用這個命名的地方三個斜線引入
而後在path屬性這裏相對於當前文件的路徑，編譯的時候須要指定參數outFIle：用來指定輸出的文件名
終端先停掉。在終端內執行tsc命令

src下就多了個index.js文件。由於咱們沒有使用命名空間內的東西，因此輸出的就是這一堆註釋

先把編譯後的src/index.js文件刪掉。index.ts裏面 接下來來使用命名空間的東西
使用驗證方法，驗證abc是否是一個字母，而後互再次執行tsc編譯指令

這個地方報了一個錯誤，找不到這個Validation

這裏地方的路徑，應該寫的是相對路徑


少了個 結束標記的斜線。這裏tslint推薦咱們使用模塊來引入，

這裏咱們先禁用掉，由於咱們要演示

再次編譯，就不報錯了 

編譯後的index.js文件

把咱們定義的命名空間，轉移成了一個space對象
使用export修飾的都是作爲屬性添加到了Validation這個對象上
命名空間能實現的東西，模塊都能實現，通常咱們使用模塊會比較多，命名空間畢竟是有點過期的概念

拆分爲多個文件

space.ts修更名字爲letter-validation.ts文件，專門用來驗證字符串字母

複製一個文件出來叫作number-validation.ts

修改letter-validation.ts內把numberReg去掉了

在number裏面把isLetterReg去掉

這樣就是同名的命名空間，裏面的內容是不同的，導出的東西也是不同的
讓isLetterReg也對外可見

同時引入這兩個一樣命名空間的ts文件

終端tsc編譯文件


在node環境下執行這個js


多個文件內的同名的命名空間，最終都會合成一個 ，因此是不會有衝突的

別名

可使用export關鍵字給經常使用的對象起個別名，這裏的別名和前面講的類型別名不是一回事
官方文檔原始的例子

接下來使用import關鍵字給經常使用的模塊起個別名，，使用別名爲了簡化深層次取裏面內容的過程

模塊解析

相對和非相對模塊的導入 
分別表示根目錄，當前目錄，上一層目錄

模塊的解析策略
兩種解析策略。
 
能夠指定這兩種形式

classic是es6的解析方式，也是ts的默認解析策略
node解析策略會查找package.json內的main配置節點

37分18秒大概到43分17秒之間 因爲操做失誤，ctrl+z回退的時候都回退沒了。

能夠指定一個路徑列表：在構建時，編譯器將這個路徑列表中的路徑內容到一個文件夾中
  
例如：編譯器在構建的時候，會將這兩個文件夾的文件複製到輸出到同一個目錄中，
因此能夠在index.ts中使用相對路徑來引入一些模塊

例如ts-modules/index.ts在引入modules/a.js的時候可使用相對路徑，由於在編譯的時候已經輸出到同一個目錄下

noResolve;

例如在index.ts中引入了a.ts和b.ts 而後在使用tsc的時候，後面指定了noResolve,由於這裏只指定了a.ts因此最終a.ts會打入到index.ts內。b.ts就會提示找不到。
通常咱們使用webpack這種編譯工具，是用不到noResolve的