TypeScript 命名空间

TypeScript 教程

命名空间是为了解决重复命名的问题。

在一个班级中，有2个同学都叫 李小明。那么如何区分这两个同学呢？可以在名字前面加前缀，例如：广东.李小明，福建.李小明。

#### 使用namespace

在实际游戏开发中，总是会去Github上拷贝别人的代码，不可避免的，拷贝过来的代码就会和你的代码有重复的命名。这个时候，就需要将你的代码，加上独一无二的命名空间。这样就不会有冲突了。

例如下面是你的 Monster 类定义

```javascript
namespace ThisisGame
{
	class Monster{
		
	}
}
```

下面是网上拷贝的代码的Monster定义

```javascript
namespace MZ
{
	class Monster{
		
	}
}
```

这两份代码中的 Monster 归属于不同的 namespace，是不会产生冲突的。

------------

#### 访问namespace中的代码

添加了 namespace 之后，你这个 Monster 就只能在 其他 也属于 这个 namespace 的代码中使用。

如下的代码，会报错

```javascript
namespace ThisisGame { 
    var boluoding = {
        mName:"菠萝丁之王",
        mHp: 100,
        mMp: 200,
        mAttack: 150,//攻击力

Attack: function () { }//攻击
    }
}

console.log(boluoding.mName)//Cannot find name 'boluoding'.(2304)
```

注意看下图的错误，提示找不到 boluoding。

![TypeScript namespace](/static/img/1580878136096042800.jpg "TypeScript namespace")

这是因为 boluoding 被添加到了 ThisisGame 这个 namespace 中，但是 console.log 这行代码却在 ThisisGame 外面，所以访问不到 boluoding。

如何解决上面的错误？

首先要将 boluoding 设置为可以被外部代码访问。

export var boluoding = {
	
然后在 boluoding 前面加上 ThisisGame 就可以了。

console.log(ThisisGame.boluoding.mName)
	
完整代码如下

```javascript
namespace ThisisGame { 
    export var boluoding = {
        mName:"菠萝丁之王",
        mHp: 100,
        mMp: 200,
        mAttack: 150,//攻击力

Attack: function () { }//攻击
    }
}

console.log(ThisisGame.boluoding.mName)
```

输出结果

菠萝丁之王

#### 跨文件访问namespace中的代码

一个游戏项目，代码文件多达上万个，那么如何访问别的代码文件中的 namespace 的代码呢？

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

/// <reference path = "SomeFileName.ts" />

例如将上面的代码拆分到两个代码文件中。

```javascript
//boluoding.ts
namespace ThisisGame { 
    export var boluoding = {
        mName:"菠萝丁之王",
        mHp: 100,
        mMp: 200,
        mAttack: 150,//攻击力

Attack: function () { }//攻击
    }
}
```

```javascript
//test.ts，访问boluoding.ts中的代码，需要添加下面这行。
/// <reference path = "boluoding.ts" />
console.log(ThisisGame.boluoding.mName)
```

编译

tsc --out app.js test.ts
	
运行

![typescript namespace](/static/img/1580882712820816500.png "typescript namespace")

------------

#### namespace嵌套

你可以对 namespace 进行嵌套，一层又一层。。

```javascript
namespace Tencent
{
    export namespace TimiStudio
    {
        export namespace DNFM
        {
            export var boluoding = {
                mName:"菠萝丁之王",
                mHp: 100,
                mMp: 200,
                mAttack: 150,//攻击力

Attack: function () { }//攻击
            }
        }
    }
}

console.log(Tencent.TimiStudio.DNFM.boluoding.mName)
```

输出结果

菠萝丁之王

------------

#### namespace的本质

例如下面这段代码

```javascript
namespace Tencent
{
    export var Name="菠萝丁之王"
}

console.log(Tencent.Name)
```

编译生成的 JavaScript 代码如下

```javascript
var Tencent;
(function (Tencent) {
    Tencent.Name = "菠萝丁之王";
})(Tencent || (Tencent = {}));
console.log(Tencent.Name);
```

很明了，TypeScript的 namespace，其实是用JavaScript 的 function 来模拟的。

>还是要记住并理解这句话，一切皆对象。