namespace命名空间(TS-16)

我们在工作中无法避免全局变量造成的污染，TypeScript 提供了 namespace 避免这个问题出现

• 内部模块，主要用于组织代码，避免命名冲突。
• 命名空间内的类默认私有
• 通过 export 暴露
• 通过 namespace 关键字定义

TypeScript与 ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块。相反地，如果一个文件不带有顶级的 import 或者 export 声明，那么它的内容被视为全局可见的（因此对模块也是可见的）

命名空间中通过 export 将想要暴露的部分导出

如果不用 export 导出是无法读取其值的

namespace a {
    export const Time: number = 1000
    export const fn = <T>(arg: T): T => {
        return arg
    }
    fn(Time)
}
 
 
namespace b {
     export const Time: number = 1000
     export const fn = <T>(arg: T): T => {
        return arg
    }
    fn(Time)
}
 
a.Time
b.Time

案例

//文件1与文件2位于同一文件夹下
//文件1 => index.ts
const aa = 23
//文件3 => index2.ts
const aa = 66//此时就会报错，因为我们在文件1已经声明过aa了

//文件1 => index.ts
namespace A{
    export const aa =23
}
//文件2 => index.ts
namespace B{
    export const aa =66
}//不会报错

//要读取的话怎么做呢？此时在文件1
console.log(A.a);//像使用对象一样。实际上也确实包了一层对象

实际编译成js文件的样子

"use strict"
var A;
(function (A){
    A.a = 1;
})(A || (A ={}));
console.log(A,a);
//到此js文件所在目录下使用node index.js运行，输出1

嵌套命名空间

就是提取内容的时候需要多.几次。比如下方，原本只需要a.b，现在需要a.b.value

编译成js文件的话，就是在function又套了一层

namespace a {
    export namespace b {
        export class Vue {
            parameters: string
            constructor(parameters: string) {
                this.parameters = parameters
            }
        }
    }
}
 
let v = a.b.Vue
 
new v('1')

抽离命名空间

将命名空间的内容抽离出来，通过import引入到其他文件中使用

//在index2.ts文件下
expost namespace B{
    export const a = 2
}
//在index.ts文件下
import xx from './index2.ts'

namespace A{
    export namespace C{
        export const D = 5
    }
}
console.log(A.C.D,B)//将B抽离成了文件
//将此文件用tsc进行终端编译，然后在tscondig.json将module修改为CommonJs(node.js不认识defined，node.js是基于CommonJS的)，进去js文件夹、终端运行node index

简化命名空间

可以给命名空间路径起个名字，然后直接使用这个名字就可以代替命名空间路径了

这个是不能够在ts-node的环境下去使用的

//在index2.ts文件下
expost namespace B{
    export const a = 2
}
//在index.ts文件下
import xx from './index2.ts'

namespace A{
    export namespace C{
        export const D = 5
    }
}
console.log(A.C.D,B)//将B抽离成了文件

import AAA = A.C.D
console.log(AAA)//起到跟A.C.D一样的作用
import AAA = A.C
console.log(AAA.D)//起到跟A.C.D一样的作用

命名空间的合并

如果命名空间的命名一样的话(重名)，会自动合并

//案例1
namespace A{
    export const b = 2
}

namespace A{
    export const d = 3
}
//案例2
namespace A{
    export const b = 2
    export const d = 3//案例1跟案例2是一模一样的，会自动合并
}