TypeScript模塊(外部模塊)、命名空間（內部模塊）

模塊

關於數據的一點說明:TypeScript 1.5裏術語已經發生了變化，“內部模塊”現在稱作“命名空間”。

“外部模塊”現在簡稱爲“模塊” 模塊在其自身的作用域裏執行，而不是在全局作用域裏；

這意味着定義一個模塊裏的變量，函數，類等等在模塊外部是不可見的，除非你明確地使用export形式之一導出他們。

相反，如果想使用其他模塊導出的變量，函數，類，接口等的時候，你必須要導入他們，可以使用import形式之一。 

假設創建一個db.ts的文件，那麼它就是一個模塊

export var test = 'xxxx';
export  function getData():any[] {
     console.log('獲取數據');
     return [
        {
           name:'zs',
           age : 18
        },{
           name:'ls',
           age : 20
        }
    ]
}

export function save(){
     console.log('保存數據');
}

 這裏引用db這個模塊

import {getData,save,test} from '文件路徑/ts文件名'
//eg: import {getData,save,test} from './modules/db'
getData();
save();
console.log(test);

另外一種暴露方法，統一暴露

var test = 'xxxx';
function getData():any[] {
     console.log('獲取數據');
     return [
        {
           name:'zs',
           age : 18
        },{
           name:'ls',
           age : 20
        }
    ]
}

function save(){
     console.log('保存數據');
}

export(test,getData,save);

引入起別名

import {getData as get,save as add,test as t} from '文件路徑/ts文件名'
get();
add();
console.log(t);

 export default 默認導出

每個模塊都有一個default 導出，默認導出使用default 關鍵字標記，並且一個模塊只能夠有一個default 導出，如果需要使用一種特殊

的導入形式來

var test = 'xxxx';
function getData():any[] {
     console.log('獲取數據');
     return [
        {
           name:'zs',
           age : 18
        },{
           name:'ls',
           age : 20
        }
    ]
}

function save(){
     console.log('保存數據');
}

export default save;

 使用export default 只導出save 方法

import save as add from '文件路徑/ts文件名'
add();

命名空間namespace 

在代碼量較大的情況下，爲了避免各種變量命名衝突，可以講相似功能的函數、類、接口等放置到命名空間內，

定義一個命名空間

namespace A{
interface Animal{
    name:string;
    eat():void;
}

export class Dog implements Animal(){
    name:string;
    constructor(name:string){
        super(name);
    }
    
    eat(){
        console.log(this.name +"--eat--肉")
    }
    
}

export  class Cat implements Animal(){
    name:string;
    constructor(name:string){
        super(name);
    }
    
    eat(){
        console.log(this.name +"--eat--魚")
    }
    
}
 var  dog = new Dog ('大黃');
 dog.eat();
}
 

此時A 空間中的變量 函數等不會與其他空間中的衝突。

如果想使用命名空間中的數據，那麼也需要使用export 將其暴露,然後使用的方法如下

var d = new A.dog("小黑");
d.eat();

命名空間模塊化

將命名空間封轉成模塊

export  namespace A{
interface Animal{
    name:string;
    eat():void;
}

export class Dog implements Animal(){
    name:string;
    constructor(name:string){
        super(name);
    }
    
    eat(){
        console.log(this.name +"--eat--肉")
    }
    
  }

}
 

 調用命名空間裏的數據

import {A} from './model/index'

 
 var  dog = new A.Dog ('大黃');
 dog.eat();

 

命名空間和模塊的區別：

命名空間：內部模塊，主要用於組織代碼，避免命名衝突。

模塊： ts的外部模塊的簡稱，側重代碼的複用，一個模塊裏可能會有多個命名空間。