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