TypeScript学习——模块的export与import

Bertha 。 2023-08-17 15:53 106阅读 0赞

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"; // 不需要加{}， 使用任意变量接收

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: /images/20230810/a09592af5be44c2fafa60182aa27814b.png