Typescript的模块

文章目录

• ​​模块导出​​
• ​​模块导入​​
• ​​重命名模块导入和导出​​
• ​​动态导入​​
• ​​module编译选项​​

这里只介绍关于的ECMAScript模块。

模块是通过import语句来声明对其他模块的依赖，同时通过export语句将模块内的声明公开给其他模块使用。

模块是以文件为单位的，一个模块对应一个文件。若一个TypeScript文件中带有顶层的import或export语句，那么该文件就是一个模块，术语为“Module”。

模块导出

1. 命名模块导出，比如：​​export var a = 0;​​
2. 默认模块导出，比如：​​export default function f(){}​​

模块导入

需要使用import语句来导入对应的模块，其中也是分为导入命名模块和导入整个模块，

导入命名模块：​​ import { a, b, c } from 'mod';​​​ 导入整个模块：​​import * as ns from 'mod';​​ 导入默认模块：​​import modDefault from 'mod';​​

空导入，就是执行模块内的代码，比如有一个模块代码：

console.log("空导入");

在另一个文件中导入该模块：

import "./utils"

当执行这个文件的时候，同时也会执行所导入的模块。

重命名模块导入和导出

为了解决模块导出和导出的命名冲突的问题，ECMAScript模块允许重命名模块的导入和导出声明。重命名模块导入和导出通过as关键字来定义，语法：​​export { oldName as newName };​​。

动态导入

动态模块导出是在一定条件下按需加载模块的，这时需要使用import()函数来完成动态导入。

import函数接收一个模块路径作为参数，并且返回的promise对象，比如：

export function add(x: number, y:) {
    return x + y;
}

setTimeout(() => {
    import("./utils")
        .then(res => {
            console.log(res.add(1, 2))
        })
        .catch(err => {
            console.log(err)
        })
}, 1000)

module编译选项

module编译选项是用来设置编译生成的JavaScript代码使用模块格式。

module编译选项可选值：

1. None，非代码模块
2. CommonJS
3. AMD
4. System
5. UMD
6. ES6
7. ES2015
8. ES2020
9. ESNext