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();

原文地址:https://www.cnblogs.com/strick/p/11770048.html

时间: 2024-08-29 09:54:11

TypeScript躬行记(7)——命名空间的相关文章

TypeScript躬行记(2)——接口

在传统的面向对象语言中,接口(Interface)好比协议,它会列出一系列的规则(即对行为进行抽象),再由类来实现这些规则.而TypeScript中的接口更加灵活,除了包含常规的作用之外,它还能扩展其它的类.为对象的类型命名以及约束值的结构等,大大消除了许多潜在的错误. 一.属性 TypeScript中的接口可通过声明属性和其类型来限制对象的结构.例如定义一个名为Person的接口,包含一个字符串类型的name属性和一个数字类型的age属性,如下所示. interface Person { na

TypeScript躬行记(3)——类

类是对对象的抽象,描述了对象的特征和行为,而对象就是类的实例.ES6引入了类的概念(相关内容可参考ES类和ES6类的继承两节),TypeScript在此基础上,不仅根据ES7等规范完善了类的语法,还添加了许多其它语法.而在使用TypeScript的类时,不必关心兼容性问题,因为这些工作已由编译器完成. 下面是一个简单的类,包含3个成员:带private修饰符的name属性.构造函数constructor()和getName()方法,最后一句使用new运算符创建了Person类的实例,并调用了一次

ES6躬行记(7)——代码模块化

在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了.模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装.按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程.但有一点要注意,模块中的代码默认运行在严格模式中. 一.导出 一个模块就是一个独立的JavaScript文件,如果要读取

CSS躬行记(2)——伪类和伪元素

一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素

React躬行记(5)——React和DOM

React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的react-dom库,从而让React能兼容更多的终端.在引入react-dom库后,就能调用一个全局对象:ReactDOM,虽然在之前的章节中已多次使用该对象,但是都没有给出过多的讲解,本节将对其做重点分析. ReactDOM只包含了unmountComponentAtNode().findDOMNod

Vue躬行记(3)——样式和表单

Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算属性.不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单. 一.CSS类 v-bind指令与class参数配合,就能处理CSS类,并且能接收多种类型的值. 1)对象 v-bind:class可以接收一个对象,对象的属性名就是CSS类名,只有当其值是真值时,才能添加到DOM元素上,否则会

React躬行记(16)——React源码分析

React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版本很接近. 一.目录结构 React采用了由Lerna维护monorepo方式进行代码管理,即用一个仓库管理多个模块(module)或包(package).在React仓库的根目录中,包含三个目录: (1)fixtures,给源码贡献者准备的测试用例. (2)packages,React库提供的包的

CSS躬行记(1)——CSS基础拾遗

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效

ES6躬行记(2)——扩展运算符和剩余参数

扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对象(iterable).虽然两者之间有诸多类似,但它们的功能和应用场景却完全不同.扩展运算符能把整体展开成个体,常用于函数调用.数组或字符串处理等:而剩余参数正好相反,把个体合并成整体,常用于函数声明.解构参数等.此处的整体可能是数组.字符串或类数组对象等,个体可能是字符.数组的元素或函数的参数等.