TypeScript学习笔记(六) - 模块

本篇将介绍TypeScript里的模块,和使用方法。

在ECMAScript 2015标准里,JavaScript新增了模块的概念。TypeScript也沿用了这个概念。

一、模块的导入和导出

模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export之一导出它们。 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import之一。

模块是自声明的。在TypeScript里,两个模块之间的关系是通过在文件级别上使用import和export建立的。下面是一个基本例子:

animal.ts

1 export class Animal {
2     name: string;
3     show(): string {
4         return this.name;
5     }
6 }

app.ts

1 import {Animal} from ‘./animal‘;
2 let dog = new Animal();
3 dog.name = ‘狗狗‘;
4 dog.show();

上面的例子里,在animal.ts里声明了一个类Animal,通过export导出。在app.ts里,指定相对文件路径,通过import导入,就可以使用Animal类。

因为JavaScript存在两种不同的模块引用方式,在编译成JavaScript时,可以通过TypeScript配置文件tsconfig.json指定编译之后的模块引用方式

 1 {
 2     "compilerOptions": {
 3         "target": "es5",
 4         "noImplicitAny": false,
 5         "module": "commonjs",       // 模块引用方式。候选值有:commonjs、amd等
 6         "removeComments": false,
 7         "sourceMap": false,
 8         "outDir": "js"
 9     },
10     "include":[
11         "ts"
12     ],
13     "exclude": [
14         "js"
15     ]
16 }

下面分别是使用不同的方式编译后的JavaScript文件内容

commonjs

 1 "use strict";
 2 var Animal = (function () {
 3     function Animal() {
 4     }
 5     Animal.prototype.show = function () {
 6         return this.name;
 7     };
 8     return Animal;
 9 }());
10 exports.Animal = Animal;

animal.js

1 ‘use strict‘;
2 var animal_1 = require(‘./animal‘);
3 var dog = new animal_1.Animal();
4 dog.name = ‘狗狗‘;
5 dog.show();

app.js

amd

 1 define(["require", "exports"], function (require, exports) {
 2     "use strict";
 3     var Animal = (function () {
 4         function Animal() {
 5         }
 6         Animal.prototype.show = function () {
 7             return this.name;
 8         };
 9         return Animal;
10     }());
11     exports.Animal = Animal;
12 });

animal.js

1 define(["require", "exports", ‘./animal‘], function (require, exports, animal_1) {
2     ‘use strict‘;
3     var dog = new animal_1.Animal();
4     dog.name = ‘狗狗‘;
5     dog.show();
6 });

app.js

二、导入和导出的重命名

模块导入和导出时默认使用的内部对象的名称。TypeScript也支持在导出前和导入后进行重命名。将上面的例子修改一下

animal.ts

1 class Animal {
2     name: string;
3     show(): string {
4         return this.name;
5     }
6 }
7
8 export {Animal as ANI};

app.ts

1 import {ANI as Animal} from ‘./animal‘;
2 let dog = new Animal();
3 dog.name = ‘狗狗‘;
4 dog.show();

导入和导出时,通过as关键字对模块进行重命名。

这个地方有一点要注意,当导出的模块重命名后,导入时重命名前的模块名要与导出重命名后的模块名保持一致,否则编译器将提示错误信息。以上面的这个例子为例,导出的模块被重命名为ANI,将此模块在另外一个文件app.ts里导入时,as关键字前面的模块名必须是ANI。

或者,如果不知道导入模块的名称,则可以用*号代替

1 import * as animal_module from ‘./animal‘;
2 let dog = new animal_module.ANI();
3 dog.name = ‘狗狗‘;
4 dog.show();

上面的例子里,对*号代替的所有模块进行重命名为animal_module,则通过animal_module对象可以访问到模块里导出的所有内容。

三、导出和导出多个对象

通常情况,模块里会定义多个类型对象,然后一并导出。而导入的模块里也可能会有多个

animal.ts

 1 enum HairColor {
 2     Golden,
 3     Black,
 4     White
 5 }
 6
 7 class Animal {
 8     name: string;
 9     color: HairColor;
10     show(): string {
11         return this.name;
12     }
13 }
14
15 export {Animal, HairColor};

app.ts

1 import * as animal_module from ‘./animal‘;
2 let dog = new animal_module.Animal();
3 dog.name = ‘狗狗‘;
4 dog.color = animal_module.HairColor.Golden;
5 dog.show();

导出时,可以将要导出的类型对象重新组装成一个json对象,然后导出。导入后,可以通过重命名的模块对象访问里面的内容。

四、默认导出

一个模块的默认导出只能有一个

animal.ts

1 class Animal {
2     name: string;
3     show(): string {
4         return this.name;
5     }
6 }
7
8 export default Animal;

app.ts

1 import Animal from ‘./animal‘;
2 let dog = new Animal();
3 dog.name = ‘狗狗‘;
4 dog.show();

在上面的例子里,通过default关键字,将Animal类导出。与一般的导入不同的是,导入默认的导出模块时,可以直接指定导入的模块名称,而不需要用{}花括号括起来。

五、动态加载模块

因为在JavaScript里,模块加载方式分别有两种:CommonJS和AMD。在用TypeScript时,要根据最终编译生成JavaScript的方式的配置内容不同,编写不同的代码。

模块文件animal.ts

1 class Animal {
2     name: string;
3     show(): string {
4         return this.name;
5     }
6 }
7
8 export {Animal};

CommonJS方式引用:

app.ts

 1 // 定义加载方法
 2 declare function require(moduleName: string): any;
 3
 4 import {Animal} from ‘./animal‘;
 5
 6 if (true) {
 7     let Animal_Type: typeof Animal = require(‘./animal‘);
 8     let dog = new Animal_Type();
 9     dog.name = ‘狗狗‘;
10     dog.show();
11 }

AMD方式引用:

app.ts

 1 // 定义加载方法
 2 declare function require(moduleNames: string[], onLoad: (...args: any[]) => void): void;
 3
 4 import {Animal} from ‘./animal‘;
 5
 6 if (true) {
 7     require(["./animal"], (Animal_Type: typeof Animal) => {
 8         let dog = new Animal_Type();
 9         dog.name = ‘狗狗‘;
10         dog.show();
11     });
12 }
时间: 2024-10-10 00:46:04

TypeScript学习笔记(六) - 模块的相关文章

python之raw_input()(学习笔记六)

python之raw_input()(学习笔记六) 我们经常使用raw_input()读取用户的输入,如下例子所示: >>> name = raw_input('please input your name:'),截图如下: 下面简单说下,raw_input()与if搭配使用,脚本如下: #!/usr/bin/env python # -*- coding:utf-8 -*- birth = raw_input('birth:') if birth < 2000: print '0

swift学习笔记(六)析构过程和使用闭包对属性进行默认值赋值

一.通过闭包和函数实现属性的默认值 当某个存储属性的默认值需要定制时,可以通过闭包或全局函数来为其提供定制的默认值. 注:全局函数结构体和枚举使用关键字static标注    函数则使用class关键字标注 当对一个属性使用闭包函数进行赋值时,每当此属性所述的类型被创建实例时,对应的闭包或函数会被调用,而他们的返回值会被作为属性的默认值. ESC: Class SomeCLass{ let someProperty:SomeType={ //给someProperty赋一个默认值 //返回一个与

java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessController的checkPerssiom方法,访问控制器AccessController的栈检查机制又遍历整个 PerssiomCollection来判断具体拥有什么权限一旦发现栈中一个权限不允许的时候抛出异常否则简单的返回,这个过程实际上比我的描述要复杂 得多,这里我只是简单的一句带过,因为这

初探swift语言的学习笔记六(ARC-自动引用计数,内存管理)

Swift使用自动引用计数(ARC)来管理应用程序的内存使用.这表示内存管理已经是Swift的一部分,在大多数情况下,你并不需要考虑内存的管理.当实例并不再被需要时,ARC会自动释放这些实例所使用的内存. 另外需要注意的: 引用计数仅仅作用于类实例上.结构和枚举是值类型,而非引用类型,所以不能被引用存储和传递. swift的ARC工作过程 每当创建一个类的实例,ARC分配一个内存块来存储这个实例的信息,包含了类型信息和实例的属性值信息. 另外当实例不再被使用时,ARC会释放实例所占用的内存,这些

Linux System Programming 学习笔记(六) 进程调度

1. 进程调度 the process scheduler is the component of a kernel that selects which process to run next. 进程调度器需要使 处理器使用率最大化,并且提供 使多个进程并发执行的虚拟 Deciding which processes run, when, and for how long is the process scheduler's fundamental responsibility. 时间片:th

Lua学习笔记(六):函数-续

Lua中的函数是带有词法定界(lexical scoping)的第一类值(first-class values).第一类值指:在Lua中函数和其他值(数值.字符串)一样,函数可以被存放在变量中,也可以存放在表中,可以作为函数的参数,还可以作为函数的返回值.词法定界指:嵌套的函数可以访问他外部函数中的变量.这一特性给Lua提供了强大的编程能力. Lua中关于函数稍微难以理解的是函数也可以没有名字,匿名的.当我们提到函数名(比如print),实际上是说一个指向函数的变量,像持有其他类型的变量一样:

laravel3学习笔记(六)

原作者博客:ieqi.net ==================================================================================================== ORM Laravel3中MVC体系中Model里最重要的组成部分无疑是ORM了,ORM — object-relational mapper — 将数据操作面向对象化,使得整个web框架的核心风格统一,降低整体复杂度,为开发者提供便利. Laravel3中的ORM叫

TypeScript学习笔记(七):模块

JavaScript中的模块 在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的. 模块的好处 首先我们要了解使用模块的好处都有什么? 模块化.可重用: 封装变量与函数: 下面的示例为使用JavaScript实现的模块: 1 var MyModule = function(name) 2 { 3 //这里定义的都是私有的成员 4 var myName = name; 5 var age = 25; 6 7 //这里返回一个对象, 使用 JS 的闭包实现类的效

Python学习笔记—itertools模块

这篇是看wklken的<Python进阶-Itertools模块小结> 学习itertools模块的学习笔记 在看itertools中各函数的源代码时,刚开始还比较轻松,但后面看起来就比较费劲... 1.itertools.count(start=0,step=1) 此函数用来创建一个迭代器,生成从n开始的连续整数,如果忽略n,则从0开始计算 如果超出了sys.maxint,计数器将溢出并继续行-sys.maxint-1开始计算 定义: def count(start=0, step=1):

IBatis.Net学习笔记六--再谈查询

在IBatis.Net学习笔记五--常用的查询方式 中我提到了一些IBatis.Net中的查询,特别是配置文件的写法. 后来通过大家的讨论,特别是Anders Cui 的提醒,又发现了其他的多表查询的方式.在上一篇文章中我提到了三种方式,都是各有利弊:第一种方式当数据关联很多的情况下,实体类会很复杂:第二种方式比较灵活,但是不太符合OO的思想(不过,可以适当使用):第三种方式最主要的问题就是性能不太理想,配置比较麻烦. 下面是第四种多表查询的方式,相对第二种多了一点配置,但是其他方面都很好(当然