TypeScript入門-模組

wuweisen發表於2019-02-16
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();

相關文章