这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

接上一篇：TypeScript实例讲解（二十四）

本篇内容：模块。
复制代码

TypeScript 沿用了 ES6 模块的概念。模块在其自身的作用域里执行，定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非我们明确地使用 export 等形式导出它们。然后使用 import 等形式导入使用。

导出声明

模块里的任何声明都能够通过 export 关键字来导出。

// 例 1
export const baseURL= 'https://www.xxx.com/';
复制代码

导出一个变量

// 例 2
export class Mask {
    ...
}
复制代码

导出一个类

// 例 3
export function fn(a, b) {
    return a + b;
}
复制代码

导出一个函数

// 例 4
export interface User {
    name: string
    age: number
}
复制代码

导出一个接口

导入模块内容

// 例 5
import { baseURL } from './test16'
console.log(baseURL);
复制代码

使用 import 关键字导入其它模块中的导出内容。例5导入了一个 baseURL 变量。

重命名

使用 as 关键字对导出的内容进行重命名，如下：

// 例 6
const baseURL= 'https://www.xxx.com/';
export {
     baseURL as url
}
复制代码

同样也可以使用 as 关键字对导入的内容进行重命名，如下：

// 例 7
import { baseURL as url } from './test16'
console.log(url);
复制代码

默认导出

模块中用 default 关键字标记的内容表示默认导出。注意：一个模块只能有一个 default 导出。

例 8
export default function fn(a, b) {
    return a + b;
}
复制代码

注意：默认导出的类或函数的名称可以省略。

默认导出也可以是一个值，如下：

// 例 9
export default "https://www.xxx.com/";
复制代码

模块与命名空间

通过 namespace 命名空间这种方式来做代码的组织有一个明显的问题，无法快速知道变量来自哪里。

这里我们采用模块这种代码组织的方式重写 TypeScript实例讲解（十）中的例子。

// 例 10
// component.ts

export class Mask {
    // todo
}
export class Content {
    // todo
}

// demo.ts
import { Mask, Content} from './component'

export class Create {
    constructor() {
        new Mask();
        new Content();
    }
}
复制代码

这里使用 import 对模块进行拆分和组合。
这时候打包后会默认变成 ADM 规范的代码，由于 ADM 规范的代码无法直接在浏览器上运行，需要额外引入 require.js 库来支持，或者使用 webpack 等模块打包器。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。