通俗易懂TypeScript系列六：模块

从ECMAScript 2015开始，JavaScript引入了模块的概念。
TypeScript也沿用这个概念。模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你使用export导出它们。 相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你可以通过import导入它们

1、export导出

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出。

(1).导出声明

//导出一个类，里面声明了两个方法

export class animai{

   eat(nam:string):void;

   sleep(nam:string):void;

}

//导出一个变量声明

export comst name=”小明”;

(2).导出语句

//导出一个类

export class animal {

   sleep(nam:string){

   console.log(name,’在睡觉’);

   }

}

(3).重新导出

如果要对已有的模块做修改或者拓展，可以对模块进行再次包装再重新导出。看下面代码例
1：对模块进行重命名

//car.ts文件
export class car {

   drive() {

   console.log('正在开车');

}

}

//newCar.ts 文件 export { car as newCar }  from  ‘./car.ts’

导出car 并且进行重命名newCar

例2：导出多个模块

//dog.ts文件
export class dog {

   say() {

    console.log('小狗叫汪汪···');

}

}

//cat.ts文件
export class cat {

    say() {

    console.log('小猫喵喵叫····');

}

}

//animal.ts文件
export  * from './dog';
export  * from './cat';

这里把dog类和cat类放到animal类中，以一个新的模块导出。

在需要的地方导入: import {cat,dog} from ‘./animal’

(4).默认导出

每个模块有一个默认导出，且只有一个默认导出，用default标识

export default class car {

   drive() {

   console.log('老司机开车····');

  }

}

import newCar from  './car';

在需要的地方导入import newCar from ‘./car’;

导入的时候newCar名称是可以随意命名，只要符合语法规范

再看看导出一个变量

export default 'hello world'; //导出hello world

//导入
import a from  './hello';

console.log(a);//打印输出： hello world

再看看一段代码，导出jquery

let $: JQuery;
export default $; //导出$

//导入
import $ from "JQuery";

//现在可以使用$符合操作dom了 $('id').html('hello world');

2、import导入

如果想使用外部的模块，可以使用import导入
1.导入一个模块

import car from  './car';

let newCar = new car();

2.别名导入

import { car as newCar}  from  './car';  //这里给car重命名为newCar

附属： webpack、Require.js、sea.js也有模块的实现，有需要的可以了解下sea.js 玉伯大神写的模块化加载框架，作为早期很流行的模块化加载工具，很多公司都有用。

个人学习心得，大神路过 ，不喜勿喷
有问题加我个人微信提问或者留言