从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 玉伯大神写的模块化加载框架,作为早期很流行的模块化加载工具,很多公司都有用。
个人学习心得,大神路过 ,不喜勿喷
有问题加我个人微信提问或者留言