TypeScript 的模块和命名空间

模块
●前言 :
JavaScript 在 ES2015 中引入了模块的概念, 我们的 JS 也开始进行了标准的模块化开发阶段, 在 TS 内沿用了这个概念
在 TS 中, 从语法到概念, 其实和 JavaScript 中基本一致的

●因为我们主要是学习 TS, 在这里对模块的语法和概念做一个简单的复习
导出
●在一个文件中, 所有的声明都可以利用 export 关键字进行导出
●其实就是向外暴露该内容, 被其他模块使用

基础导出

●moduleA.ts
// 导出一个变量
export const num = 100
export const str = 'hello world'
export const reg = /^千锋教育$/

// 导出一个函数
export function fn() {}

// 导出一个类
export class Student {}
export class Person extends People {}

// 导出一个接口
export interface Users {}

重新导出
●有的时候我们可能会在某一个文件内导入一段内容, 然后再次进行导出
●modeuB.ts

export * from './moduleA'

○在这个 moduleB 文件中导入了 moduleA 文件的所有内容
○并且在 moduleB 中也进行了一次导出
●可能很多小伙伴就要问了, 这个有什么意义吗 ?
○其实是可以做一些模块合并的
●举个例子
○moduleA.ts

export const num = 100

○moduleB.ts

export const str = 'hello world'

○moduleC.ts

export interface Users {}

○moduleIndex.ts

export * from './moduleA'
export * from './moduleB'
export * from './moduleC'

○这样一来, 就相当于用 moduleIndex 文件对前面三个模块进行可一个整合导出

导出重命名
●有的时候, 我们在重新导出的时候, 有可能会遇到一些多个模块的重名问题
●或者说会遇到多个模块因为不是一个人书写的, 导致模块命名风格不统一
●我们在书写的时候, 就可以在导出的时候做一个重命名
●语法

export { num as current } from './moduleA'

○相当于在这个文件中导入了 moduleA 模块中的 num 数据
○并且进行了再次导出
○只不过进行再次导出的时候, 用的名字是 current 而已
●举个例子
○moduleA.ts

export const n = 100

○moduleB.ts

export const s = 'hello world'

○moduleC.ts

export interface Aaa {}

○moduleIndex.ts

export { n as num } from './moduleA'
export { s as str } from './moduleB'
export { Aaa as Users } from './moduleC'

○这样一来, 就相当于用 moduleIndex 文件对前面三个模块进行可一个整合导出
○并且对以上三个模块导出的内容进行了重命名
○等价于

// 伪代码, 仅仅为了直观看一下上面代码的效果
export const num = 100 // moduleA 中导出的 n
export const str = 'hello world' // moduleB 中导出的 s
export interface Users {} // moduleC 中导出的 Aaa

导入
●和上面导出是配套出现的

基础导入
●直接导出某一个模块的某个或者某些内容
●moduleA.ts => 进行导出

export function study () {}
export function play () {}
export function sleep () {}

●index.ts => 进行导入

import { study, play } from './moduleA'

导入重命名
●导入的时候, 有的时候, 我们可能不想用原先文件内导出的名字
●不管是因为命名冲突问题还是嫌原先的名字太长, 都有可能
●那么我们就可以进行重命名的操作了
●moduleA.ts => 进行导出

export function study () {}
export function play () {}
export function sleep () {}

●index.ts => 进行导入

import { study as s } from './moduleA'

○相当于在 moduleA 内导出了一个 study 方法
○但是在 index 文件内使用的时候, 使用 s 这个函数名

默认导出
●每个模块都会有一个默认导出, 使用 default 来进行
●需要注意 : 一个模块只能有一个默认导出
●moduleA.ts

const utils = {
    study () {},
    play () {},
    sleep () {}
}

export default utils

○这是在 moduleA 内以默认导出形式导出了 utils 这个对象
●index.ts

import XhlUtils from './moduleA'

○这里在 index 内的 XhlUtils 得到的就是 moduleA 文件内导出的 utils 对象

模块化兼容
●之前的都是 JS 的模块化语法, 我们相当于复习或者回顾
●现在这一块是 TS 对模块化的增强了, 各位小伙伴要注意学习了哦

前言 :
我们刚才说的其实都是 ES6 Module 的语法规范
但是我们直到, 在 JS 的发展进程中, 我们并不是只有这一个模块化语法规范
我们还有 AMD / CommonJS / UMD 等模块化语法规范
各自有各自的导入导出语法规范
但是在这几个语法内有一个共同的规范, 就是 exports 变量的出现

exports 变量
在 CommonJS 和 AMD 内都有 exports 这个对象
就是这两个模块化规范的默认导出, 相当于 ES6 模块化规范内的 export default
虽然大家的语法是相似, 并且意义也差不多
但是 ES6 模块化语法, 并不能兼容 CommonJS 和 AMD 语法规范
所以在 TS 内对 ES6 的模块化语法进行了一些扩展
可以在编译的时候, 更好的支持 CommonJS 的语法

exports =
●如果你只是使用 TS 进行前端开发, 不需要考虑模块化语法的兼容, 那么你不需要了解这个
●只有当你需要兼容 CommonJS 和 AMD 语法的时候
●那么我们的 export default 就不能用了
●index.ts => 不考虑兼容性

class Person {}

export default Person

●index.ts => 考虑兼容

class Person {}

export = Person

import = require(”)
●为了支持兼容, 我们的导出语法变了, 那么我们的导入语法也要变化
●index.ts => 不考虑兼容

import Person from './xxx'

●index.ts => 考虑兼容

import Person = require('./xxx')

编译结果
●如果你按照兼容方式书写的导出内容, 会被编译成一下几个情况(看看得了)
○SimpleModule

import Person = require('./xxx')

○AMD( requireJS )

define(["require", "exports", "./xxx"], function (require, exports, mod_1) {
    console.log(mod_1)
});

○CommonJS( node )

const Person = require('./xxx')

○UMD

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        let v = factory(require, exports); if (v !== undefined) module.exports = v
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./xxx"], factory)
    }
})(function (require, exports) {
    let Person = require("./xxx")
    console.log(Person)
});

○System SimpleModule

System.register(["./xxx"], function(exports) {
    let Person
    return {
        setters: [
            function (param) {
                Person = param
            }],
        execute: function() {
            console.log(Person)
        }
    }
})

○Native ES6 Module

import Person from './xxx'

命名空间
前言 :
最早的 TS 里面, 是没有命名空间的概念的, 就是模块化的概念
分成了两种, 内部模块 和 外部模块
从 TS1.5 开始, 内部模块 改名为 命名空间, 所以其实 命名空间 就是 内部模块
那么我们如何他们呢, 其实主要还是从内部封装的内容上来区分
命名空间(内部模块) : 主要用于组织代码, 避免命名冲突
外部模块(模块) : 侧重代码的封装复用, 一个模块内可能包含多个命名空间

例子
●我们在开发的过程中, 如果一个 ts 文件没有书写模块化语法
●那么会默认这个文件内所有定义的变量都是挂载在全局上的
●那么两个文件内就不能出现重复变量名, 不然会出现问题
●a.ts

const num = 100
const str = 'hello world'

●b.ts

const num = 200

●看似没有关系的两个文件, 只是都写了 num 变量
●但是因为没有模块化语法, 这两个就都是挂载在全局的变量

●这个时候, 我们就可以把这些内容放在命名空间( 内部模块 )内来解决这个问题

命名空间
●语法 :

namespace 命名 {
    /* ... */
}

●在命名空间内可以定义变量使用, 也可以向外暴露内容
●在命名空间内向外暴露内容也是使用 export 关键字

namespace GoodsHandler {
  const current = 1
  const pagenum = 10
  const info = []

  export const list = info.slice((current - 1) * pagenum, current * pagenum)
}

○这样一来, 我们所有的内容就放在了这个叫做 GoodsHandler 的命名空间内
○其中三个变量别的地方用不了, 只能在当前命名空间内使用
○向外暴露了一个叫做 list 的内容

引入命名空间
●当我们需要使用一个命名空间的时候, 我们可以使用三斜线(///) 指令
●注意 : 三斜线(///) 指令必须要要用在文件的最开始

/// <reference path="./goodsHandler.ts" />

console.log(GoodsHandler.list)

模块和命名空间
●当我们使用 模块 和 命名空间 组织我们的代码以后
●我们的向外暴露的内容越来越多, 也会考虑到文件太多的问题
●所以有的时候我们可以把命名空间和模块放在一起使用
●也就是在一个模块内, 可以导出多个 命名空间
●分清作用和概念
○命名空间: 主要为了解决变量命名冲突
○模块: 组织代码, 复用

export namespace GoodsHandler { /* ... */ }
export namespace ListHandler { /* ... */ }