TypeScript实例讲解（十）

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

接上一篇：TypeScript实例讲解（九）

本篇内容：TypeScript 命名空间。

命名空间

在 TypeScript 中，为了避免对全局造成污染，可以使用命名空间。命名空间用 namespace 关键字声明。命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。

在命名空间内可定义任意变量，但默认只能在命名空间内部使用 。如果外部需要使用到命名空间内部的变量，则需要使用 export 关键字导出。

// 例 1
class Mask {
    // todo
}
class Content {
    // todo
}
class Create {
    constructor() {
        new Mask();
        new Content();
    }
}

例1定义了 Mask、Content、Create 三个类，但在最后真正用到的只有 Create 一个类。因为三个类对应的变量都是全局的，这样代码量多了就可能引起变量冲突等问题。

// 例 2
// 声明命名空间
namespace Model {
    class Mask {
          // todo
    }
    class Content {
          // todo
    }
    export class Create {
        constructor() {
            new Mask();
            new Content();
        }
    }
}
// 使用命名空间
new Model.Create();

例2中使用命名空间优化了例1的代码，把原来全局的三个变量都放到了 Model 这个命令空间内，让原来全局的三个变量变成了一个变量。并使用 export 关键字把有必要暴露出来的 Create() 方法暴露出来，直接通过命名空间名称进行访问。

命名空间带给我们的好处就是给我们一个类似模块化的开发方式，让我们尽可能少地声明全局变量。把一组相关的内容封装在一起，对外提供统一的暴露接口。

命名空间拆分

当某个命名空间代码量增大，我们可以考虑将这个命名空间进行拆分。

// 例 3
// modelMask.ts 文件
namespace Model {
    const show = false;
    const backgroundColor = '#000';
    export class Mask {
        // todo
    }
}
// modelContent.ts 文件
namespace Model {
    const maxWidth = 500;
    const backgroundColor = '#fff';
    export class Content {
        // todo
    }
}

modelMask.ts 文件和 modelContent.ts 文件中都有一个名为 Model 的命名空间。相当于一个命名空间分布在两个ts文件中，共享一个命名空间 。

命名空间和模块的区别

命名空间：内部模块，主要用于组织代码，避免命名冲突。
模块：TypeScript 外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。