TypeScript入門-模塊

學習Angular 2 ， 《揭祕Angular 2》讀書筆記。Angular2 選擇 TypeScript 做爲其官方最主要的構建語音，這意味着掌握 TypeScript 語音將更有利於高效地開發 Angular 應用。

模塊

模塊是自聲明的，兩個模塊之間的關係是經過在文件級別上使用 import 和 export 來創建的。TypeScript 和 ES6 同樣，任何包含頂級 import 或者 export 的文件都會被當成一個模塊。

模塊是在其自身的做用域裏執行，並非在全局做用域，這意味着定義在模塊裏面的變量、函數和類等在模塊外部是不可見的，除非明確地使用 export 導出它們。相似地，咱們必須經過 import 導入其餘模塊導出的變量、函數、類等。

模塊使用模塊加載器去導入它的依賴，模塊加載器在代碼運行時會查找並加載模塊間的全部依賴。經常使用的模塊加載器有 SystemJs 和 Webpack。

模塊導出方式

模塊能夠經過導出方式來提供變量、函數、類、類型別名、接口等給外部模塊調用，導出的方式分爲如下三種：

• 導出聲明

任何模塊都可以經過 export 關鍵字來導出，示例代碼以下：

export const COMPANY = 'EG';    // 導出變量

export interface IdentiryValidate {    // 導出接口
    isValidate(s: string): boolean;    
}

export class ErpIdentityValidate implements IdentiryValidate {    // 導出類
     isValidate(s: string) {
         return true;
     }
}

• 導出語句

有時咱們須要對導出的模塊進行重命名，這個時候就用到了導出語句，示例代碼以下：

export class ErpIdentityValidate implements IdentiryValidate {    // 導出類
     isValidate(s: string) {
         return true;
     }
}

export { ErpIdentityValidate }
export { ErpIdentityValidate as EGIdentityValidate };    // 重命名

• 模塊包裝

有時候咱們須要修改和擴展已有的模塊，並導出供其餘模塊調用，這時，能夠時候模塊包裝來再次導出，我看到別的文章將其稱爲 「從新導出」 。示例代碼以下：

export { ErpIdentityValidate as EGIdentityValidate } from './ErpIdentityValidate';

一個模塊能夠包裹多個模塊，並把新的內容以一個新的模塊導出，示例代碼以下：

export * from './IdentiryValidate';
export * from './ErpIdentityValidate';

模塊導入方式

模塊導入與模塊導出相對應，可使用 import 關鍵字來導入當前模塊依賴的外部模塊。導入方式有以下幾種：

• 導入一個模塊

import { ErpIdentityValidate } from "./ErpIdentityValidate";
let erpValide = new ErpIdentityValidate();

• 別名導入

import { ErpIdentityValidate as ER} from "./ErpIdentityValidate";
let erpValide = new ERP ();

另外，咱們也能夠對整個模塊進行別名導入，將整個模塊導入到一個變量，並經過這個變量來訪問模塊的導出部分，實例代碼以下：

import * as validator from "./ErpIdentityValidate";
let myValidate = new validator.ErpIdentityValidate();

模塊的默認導出

模塊能夠用 default 關鍵字實現默認導出的功能，每一個模塊能夠有一個默認導出。類 和 函數聲明 能夠直接省略導出名來實現默認導出。默認導出有利於減小調用方調用模塊的層數，省去一些冗餘的模塊前綴書寫，示例代碼以下：

• 默認導出類

// ErpIdentityValidate.ts
export default class ErpIdentityValidate implements IdentiryValidate {
     isValidate(s: string) {
         return true;
     }
}

// test.ts
import validator from "./ErpIdentityValidate";
let erp = new validator();

• 默認導出函數

// nameServiceValidate.ts
export default function(s: string){
    return true;    // 具體代碼略
}

// test.ts
import validate from './nameServiceValidate';
let name = 'Angular';

// 使用導出函數
console.log(`"${name}" ${validate(name)? " matches": " does not matches"}`);

• 默認導出值

// constantService.ts
export default "Angular";

// test.ts
import name form "./constantService";
console.log(name);

模塊設計原則

在模塊設計中，公共遵循一些原則有利於更好地編寫和維護項目代碼，下面列出幾點模塊設計的原則

1.儘量的在頂層導出

2.明確地列出導入的名字

import {ClassTest, FuncTest} from './ModuleTest';

3.使用命名空間模式導出

// MyLargeModule.ts
export class Dog {}
export class Cat {}
export class Tree {}

// test.ts
import * as myLargeModule from './MyLargeModule';
let x = new myLargeModule.Dog();

3.使用模塊包裝進行擴展

咱們可能常常須要去擴展一個模塊的功能，推薦的方案是不要去改變原來的對象，而是導出一個新的對象來提供新的功能，示例代碼以下：

// ModuleA.ts
export class ModuleA {
    constructor(){/*... */}
    sayHello() {/*... */}
}

// ModuleB.ts
import { ModuleA } from './ModuleA';
class ModuleB extends ModuleA {
    constructor(){super(); /*... */}
    // 添加新方法
    sayHi() {/*... */}
}
export { ModuleB as ModuleA }

// Test.ts
import { ModuleA } from './ModuleB';
let C = new ModuleA();