那山、那水

从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 玉伯大神写的模块化加载框架，作为早期很流行的模块化加载工具，很多公司都有用。

个人学习心得，大神路过 ，不喜勿喷😊  ，如果代码错误，麻烦告诉我。如果你觉得不错，欢迎点赞，订阅，分享出去给需要的人，笔者将非常感谢，如果有疑问请留言或者私信

<完>

如果你是喜欢看书的朋友，不妨点击【有惊喜】这是我在亚马逊买的电子书，都非常珍贵。希望你能喜欢

作者：小处成就大事

简介：一个喜欢分享和学习的前端开发程序猿，平时喜欢看看书，游泳，爬山，户外骑行等，期待与志同道合的你成为朋友，一起交流、一起进步。

初衷：闲时喜欢写一些文章分享，记录丰富自己。可能没有别人写得好，但是我写的每一篇都非常用心和投入。真心希望来到这里对你有所收获，我将非常开心很欣慰。

博客：小处成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和学习，期待你的到来