TypeScript躬行记(7)——命名空间

简介: TypeScript躬行记(7)——命名空间

TypeScript中的命名空间可将那些具有内在联系的接口、类或对象等代码组织在一起,既能隔离作用域,也能避免命名冲突,并且使得代码结构清晰,更易追踪。在命名空间内部,所有实体部分默认都是私有的,需要由export关键字导出之后,才能在外部访问,如下所示。

namespace Util {
  export function log(msg) {
    console.log(msg);
  }
}
Util.log("strick");

  TypeScript会将上面的命名空间编译成两部分:Util变量和即时函数,如下代码所示,这是一种常见的模块化封装。


var Util;
(function(Util) {
  function log(msg) {
    console.log(msg);
  }
  Util.log = log;
})(Util || (Util = {}));
Util.log("strick");


  注意,由于TypeScript 1.5为了与ES6的术语保持一致,已将内部模块改为命名空间,外部模块简称为模块,因此原先用于内部模块的module关键字和现在的namespace关键字在功能上是一样的。但是为了避免被ES6、CommonJS、UMD等模块概念中的相似名称所迷惑,官方推荐使用namespace。


一、分离


  当命名空间膨胀的过大时,为了便于维护,有必要将其分离到各个文件中。例如将命名空间分到三个文件中,第一个util.ts文件的代码如下。

namespace Util {
  export function log(msg) {
    console.log(msg);
  }
}

  第二个validator.ts文件的代码如下。

namespace Validator {
  export function isAcceptable(str) {
    return str.length > 1;
  }
}

  第三个default.ts文件的代码如下所示,其中三斜线指令用来通知编译器在编译时需要引入的外部文件,并且它必须声明在文件顶部。

/// <reference path="util.ts" />
/// <reference path="validator.ts" />
let str = "abc";
if(Validator.isAcceptable(str)) {
  Util.log("success");
}

  当需要处理多个包含命名空间的文件时,有两种方式可确保编译后的代码按正确顺序加载。第一种是在输入编译命令时添加--outFile参数,如下所示,其后会跟一个输出的脚本文件以及一个或多个要编译的文件。

tsc --outFile default.js default.ts

  第二种是将编译后的脚本通过HTML的<script>元素在页面中按正确的顺序引入,如下所示。

<script src="util.js"></script>
<script src="validator.js"></script>
<script src="default.js"></script>


二、别名


  命名空间支持嵌套,即在内部声明另一个命名空间,如下所示。

namespace Shape {
  export namespace Polygon {
    export class Triangle { }
    export class Square { }
  }
}

  当引用这类命名空间时,可以通过import关键字为其取一个短的别名,如下代码所示。注意,不要与加载模块的import语法相混淆,此处import的右侧必须包含命名空间。

import P = Shape.Polygon;
import Triangle = Shape.Polygon.Triangle;
let sq = new P.Square();
let triangle = new Triangle();
  通过编译后的代码可以发现,由

于import是var的语法糖(如下代码所示),因此改变P或Triangle变量的值不会影响命名空间的引用。

var P = Shape.Polygon;
var Triangle = Shape.Polygon.Triangle;
var sq = new P.Square();
var triangle = new Triangle();
相关文章
|
JavaScript 前端开发
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
|
JavaScript
TypeScript-声明安装和TypeScript-命名空间补充
TypeScript-声明安装和TypeScript-命名空间补充
52 0
|
存储 文件存储
TypeScript-命名空间
TypeScript-命名空间
50 0
|
6月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
126 0
|
JavaScript 前端开发
开心档之TypeScript 命名空间
开心档之TypeScript 命名空间
48 0
|
5月前
|
JavaScript 编译器
33.【TypeScript 教程】命名空间
33.【TypeScript 教程】命名空间
42 2
|
6月前
|
JavaScript 前端开发
TypeScript中使用命名空间组织代码:原理与实践
【4月更文挑战第23天】了解TypeScript的命名空间用于组织代码,防止命名冲突,提升可读性。通过`namespace`关键字定义,如`namespace MyNamespace {...}`。访问元素时需指明命名空间,如`MyNamespace.myFunction()`。可嵌套命名空间,但应避免过度使用导致复杂。考虑使用模块代替,保持命名空间简洁。命名空间是代码组织的有效工具,但需结合实际情况灵活选择。
|
JavaScript 前端开发
《现代Typescript高级教程》命名空间和模块
命名空间和模块 命名空间(Namespace) 在 TypeScript 中,命名空间是一种将代码封装在一个特定名称下的方式,以防止全局作用域污染并避免命名冲突。命名空间在 TypeScript 中非常重要,因为它们为模块化和封装提供了灵活的选项。 创建命名空间的语法如下:
110 0
|
6月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
57 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
6月前
|
JavaScript
TypeScript 命名空间是怎样的?
TypeScript 命名空间是怎样的?
119 1