发布：2023/12/7 15:53:14作者：大数据 来源：大数据 浏览次数：547
TypeScript学习——模块的export与import
假如有一个B.js，想要通过import语法引用模块A.js，那么可以这么写：
// B.jsimport A from'./A'
而上面的代码生效的前提是，只有在如下A.js中有默认导出的export default语法时才会生效。也就是：
// A.jsexportdefault42
在这种不使用{}来引用模块的情况下，import模块时的命名是随意的，即如下三种引用命名都是正确的：
// B.jsimport A from'./A'importMyAfrom'./A'importSomethingfrom'./A'
因为它总是会解析到A.js中默认的export default。
而下面是使用了花括号命名的方式{A}来导入A.js：
import{ A }from'./A'
上面代码生效的前提是，只有在模块A.js中有如下命名导出为A的export name的代码，也就是：
exportconst A =42
而且，在明确声明了命名导出后，那么在另一个js中使用{}引用模块时，import时的模块命名是有意义的，如下：
// B.jsimport{ A }from'./A'// 正确，因为A.js中有命名为A的exportimport{ myA }from'./A'// 错误！因为A.js中没有命名为myA的exportimport{Something}from'./A'// 错误！因为A.js中没有命名为Something的export
要想上述代码正确执行，你需要明确声明每一个命名导出：
// A.jsexportconst A =42exportconst myA =43exportconstSomething=44
ps: 一个模块中只能有一个默认导出export default，但是却可以有任意命名导出（0个、1个、多个），你也可以如下，一次性将他们导入：
// B.jsimport A,{ myA,Something}from'./A'
这里我们使用导入默认导出A，以及命名导出myA和Something。
我们甚至可以在导入的时候重命名导入：
import X,{ myA as myX,SomethingasXSomething}from'./A'
总结：模块的默认导出通常是用在你期望该从模块中获取到任何想要的内容；而命名导出则是用于一些有用的公共方法，但是这些方法并不总是必要的。
（一句话总结上面的用法：是默认导出（就是在defaut{}里面的），就要不加{}，其他就需要加{}）
ES6的模块化分为导出（export） @与导入（import）两个模块。
一、特点
1.ES6的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
2.模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
3.每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
4.每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
二、export与import
基本用法：模块导入导出各种类型的变量，如字符串，数值，函数，类。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/*-----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导出的接口名称，须和模块内部的变量有一一对应关系。
|
1 2 3 4 5 |
let aaaa = "aaaa"; export { aaaa } let myName = "bbbb"; export { myName1 } //error 未找到myName1 |
2.import导入的变量名，须和导出的接口名称相同，但顺序可以不一致。
|
1 2 3 4 5 6 7 8 9 10 |
/*-----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关键字, 可以进行重命名
|
1 2 3 4 5 6 7 |
/*-----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 向外暴露的成员，可以使用任意变量来接收。
|
1 2 3 4 5 6 |
var a = "aaaa"; export default a; //仅有一个 export default var c = "error"; //error，default 已经是对应的导出变量，不能跟着变量声明语句 import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收 |
————————————————
版权声明：本文为CSDN博主「预立科技」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_16998945/article/details/101534031
