TypeScript入門筆記（四）

接上篇。

TypeScript中的模塊

在項目根目錄中新建一個./module的文件夾，在裏面建立以下ts文件。

文件：Validation.ts

1 // 例，Validation.ts文件做爲一個模塊（module）
2 // 使用export關鍵字將接口「StringValidator」暴露給外界
3 
4 export interface StringValidator {
5     isAcceptable(s: string): boolean;
6 }

 文件名：ZipCodeValidator.ts

 1 /*
 2  * ///<reference path="./Validation.ts" />  這種引入模塊的寫法是老版本的，不建議繼續使用
 3  *  */
 4 
 5 // 使用import關鍵字將Validation文件中的StringValidator引入
 6 import {StringValidator} from "./Validation";   //導入文件中的StringValidator接口
 7 
 8 const numberRegexp = /^[0-9]+$/;
 9 
10 export class ZipCodeValidator implements StringValidator {
11     isAcceptable(s: string) {
12         return s.length === 6 && numberRegexp.test(s);
13     }
14 }

 文件名：TelValidator.ts

 1 //還有一種引入的寫法以下，把這個文件用以「validator」做爲命名空間導入
 2 import validator = require('./Validation');
 3 
 4 let telReg = /^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
 5 
 6 export class TelValidator implements validator.StringValidator {
 7     isAcceptable(s: string) {
 8         return telReg.test(s);
 9     }
10 }

 文件：ParseIntBasedZipCodeValidator.ts

 1 // 也能夠使用這種寫法，相似python的引入寫法，並給這個模塊起別名
 2 import * as validator from "./Validation"; 
 3 
 4 //使用別名就能夠「點」出來模塊中export暴露出來的內容
 5 export class ParseIntBasedZipCodeValidator implements validator.StringValidator{
 6     isAcceptable(s: string) {
 7         return s.length === 5 && parseInt(s).toString() === s;
 8     }
 9 }
10 
11 // 導出原先的驗證器但作了重命名
12 export {StringValidator as ValidatorBase} from "./Validation";

命名空間

文件名：University.ts

 1 /**
 2  * 命名空間，關鍵字「namespace」
 3  * 不少編程語言中都有這個概念，你們都是相似的做用
 4  */
 5 
 6 export namespace Earth {
 7 
 8     export class Person {
 9         planet: string = "地球";
10         constructor(readonly name: string, readonly age: number) {
11         }
12 
13         SayHi(): void {
14             console.log(`我是${this.name}，我來自${this.planet}`)
15         }
16     }
17 }
18 
19 export namespace Mars {
20 
21     export class Person {
22         planet: string = "火星";
23         constructor(readonly name: string, readonly age: number) {
24         }
25 
26         SayHi(): void {
27             console.log(`我是${this.name}，我來自${this.planet}`)
28         }
29     }
30 }

 1 import * as university from "./University"
 2 
 3 //使用命名空間區分同名類
 4 let earther = new university.Earth.Person("小明", 28);
 5 let marser = new university.Mars.Person("哈努納漢", 342);
 6 
 7 earther.SayHi();    //我是小明，我來自地球
 8 marser.SayHi();     //我是哈努納漢，我來自火星
 9 
10 //注意一點，這段代碼在瀏覽器中運行會報錯，是由於不支持「export」這個用法，可是在控制檯使用nodejs執行是能夠正常調用的，若是想在瀏覽器中運行能夠使用webpack