（十九）TypeScript 命名空间（上）

一、准备工作

学习命名空间之前我们先来做一下准备工作，在一个空的文件夹下创建一个新的项目，目录结构为

npm init 生成package.json

tsc -init 生成tsconfig.json

我们想要编写在src目录下，打包生成之后在build目录下，修改一下tsconfig文件

然后我们在index.html中引入打包之后生成的page.js

为了测试效果，我们在page.ts中随便写入一行代码

然后在命令行输入tsc进行编译，打开index.html，在控制台可以看到我们输入的内容就代表引入成功了

二、使用场景

我们在page.ts中写入这样一段代码

在index.html实例化page

编译后刷新index.html可以在浏览器中看到我们创建的内容

但是我们打开编译后的page.js文件会发现变量都被声明成全局变量了，这样对项目的维护是不太友好的

这时要用到我们的命名空间的NameSpace对上面的代码进行一下改造

然后我们tsc进行编译，再打开page.js可以看到只有Home被声明成全局变量了，其它都是Home的方法

然后在index.html中进行修改

打开浏览器刷新发现页面和之前一样!

证明我们的改造是有效果的，减少了全局变量，这也是命名空间的基本用法。