Skip to content

TS-06 模块、命名空间、声明合并

模块

ts1.5版本之后,内部模块称作命名空间,外部模块改称为模块;

ts中的模块都是使用es6的模块语法的,在es6模块中的基础上,ts还新增了其他的模块方法:

ts
// a.ts
const name = 'info'
export = name // 默认导出

// b.ts
import name = require('./b.ts') // 引入

模块的三种引入方式

ts
import moment from 'moment' // 导入了一个函数
import * as moment from 'moment' // 将所有的方法导入
import moment = require('moment')  // 导入了一个函数

命名空间

使用namespace定义命名空间,命名空间内部使用export导出,没有使用export导出的在外面拿不到;

在命名空间内部使用export导出的内容实际是命名空间的属性名,可以输出之后查看编译js后的结果;

ts
// a.ts
namespace validation {
    const isLetterReg = /^[A-Za-z]+$/
    export const isNumber = /^[0-9]+$/
    export const checkLetter = (val: string) => {
        return isLetterReg.test(val)
    }
}
    
// b.ts
// 使用三斜杠加reference引入a.ts文件
/// <reference path='./a.ts'/>
var isLetter = validation.checkLetter('abc')

输出js文件

在命令行执行tsc --outFile src/b.js src/b.ts,执行输出js文件

命名空间能够实现的东西,import都能够实现,建议使用import而不是使用命名空间;

命名空间别名

使用import关键字定义别名,使用别名可以很方便的解决深层次的嵌套

ts
namespace Shape {
    export namespace Polygons {
        export class Trggler{}
        export class Person{}
    }
}
import polygons = Shape.Polygons
let trggler = new polygons.Trggler()

声明合并

ts中,接口是可以多次声明的,声明同样的接口和命名空间,最后ts会将多个同名声明,合并为一个

接口的合并

ts
interface Info {
    name: string
}
interface Info {
    age: number
}
let info: Info;
info = {
    name: 'hhh',
    age: 18 // 需要同时拥有这两个字段
}

ts中,所有的声明概况起来会创建三种实体之一,

命名空间: 实际是创建一个对象,属性是命名空间导出的内容

类型声明: 创建一个类型,并且赋值给一个名字;

值声明: 在ts中创建了一个值

声明类型创建了命名空间创建了类型创建了值
NameSpace
Class
Enum
Interface
Type Alias类型别名
Function
Variable

注意: 定义的非函数成员,属性必须是不同的,如果是相同的,那么类型必须是相同的,对于函数成员,都会被当作是函数的重载,后面的接口拥有更高的优先级

命名空间的合并

命名空间中定义的属性名没有export导出,在同名的命名空间也无法取到

ts
namespace Validate {
    const isLenth = /^[0-9]+$/
    export const checkLength = () => {}
}
namespace Validate {
    // 这里是取不到isLength的
    export const checkLetter = () => {}
}
// 相当于
namespace Validate {
    export const checkLength = () => {}
    export const checkLetter = () => {}
}

类和命名空间的合并

类一定要在命名空间前面才行

ts
class Validations {
    constructor(){}
    public checkType(){}
}
namespace Validations {
    export const numberReg = /^[0-9]+$/
}
console.log(Validations)

上面例子,将Validations实例化之后就可以调用类上面的方法了;

函数和命名空间的合并

函数和命名空间合并也必须在命名空间前面

ts
function countUp(){
    countUp.count++
}
namespace countUp {
    export let count = 0;
}

枚举和命名空间的合并

枚举和命名空间不区分先后顺序,可以随意

ts
enum Colors {
    red,
    green,
    blue
}
namespace Colors {
    export const yellow = 3
}
console.log(Colors)

Released under the MIT License.