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

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

一、模块的导入和导出

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

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

animal.ts

 export class Animal {
name: string;
show(): string {
return this.name;
}
}

app.ts

 import {Animal} from './animal';
let dog = new Animal();
dog.name = '狗狗';
dog.show();

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

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

 {
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "commonjs", // 模块引用方式。候选值有:commonjs、amd等
"removeComments": false,
"sourceMap": false,
"outDir": "js"
},
"include":[
"ts"
],
"exclude": [
"js"
]
}

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

commonjs

 "use strict";
var Animal = (function () {
function Animal() {
}
Animal.prototype.show = function () {
return this.name;
};
return Animal;
}());
exports.Animal = Animal;

animal.js

 'use strict';
var animal_1 = require('./animal');
var dog = new animal_1.Animal();
dog.name = '狗狗';
dog.show();

app.js

amd

 define(["require", "exports"], function (require, exports) {
"use strict";
var Animal = (function () {
function Animal() {
}
Animal.prototype.show = function () {
return this.name;
};
return Animal;
}());
exports.Animal = Animal;
});

animal.js

 define(["require", "exports", './animal'], function (require, exports, animal_1) {
'use strict';
var dog = new animal_1.Animal();
dog.name = '狗狗';
dog.show();
});

app.js

二、导入和导出的重命名

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

animal.ts

 class Animal {
name: string;
show(): string {
return this.name;
}
} export {Animal as ANI};

app.ts

 import {ANI as Animal} from './animal';
let dog = new Animal();
dog.name = '狗狗';
dog.show();

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

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

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

 import * as animal_module from './animal';
let dog = new animal_module.ANI();
dog.name = '狗狗';
dog.show();

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

三、导出和导出多个对象

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

animal.ts

 enum HairColor {
Golden,
Black,
White
} class Animal {
name: string;
color: HairColor;
show(): string {
return this.name;
}
} export {Animal, HairColor};

app.ts

 import * as animal_module from './animal';
let dog = new animal_module.Animal();
dog.name = '狗狗';
dog.color = animal_module.HairColor.Golden;
dog.show();

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

四、默认导出

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

animal.ts

 class Animal {
name: string;
show(): string {
return this.name;
}
} export default Animal;

app.ts

 import Animal from './animal';
let dog = new Animal();
dog.name = '狗狗';
dog.show();

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

五、动态加载模块

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

模块文件animal.ts

 class Animal {
name: string;
show(): string {
return this.name;
}
} export {Animal};

CommonJS方式引用:

app.ts

 // 定义加载方法
declare function require(moduleName: string): any; import {Animal} from './animal'; if (true) {
let Animal_Type: typeof Animal = require('./animal');
let dog = new Animal_Type();
dog.name = '狗狗';
dog.show();
}

AMD方式引用:

app.ts

 // 定义加载方法
declare function require(moduleNames: string[], onLoad: (...args: any[]) => void): void; import {Animal} from './animal'; if (true) {
require(["./animal"], (Animal_Type: typeof Animal) => {
let dog = new Animal_Type();
dog.name = '狗狗';
dog.show();
});
}

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

  1. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  2. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  8. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

  9. python3.4学习笔记(六) 常用快捷键使用技巧,持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

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

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

随机推荐

  1. RESTful源码学习笔记之RPC和 RESTful 什么区别

    REST,即Representational State Transfer的缩写.翻译过来是表现层状态转换.如果一个架构符合REST原则,就称它为RESTful架构.啥叫json-rpc?接口调用通常 ...

  2. 用 Python 和 OpenCV 检测图片上的条形码(转载)

    原文地址:http://python.jobbole.com/80448/ 假设我们要检测下图中的条形码: # load the image and convert it to grayscale 1 ...

  3. 20145325张梓靖 《Java程序设计》第9周学习总结

    20145325张梓靖 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC Java语言访问数据库的一种规范,是一套API.JDBC (Java Database Connec ...

  4. bzoj 2226 LCMSum 欧拉函数

    2226: [Spoj 5971] LCMSum Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 1123  Solved: 492[Submit][S ...

  5. 【Docker】数据库动态授权组件在Kubernetes集群下的测试过程记录

    背景 我们都知道出于安全性考虑,生产环境的权限一般都是要做最小化控制,尤其是数据库的操作授权,更是重中之重. 博主所在公司使用的是Kubernetes(k8s)进行的集群容器管理,因为容器发布时的IP ...

  6. linux下运行jar

    方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二: java -jar XXX.jar ...

  7. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  8. WEB前端性能优化常见方法

    1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/arti ...

  9. 使用Jenkins来实现内部的持续集成流程(上)

    前言 Jenkins和TeamCity都是大杀器,用于搭建内部持续集成环境都是妥妥的.本篇主要介绍Jenkins的安装,下篇将介绍相关配置和使用. 目录 安装和配置 第一次启动 插件安装,第一次进入时 ...

  10. python 字符串、列表、字典相关内建方法

    """字符串相关内建方法""" # a = ["qwe", "name", "sex&qu ...