前言
TypeScript的模組化大概可以分兩個部分(1)模塊(module)方式是ES6模組標準(2)命名空間(namespace)是TypeScript所制定的方法，這兩個概念會讓元件化更容易實作，在TypeScript一個*.ts檔案為一個模塊，接下來會介紹import和export這兩個語法，如何使用它們來完成模組化．
Note: TypeScript 1.5以後內部模塊稱為命名空間，外部模塊稱為模組，這是為了跟ECMAScript 2015一致．
第一部分：模塊(module)
在模組(.ts檔)定義將變數、函式和類等，外部無法存取內部邏輯，只能透過export語法去導出所需要變數、函式和類給其他模組((.ts檔)使用，當我們規劃元件時，該模組本身export的函式、變數和類就是模組的限制，這些在規劃元件藍圖時就應該考慮哪些資料需要提供給外部模組使用/不使用．在TypeScript可以支援不同的模組化系統如：AMD、SystemJS、ES Modules等等．
Export 語法
(1) export 變數
//檔名 moduleEx.ts
export var 變數名稱 = 值;
export const 變數名稱 = 值
範例：
export var kk=1234;
export const PI=3.1415 ;(2) export 介面
//檔名 moduleEx.ts
export interface 介面 {
//介面內容
}
範例：
export interface IShap{
width:number;
heigh:number;
}(3) export 類別
//檔名 moduleEx.ts
//方法一
export class 類別名稱 {
//類別內容
}
//方法二
class 類別名稱 {
//類別內容
}
export {類別名稱}
範例：
//方法一： 可以參考下面範例
//方法二
class Car{
constructor(color:string, engine:string){
this.color = color ;
this.engine = engine ;
}
color:string ;
engine:string ;
getColor(){
return this.color ;
}
getEngine(){
return this.engine ;
}
}
export {Car}(4) export 函式
//檔名 moduleEx.ts
//方法一
export function 函式名稱 {
//函式內容
}
//方法二
function 函式名稱 {
//函式內容
}
export {函式名稱}
範例：
//方法一
export function sayHello(name:string){
console.log("Hi! "+name)
}
//方法二
function sayHello(name:string){
console.log("Hi! "+name)
}
export {sayHello}import 語法
當我編譯有import檔案時，編譯時也會連同import的檔案．如下面moduleImport.ts有載入moduleEx.ts時也會一起編譯．
範例： tsc moduleImport.ts
import {載入名稱1,載入名稱2,...} from './TS檔案路徑'
範例：//檔名 moduleImport.ts
import { kk,Car, sayHello} from './moduleEx'
console.log(kk)
let car = new Car("RED","HRV");
console.log(car.getColor());
console.log(car.getEngine());
sayHello("Jack");範例結果
123
RED
HRV
Hi! Jack
第二部分：命名空間(namespace)
當未宣告命名空間類別都會放在global namespace中，當有相同類別名稱就會出現編譯錯誤．命名空間主要是解決1.有相同類別名稱的衝突問題．2.邏輯分類．下面這兩種寫法TypeScript仍都支援，但是官方比較建議用namespace的語法．
Internal Module Syntax (Old) 語法：
module 名稱{
//定義類別
class 類別名稱 {}
}Namespace Syntax (New) 語法：
namespace 名稱{
//定義類別
class 類別名稱 {}
}當開發時有兩個類別名稱都叫Account會員類別，這時編譯會有類別同名衝突的問題，但是在實務的功用卻不同一個Account用來紀錄公司內部員工的資料，另一個Account是用來處理約聘或是工讀生的資料，這是可以利用namespace分別宣告其命名空間為HR 和TEMP，很容易就可以分辨．
範例：
namespace HR{
export class Account{
name:string;
salary_monthly:number;
showSalary(){
console.log(this.name+":月薪"+this.salary_monthly) ;
}
}
}
namespace TEMP{
export class Account{
name:string;
salary_hourly:number;
showSalary(){
console.log(this.name+":時薪"+this.salary_hourly) ;
}
}
}
var acc01 = new HR.Account() ;
var acc02 = new TEMP.Account() ;
acc01.name="jack" ;
acc01.salary_monthly=100000 ;
acc02.name="blay" ;
acc02.salary_hourly=105;
acc01.showSalary() ;
acc02.showSalary() ;
執行結果：
jack:月薪100000
blay:時薪105
留言
張貼留言