TypeScript学习——模块的export与import
ES6引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6的模块化分为导出(export) @与导入(import)两个模块。
一、特点
1.ES6的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。
2.模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
3.每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
4.每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。
二、export与import
基本用法:模块导入导出各种类型的变量,如字符串,数值,函数,类。
/*-----export [test.js]-----*/
//字符串
let str = "aaaaa";
//字符串
let count = 20; //数值
//函数
let myfn = function(){
return "aaaaaaaaaaaa"
}
//类
let myTest = class test {
static a = "aaaaaaaa";
}
//导出
//1.导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。
//export 命令可以出现在模块的任何位置,但必需处于模块顶层(代码块的最外层)。
export { str, count, myfn, myTest }
/*-----import [xxx.js]-----*/
//import 命令会提升到整个模块的头部,首先执行。
//from "./test.js" 指文件目录
import { str, count, myfn, myTest } from "./test.js";
console.log(myfn()); //aaaaaaaaaaaa
console.log(str); //aaaaa
console.log(count); //20
console.log(myTest.a );//aaaaaaaa
三、export与import重命名,as 关键字
1.export导出的接口名称,须和模块内部的变量有一一对应关系。
let aaaa = "aaaa";
export { aaaa }
let myName = "bbbb";
export { myName1 } //error 未找到myName1
2.import导入的变量名,须和导出的接口名称相同,但顺序可以不一致。
/*-----export [test.js]-----*/
let a = "aaaa";
let b = "bbbb";
export { a,b}
/*-----import [xxx.js]-----*/
import { b, a} from "./test.js";
console.log(a);//aaaa
console.log(b);//bbbb
3.使用as关键字, 可以进行重命名
/*-----export [test1.js]-----*/
let a = "aaaa";
export { a as b }
/*-----import [xxx.js]-----*/
import { b as c } from "./test1.js";
console.log(c); //aaaa
四、export default 命令
1.在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
2.export default 中的 default 是对应的导出接口变量。
3.通过 export 方式导出,在导入时要加{ },export default 则不需要。
4.export default 向外暴露的成员,可以使用任意变量来接收。
var a = "aaaa";
export default a; //仅有一个
export default var c = "error";
//error,default 已经是对应的导出变量,不能跟着变量声明语句
import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收