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 > ;
}
}
第三个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();
TypeScript躬行记(7)——命名空间的更多相关文章
- TypeScript躬行记(8)——装饰器
装饰器(Decorator)可声明在类及其成员(例如属性.方法等)之上,为它们提供一种标注,用于分离复杂逻辑或附加额外逻辑,其语法形式为@expression.expression是一个会在运行时被调 ...
- TypeScript躬行记(1)——数据类型
TypeScript不仅支持JavaScript所包含的数据类型,还额外扩展了许多实用的数据类型,例如枚举.空值.任意值等. 一.JavaScript的数据类型 JavaScript的数据类型包括6种 ...
- TypeScript躬行记(2)——接口
在传统的面向对象语言中,接口(Interface)好比协议,它会列出一系列的规则(即对行为进行抽象),再由类来实现这些规则.而TypeScript中的接口更加灵活,除了包含常规的作用之外,它还能扩展其 ...
- TypeScript躬行记(3)——类
类是对对象的抽象,描述了对象的特征和行为,而对象就是类的实例.ES6引入了类的概念(相关内容可参考ES类和ES6类的继承两节),TypeScript在此基础上,不仅根据ES7等规范完善了类的语法,还添 ...
- TypeScript躬行记(5)——类型兼容性
TypeScript是一种基于结构类型的语言,可根据其成员来描述类型.以结构相同的Person接口和Programmer类为例,如下所示. interface Person { name: strin ...
- TypeScript躬行记(6)——高级类型
本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...
- TypeScript躬行记(4)——泛型
泛型是程序设计语言中的一种风格或范式,相当于类型模板,允许在声明类.接口或函数等成员时忽略类型,而在未来使用时再指定类型,其主要目的是为它们提供有意义的约束,提升代码的可重用性. 一.泛型参数 当一个 ...
- ES6躬行记(1)——let和const
古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查 ...
- ES6躬行记 笔记
ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向
随机推荐
- @codeforces - 444A@ DZY Loves Physics
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 边的图,边有边权,点有点权. 找到一个连通 ...
- 2019-8-31-C#-将-Begin-和-End-异步方法转-task-异步
title author date CreateTime categories C# 将 Begin 和 End 异步方法转 task 异步 lindexi 2019-08-31 16:55:58 + ...
- Java练习 SDUT-3422_小金问呀问不会问题
小金问呀问不会问题 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 众所周知,C语言的学习是我们程序设计基础的重点和主要 ...
- Android 整合实现简单易用、功能强大的RecyclerView
之前总是会有人在一些开发群里问,有木有比较好使且功能强大些的RecyclerVew,比如支持下来刷新,加载更多等,还有人在问,如何为RecyclerView添加分割线,尤其是如何为网格布局添加分割线? ...
- 实验4 JavaBean创建和使用(计算器)
实验4 JavaBean创建和使用 一.实验目的 1.掌握JavaBean创建和使用方法: 2.领会JavaBean简化页面设计的优势等. 二.实验内容 1.设计诸如以下页面的简单计算器 要求:完成 ...
- Remove Extra One 权值线段树
最近疯狂练习线段树... 这道题题意很简单,在1-n中,找寻一个数,使得去掉这个数后,对于每个位置中满足 1<=j<i && a[ j ]<a[ i ] 的位置尽可能 ...
- Python--day62--什么时候用GET请求和POST请求
1,GET请求和POST请求 都数据HTTP协议规定的请求方法 2,什么时候用GET请求? 1,浏览器想要得到一个HTML页面的时候 2,搜索引擎查询关键字的时候 3,什么时候用POST? 1,像后端 ...
- mysql 第二课 DML操作
DML 数据操纵语句:INSERT UPDATE DELETE SELECT 主要用来对数据库的数据进行一些操作; DCL 数据定义语句:CREATE ALTER DROP 主要是用在定义或改变表的 ...
- Vue 动画的钩子函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 页面分享
首先说分享到QQ空间的通用代码:<a href="javascript:void(0);" onclick="window.open('http://sns.qzo ...