TypeScript入门八:TypeScript的命名空间

shyoushine 2019-11-10

  • 初识命名空间(namespace指令)
  • 命名空间与文件拆分
  • 多重命名空间与三斜杠指令引入依赖文件

 一、初识命名空间(namespace指令)

TypeScript的命名空间可以说就是ES6的模块化,其编译的ES5代码都是基于闭包将局部变量暴露给外部,作为外部一个对象的属性提供给外部作用域使用。先来看一个最简单的示例:

namespace MyMath{ //使用namespace指令声明命名空间MyMath
    //使用export指令暴露到作用域外部
    export const PI = 3.14;
    export function sumValue(num1:number, num2:number){
        return num1 + num2;
    }
}
console.log(MyMath.PI);//在外部使用命名空间
console.log(MyMath.sumValue(2,3));

来看看上面命名空间ES5语法编译的代码:

var MyMath;
(function (MyMath) {
    //使用export指令暴露到作用域外部
    MyMath.PI = 3.14;
    function sumValue(num1, num2) {
        return num1 + num2;
    }
    MyMath.sumValue = sumValue;
})(MyMath || (MyMath = {}));
console.log(MyMath.PI); //在外部使用命名空间
console.log(MyMath.sumValue(2, 3));

 二、命名空间与文件拆分

前面我们已经知道TypeScript命名空间就是将闭包内部的变量,通过暴露到外部以对象引用的方式给外部使用,当一个页面基于多个Ts脚本文件时,能想到的第一个方法就是将各个Ts文件转换的js文件依次引入到页面就可以实现了。比如下面这个示例:

工作区间
    index.html
    index.ts
    index.js//IDE自动转换的脚本
    a.ts
    a.js//IDE自动转换的脚本
    b.ts
    b.js//IDE自动转换的脚本
    tsconfig.json

然后将第一节中的示例代码拆分到各个文件中:

//a.ts
namespace MyMath{ 
    export const PI = 3.14;
}
//b.ts
namespace MyMath{
    export function sumValue(num1:number, num2:number){
        return num1 + num2;
    }
}
//index.ts--在这里使用命名空间的内容
console.log(MyMath.PI);
console.log(MyMath.sumValue(2,3));

//index.html引入各个ts转换的js脚本
    <script src="./a.js"></script>
    <script src="./b.js"></script>
    <script src="./index.js"></script>

上面这种最暴力的方式显然不能成为我们最想要的,TS当然也给我们提供了一个解决方案,通过IDE将所有ts转码到一个js脚本中,通过命令行工具outfile来实现:

tsc --outfile index.js a.ts b.ts index.ts

通过outfile命令将a.ts、b.ts、index.ts就可以统一转码打包到一个index.js文件中,然后index.html就只需要引入一个index.js文件就可以了。

但是这时候可能你还是会觉得不够智能,你会想能不能像之前单个文件自动转码成一个js文件一样,也将多个ts文件自动转码到一个js文件中呢?当然还是可以的,全自动化的转码需要基于模块来实现,这篇博客不会涉及,但是除了上面这种转码模式,Ts还有一种使用引入依赖文件的方式来实现,详细请看下一节内容解析。

 三、多重命名空间与三斜杠指令引入依赖文件

 在解析引入依赖之前,这里补充以下多重命名空间。多重命名空间简单的说就是嵌套的命名空间,然后采用对象属性节点层次依赖的方式来实现。在前面的示例基础上来展示:

//a.ts
namespace MyMath{ 
    export const PI = 3.14;
    export namespace MyMathA{ //使用多重命名空间
        export const strA = "This is namespace a.";
    }
}
//index.ts
console.log(MyMath.PI);//在外部使用命名空间
console.log(MyMath.sumValue(2,3));
console.log(MyMath.MyMathA.strA);//引用多重命名空间的内容

然后在执行转码操作:

tsc --outfile index.js a.ts b.ts index.ts

接着来看使用外部文件引用的方式如何实现多文件统一转码:

//index.ts
///<reference path="a.ts" />  //引入外部文件
///<reference path="b.ts" />  //引入外部文件

console.log(MyMath.PI);//在外部使用命名空间
console.log(MyMath.sumValue(2,3));
console.log(MyMath.MyMathA.strA);//引用多重命名空间的内容

通过“///<reference path="..." />”引入外部文件,这种引入外部文件的操作甚至可以引入jQuery库,然后执行转码就相对比前面的转码方便一点点:

tsc index.ts --outFile index.js

使用引入外部文件统一转码的方式要注意指令outFile(注意大写的F),然后引入的文件就不需要在执行转码指令的时候写到命令中了,而只需要直接对index.js这个入口文件执行转码操作即可。(不过引入外部文件或者执行outfile打包时最好依次按照依赖顺序书写,不按照顺序的方式我没有测试过,不知道会不会有影响,但是这里我们需要考虑js是单线程的执行模式,所以以防转码失败最好还是按照依赖顺序来写)。

相关推荐