TypeScript的命名空间-NameSpace

初识TypeScript的命名空间-NameSpace

新建个TSWeb文件夹，在VScode中打开文件夹，新建终端，在终端中输入

// 生成package.json
npm init -y // -y 所有的配置都选择默认的

再运行生成tsconfig.json

ts -init

创建一个入口文件：index.html
完成配置


在src中创建page.ts，写入

在终端中运行 编译生成page.js

tsc

生成代码如下

打开文件夹和浏览器，把index.html拖拽到浏览器中，显示如下：

这里面代码中有个问题：都是全局变量。
代码量一大，这样操作会使全局变量过多，造成全局变量污染。
所以我们在就要使用-NameSpace
在page.ts 中用

namespace Home{
	class Header{.........}
	class Content{.........}
	class Footer{............}
	export c;ass Page{........} //暴露一个
}

再运行,再次编译更新page.js

tsc

在浏览器中F12打开console在里面输入查找Home.Footer、Home.Page
可以看到Home.Footer是显示undefined的，只有Home.Page是有显示的

namespace的好处： 让我们的全局变量变得很少，实现了基本的封装，减少了全局变量的污染。

深入了解TypeScript的命名空间-NameSpace

在src中新建一个components.ts

page.ts要修改一下

在index.html 中引用多个script会造成代码沉余，所以去tsconfig.json进行两个配置

"module": "amd", //把commonjs改成amd,因为commonjs不支持 outFile
"outFile": "./build/page.js",  //多个ts文件编译生成同一个json文件

命名空间也可进行嵌套

在终端运行编译

tsc

刷新浏览器页面，在控制台中可显示