0
点赞
收藏
分享

微信扫一扫

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


举报

相关推荐

0 条评论