TypeScript入门八：TypeScript的命名空间

察哥發表於 2019-11-10 15:06:00

TypeScript入门八：TypeScript的命名空间

<ul style="color: rgba(41, 78, 128, 1)">
<li>初识命名空间（namespace指令）</li>
<li>命名空间与文件拆分</li>
<li>多重命名空间与三斜杠指令引入依赖文件</li>
</ul>
<h2 style="background-color: rgba(41, 78, 128, 1); border-radius: 5px"> 一、初识命名空间（namespace指令）</h2>
TypeScript的命名空间可以说就是ES6的模块化，其编译的ES5代码都是基于闭包将局部变量暴露给外部，作为外部一个对象的属性提供给外部作用域使用。先来看一个最简单的示例：
<div class="cnblogs_code">
<pre>1 namespace MyMath{ //使用namespace指令声明命名空间MyMath
2 //使用export指令暴露到作用域外部
3 export const PI = 3.14;
4 export function sumValue(num1:number, num2:number){
5 return num1 + num2;
6 }
7 }
8 console.log(MyMath.PI);//在外部使用命名空间
9 console.log(MyMath.sumValue(2,3));</pre>
</div>
来看看上面命名空间ES5语法编译的代码：
<div class="cnblogs_code">
<pre> 1 var MyMath;
 2 (function (MyMath) {
 3 //使用export指令暴露到作用域外部
 4 MyMath.PI = 3.14;
 5 function sumValue(num1, num2) {
 6 return num1 + num2;
 7 }
 8 MyMath.sumValue = sumValue;
 9 })(MyMath || (MyMath = {}));
10 console.log(MyMath.PI); //在外部使用命名空间
11 console.log(MyMath.sumValue(2, 3));</pre>
</div>
<h2 style="background-color: rgba(41, 78, 128, 1); border-radius: 5px"> 二、命名空间与文件拆分</h2>
前面我们已经知道TypeScript命名空间就是将闭包内部的变量，通过暴露到外部以对象引用的方式给外部使用，当一个页面基于多个Ts脚本文件时，能想到的第一个方法就是将各个Ts文件转换的js文件依次引入到页面就可以实现了。比如下面这个示例：
<div class="cnblogs_code">
<pre>工作区间
index.html
index.ts
index.js//IDE自动转换的脚本
 a.ts
a.js//IDE自动转换的脚本
 b.ts
b.js//IDE自动转换的脚本
tsconfig.json</pre>
</div>
然后将第一节中的示例代码拆分到各个文件中：
<div class="cnblogs_code">
<pre> 1 //a.ts
 2 namespace MyMath{
 3 export const PI = 3.14;
 4 }
 5 //b.ts
 6 namespace MyMath{
 7 export function sumValue(num1:number, num2:number){
 8 return num1 + num2;
 9 }
10 }
11 //index.ts--在这里使用命名空间的内容
12 console.log(MyMath.PI);
13 console.log(MyMath.sumValue(2,3));
14
15 //index.html引入各个ts转换的js脚本
16 <script src="./a.js"></script>
17 <script src="./b.js"></script>
18 <script src="./index.js"></script></pre>
</div>
上面这种最暴力的方式显然不能成为我们最想要的，TS当然也给我们提供了一个解决方案，通过IDE将所有ts转码到一个js脚本中，通过命令行工具outfile来实现：
<div class="cnblogs_code">
<pre> tsc --outfile index.js a.ts b.ts index.ts</pre>
</div>
通过outfile命令将a.ts、b.ts、index.ts就可以统一转码打包到一个index.js文件中，然后index.html就只需要引入一个index.js文件就可以了。
但是这时候可能你还是会觉得不够智能，你会想能不能像之前单个文件自动转码成一个js文件一样，也将多个ts文件自动转码到一个js文件中呢？当然还是可以的，全自动化的转码需要基于模块来实现，这篇博客不会涉及，但是除了上面这种转码模式，Ts还有一种使用引入依赖文件的方式来实现，详细请看下一节内容解析。
<h2 style="background-color: rgba(41, 78, 128, 1); border-radius: 5px"> 三、多重命名空间与三斜杠指令引入依赖文件</h2>
 在解析引入依赖之前，这里补充以下多重命名空间。多重命名空间简单的说就是嵌套的命名空间，然后采用对象属性节点层次依赖的方式来实现。在前面的示例基础上来展示：
<div class="cnblogs_code">
<pre> 1 //a.ts
 2 namespace MyMath{
 3 export const PI = 3.14;
 4 export namespace MyMathA{ //使用多重命名空间
 5 export const strA = "This is namespace a.";
 6 }
 7 }
 8 //index.ts
 9 console.log(MyMath.PI);//在外部使用命名空间
10 console.log(MyMath.sumValue(2,3));
11 console.log(MyMath.MyMathA.strA);//引用多重命名空间的内容</pre>
</div>
然后在执行转码操作：
<div class="cnblogs_code">
<pre>tsc --outfile index.js a.ts b.ts index.ts</pre>
</div>
接着来看使用外部文件引用的方式如何实现多文件统一转码：
<div class="cnblogs_code">
<pre>1 //index.ts
2 ///<reference path="a.ts" />//引入外部文件
3 ///<reference path="b.ts" />//引入外部文件
4
5 console.log(MyMath.PI);//在外部使用命名空间
6 console.log(MyMath.sumValue(2,3));
7 console.log(MyMath.MyMathA.strA);//引用多重命名空间的内容</pre>
</div>
通过“///<reference path="..." />”引入外部文件，这种引入外部文件的操作甚至可以引入jQuery库，然后执行转码就相对比前面的转码方便一点点：
<div class="cnblogs_code">
<pre>tsc index.ts --outFile index.js</pre>
</div>
使用引入外部文件统一转码的方式要注意指令outFile（注意大写的F），然后引入的文件就不需要在执行转码指令的时候写到命令中了，而只需要直接对index.js这个入口文件执行转码操作即可。（不过引入外部文件或者执行outfile打包时最好依次按照依赖顺序书写，不按照顺序的方式我没有测试过，不知道会不会有影响，但是这里我们需要考虑js是单线程的执行模式，所以以防转码失败最好还是按照依赖顺序来写）。

</div>
<div id="MySignature" role="contentinfo">
——生命自会找到蓬勃之路。 
来源：https://www.cnblogs.com/ZheOneAndOnly/p/11780558.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript入门八：TypeScript的命名空间