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的外部模块的简称,侧重代码的复用,一个模块里可能会有多个命名空间。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章