一文大白话理解typescript模块和命名空间

一文大白话理解typescript模块和命名空间

1. 先回忆javascript模块

• ES6之后，javascript将模块标准化，不同模块的，看我这篇文章
• 一文大白话讲清楚ES6 模块（module）的原理与应用
• 简要回忆，就是为了防止全局污染，增强代码复用等，我们设计了模块
• 通过export暴露出对外的接口
• 通过import进行引入

2. typescript模块

• Typescript模块和javascript模块的使用方式是一毛一样的，不多讲，看上面的文章
• 直接上代码举例子
• 我们建立一个index.ts,里面定义了一个变量和方法，然后通过export暴露出去

const name='tom';
const say=(str)=>console.log(str)
export{name,say,
}

• 在另外一个test.ts里面通过import引入

import {name ,say} from './index'
say(name)//tom

3. 命名空间

• 啥是命名空间
• 分两半，命名+空间
• 命名，理解为创建变量
• 空间，理解为可见范围
• 就是创建变量的可见范围
• 为啥要提这个，一句话，因为命名冲突
• 如果不适用模块，那么ts里面的变量会被挂在全局，那么不同的ts里面就会产生命名冲突
• 所以我们需要一个能把这种冲突隔开的东西，就是命名空间。
• 各个命名空间之间的变量是互不想干的
• 我们通过关键字namespace来创建命名空间

let str:string='name';
let str:string='name';//会报错

• 如果不使用命名空间，我们创建同名变量时会报错
• 这时我们加入命名空间

namespace test {let str:string='name'console.log(str)//name
}
namespace test2 {let str:string='name'console.log(str)//name
}

• 因为使用命名空间了，空间里面的变量互不干扰，所以可以重复定义

4. 命名空间的本质

• 有人说命名空间的本质是一个对象，也就是将命名空间里面的变量组织到命名空间这个对象上
• 那是因为这个人在使用namespace的同时一定模块化了
• 空口无凭，上代码，看模块化后的namespace编译后的命名空间是个啥

namespace test {export let name = 'tom';export let age = 12;export let say = (str)=>{console.log(str);};}

• 编译后

var test;
(function (test) {test.name = 'tom';test.age = 12;test.say = function (str) {console.log(str);};
})(test || (test = {}));

• 这么看说的对，
• 但是不使用模块化呢
• 像下面这个

namespace test {let str:string='name'console.log(str)//name
}
namespace test2 {let str:string='name'console.log(str)//name
}

• 编译后

var test;
(function (test) {var str = 'name';console.log(str); //name
})(test || (test = {}));
var test2;
(function (test2) {var str = 'name';console.log(str); //name
})(test2 || (test2 = {}));

• 看见了吧，这哪来的对象
• 所以得分啥情况