文章目录
一、模块
- JavaScript 在 ES2015 中引入了模块的概念，我们的 JS 也开始进行了标准的模块化开发阶段，在 TS 内沿用了这个概念
- 在 TS 中，从语法到概念，其实和 JavaScript 中基本一致的
1. 导出
- 在一个文件中，所有的声明都可以利用 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
2. 导入
- 和上面导出是配套出现的
基础导入
- 直接导出某一个模块的某个或者某些内容
- 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 这个函数名
3. 默认导出
- 每个模块都会有一个默认导出，使用 default 来进行
- 需要注意 : 一个模块只能有一个默认导出
- moduleA.ts
const utils = {
study () {},
play () {},
sleep () {}
}
export default utils
- 这是在 moduleA 内以默认导出形式导出了 utils 这个对象
- index.ts
import XhlUtils from './moduleA'
- 这里在 index 内的 XhlUtils 得到的就是 moduleA 文件内导出的 utils 对象
4. 模块化兼容
- 之前的都是 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 开始，内部模块 改名为 命名空间，所以其实 命名空间 就是 内部模块
那么我们如何他们呢，其实主要还是从内部封装的内容上来区分
命名空间(内部模块) : 主要用于组织代码，避免命名冲突
外部模块(模块) : 侧重代码的封装复用，一个模块内可能包含多个命名空间
1. 例子
- 我们在开发的过程中，如果一个 ts 文件没有书写模块化语法
- 那么会默认这个文件内所有定义的变量都是挂载在全局上的
- 那么两个文件内就不能出现重复变量名，不然会出现问题
- a.ts
const num = 100
const str = 'hello world'
- b.ts
const num = 200
- 看似没有关系的两个文件，只是都写了 num 变量
- 但是因为没有模块化语法，这两个就都是挂载在全局的变量
- 这个时候，我们就可以把这些内容放在命名空间( 内部模块 )内来解决这个问题
2. 命名空间
- 语法 :
namespace 命名 {
/* ... */
}
- 在命名空间内可以定义变量使用，也可以向外暴露内容
- 在命名空间内向外暴露内容也是使用 export 关键字
namespace GoodsHandler {
const current = 1
const pagenum = 10
const info = []
export const list = info.slice((current - 1) * pagenum, current * pagenum)
}
- 这样一来，我们所有的内容就放在了这个叫做 GoodsHandler 的命名空间内
- 其中三个变量别的地方用不了，只能在当前命名空间内使用
- 向外暴露了一个叫做 list 的内容
3. 引入命名空间
- 当我们需要使用一个命名空间的时候，我们可以使用三斜线(///) 指令
- 注意 : 三斜线(///) 指令必须要要用在文件的最开始
// <reference path="./goodsHandler.ts" />
console.log(GoodsHandler.list)
三、模块和命名空间
- 当我们使用 模块 和 命名空间 组织我们的代码以后
- 我们的向外暴露的内容越来越多，也会考虑到文件太多的问题
- 所以有的时候我们可以把命名空间和模块放在一起使用
- 也就是在一个模块内，可以导出多个 命名空间
- 分清作用和概念
- 命名空间: 主要为了解决变量命名冲突
- 模块: 组织代码，复用
export namespace GoodsHandler { /* ... */ }
export namespace ListHandler { /* ... */ }