TypeScript 学习之路第十七章:命名空间(namespace)

作者:孙宇晨 来源:www.5idf.cn 2020-02-29   阅读:

JavaScript如果要替名称加上命名空间,不外乎就是利用物件或是模组来达成。但在TypeScript中,有namespace关键字可以让我们快速地新增命名空间来用。

namespace关键字的用法很简单,如下:

namespace 命名空间的名称(可以用句号连接多个名称) {
    程序叙述区块
}

若要将namespace程序区块中的名称暴露出来,与模组一样,是在varletconstfunctionclassinterfaceenumtype关键字前加上export关键字。当然,namespace程序区块中也还可以再使用namespace关键字来建立程序叙述区块,且namespace关键字前也是可以加上export关键字来将其暴露的。

例如:


 
namespace org.magiclen {
 
export namespace A {
 
export function f () {
 
console .log( 'A' );
 
}
 
}
 
 
 
export namespace B {
 
export function f () {
 
console .log( 'B' );
 
}
 
}
 
 
 
export namespace AB {
 
export function f () {
 
Af();
 
Bf();
 
}
 
}
 
}
 
 
 
org.magiclen.Af();
 
org.magiclen.Bf();
 
org.magiclen.AB.f();

以上代码的输出结果如下:

B

扩充命名空间

我们可以建立出相同名称的namespace程序叙述区块,替已存在的命名空间扩充原本不存在的名称。

例如:


 
namespace org.magiclen {
 
export namespace A {
 
export function f () {
 
console .log( 'A' );
 
}
 
}
 
export namespace A {
 
export function f2 () {
 
console .log( 'A' );
 
}
 
}
 
 
 
export namespace B {
 
export function f () {
 
console .log( 'B' );
 
}
 
}
 
 
 
export namespace AB {
 
export function f () {
 
Af();
 
Bf();
 
}
 
}
 
}
 
 
 
namespace org.magiclen.A {
 
export function ff () {
 
console .log( 'AA' );
 
}
 
}
 
 
 
namespace org.magiclen {
 
export function f () {
 
console .log( 'Hello!' );
 
}
 
}
 
 
 
org.magiclen.Af();
 
org.magiclen.Bf();
 
org.magiclen.AB.f();
 
 
 
org.magiclen.A.ff();
 
org.magiclen.f();

命名空间除了可以拿来扩充同名的命名空间之外,也可以拿来扩充同名的变数、常数、函数、类别、介面、列举和型别别名下的名称。有点诡异,但十分方便。例如:


 
type T = number | string ;
 
 
 
namespace T {
 
export let n = 1 ;
 
}
 
 
 
console .log(Tn);
 
 
 
function f () {
 
 
 
}
 
 
 
namespace f {
 
export let s = '2' ;
 
}
 
 
 
console .log(fs);

命名空间的网页应用

实际编译以下TypeScript代码:


 
namespace A {
 
export function f () {
 
console .log( 'A' );
 
}
 
}

会得到这样的JavaScript代码:


 
var A;
 
( function ( A ) {
 
function f () {
 
console .log( 'A' );
 
}
 
Af = f;
 
})(A || (A = {}));

A命名空间实际上在JavaScript中会是一个变数A也就是说,利用这样的性质,我们可以很容易地在网页浏览器上透过命名空间产生的变数,来存取这个变数下的名称。

举例来说,现在有以下两个档案:

 
namespace A {
 
export function f () {
 
console .log( 'A' );
 
}
 
}
 
namespace B {
 
export function f () {
 
console .log( 'B' );
 
}
 
}

以上两个档案虽然都不是TypeScript模组(因为最外层并没有使用export关键字),但是它们的f函数在网页中并不会有冲突,可以透过全域变数AB来呼叫它们。如下:


 
<!DOCTYPE html>
 
< html >
 
< head >
 
< meta charset = "utf-8" />
 
< script src = "a.js" > </ script >
 
< script src = "b.js" > </ script >
 
</ head >
 
< body >
 
< script >
 
Af();
 
Bf();
 
</ script >
 
</ body >
 
</ html >

总结

至此我们已经把TypeScript能够宣告的名称类型(变数、常数、函数、类别、介面、列举、型别别名、模组、命名空间)都学全了。只是有些名称可以当作型别,有些名称可以当作值,有些名称又可以当作命名空间来用,实在很混乱。在此用以下表格做个归纳:

名称类型 命名空间 型别 例子
var
var name = 'MagicLen' ;

console .log(name);
let
let name = 'MagicLen' ;

console .log(name);
const
const name = 'MagicLen' ;

console .log(name);
function
function  f () {}

console .log(f);
class
class C {}

console .log(C);

let o: C = new C();
interface
interface I {}

class C implements I {}

let o: I = new C();
enum
enum E { // it can not be a const enum
    V
}

console .log(E);

let o: E = EV;
type
interface I {}

let o: I;
import
import * as fs from  'fs' ;

console .log(fs);
namespace
namespace NS {
     export  function  f () {}
}

NS.f();

在下一个章节中,我们要来学习TypeScript的装饰器(Decorator)。

分享给小伙伴们:
如果本文侵犯了您的权利, 请联系本网立即做出处理,谢谢。
相关文章
  • 什么是机器学习?定义,类型

    什么是机器学习?定义,类型

  • TypeScript 学习之路第十六章:模组

    TypeScript 学习之路第十六章:模组

  • TypeScript学习之路第十八章:装饰器(Decorator)

    TypeScript学习之路第十八章:装饰器(Decorator)

  • 如何在Webpack中使用TypeScript?

    如何在Webpack中使用TypeScript?