TS中的模块和命名空间

一、模块

模块的的概念（官方）:

关于术语的一点说明: 请务必注意一点，TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。

“外部模块”现在则简称为“模块” 模块在其自身的作用域里执行，而不是在全局作用域里；

这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。

相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用 import形式之一。

我们可以把一些公共的功能单独抽离成一个文件作为一个模块。

模块里面的变量 函数 类等默认是私有的，如果我们要在外部访问模块里面的数据（变量、函数、类），

我们需要通过export暴露模块里面的数据（变量、函数、类...）。

暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据（变量、函数、类...）。

模块定义和使用方法

首先我们定义一个ts文件来当做我们的模块，然后把我们想要对外暴露的参数或者方法或者类通过export关键字对外暴露：

db.ts如下

var dbUrl='xxxxxx';

export function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]
}

export function save(){
    console.log('保存数据成功');
}

然后在需要用到的地方引入：

import { getData,save } from './modules/db';  // 引入db模块
getData();  // 调用getData方法
save();  // 调用save方法

以上的导出方法是直接在方法前面加上export关键字，我们还可以使用export进行统一导出，如下：

db.ts如下：

var dbUrl='xxxxxx';

function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]
}


function save(){
    console.log('保存数据成功');
}

export {dbUrl,getData,save};    // 我们直接在类的底部把我们希望对外暴露的元素统一进行export

还有一种导出叫做默认导出，默认导出在一个类里面只能有一个。通过默认导出的元素，在别的地方导入的时候，不用加大括号：

db.ts如下：

.
.
.

export default getData;

在别的地方导入：

import getData from './modules/db';    // 导入getData方法的时候不需要加大括号

getData();

二、命名空间

命名空间:

在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内

同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。

命名空间和模块的区别：

命名空间：内部模块，主要用于组织代码，避免命名冲突。

模 块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。

使用示例代码：

namespace A{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }
        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃猫粮。`);
        }
    }   

}




namespace B{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }
        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }
        eat() {
            console.log(`${this.name} 在吃猫粮。`);
        }
    }  
}

// 使用
var c=new B.Cat('小花');

c.eat();

以上只是导出了命名空间里面的类和方法，接下来我们把命名空间也导出，而且在使用的地方同时导入多个命名空间：

首先定义命名空间ts文件

animal.ts如下：

export namespace A{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃猫粮。`);
        }
    }   

}

export namespace B{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃猫粮。`);
        }
    }   

}

使用的时候同时导入A、B两个命名空间：

import {A,B} from './modules/animal';

var d=new A.Dog('小黑');
d.eat();

var dog=new B.Dog('小花');
dog.eat();

以上就是typescript中模块和命名空间的使用方法。