namespace

namsespace 是一种将相关代码组织在一起的方式，中文名为命名空间。

它出现在 ES 模块诞生之前，作为 TypeScript 自己的模块格式而发明的。但是，自从 ES 模块诞生以来，官方已不再推荐使用 namespace 关键字。

基本用法

namespace Utils {
    function isString(value: any) {
        return typeof value === "string";
    }

    // ✅ 正确
    isString("hello");
}

// ❌ 错误
Utils.isString("hello");

上面示例中，明媚空间 Utils 里面定义了一个函数 isString，它只能在 Utils 命名空间内使用，如果在外部使用就会报错。

如果要在命名空间以外的地方使用该函数，就必须为该成员加上 export 关键字。表示对外输出该成员。

namespace Utils {
    export function isString(value: any) {
        return typeof value === "string";
    }
}

// ✅ 正确
Utils.isString("hello");

编译出来的 JavaScript 代码如下：

var Utils;
(function (Utils) {
    function isString(value) {
        return typeof value === "string";
    }
    Utils.isString = isString;
})(Utils || (Utils = {}));

上面代码中，命名空间 Utils 变成了一个全局变量。凡是 export 的内部成员，都成了全局变量的属性。

也就是说，namespace 关键字在编译后会变成一个值，保留在了编译后的代码中，所以 namespace 关键字不是纯类型代码。

namespace 内部还可以使用 import 命令输入外部成员，相当于外部成员起别名。当外部成员名字比较长时，别名能够简化代码。

namespace Utils {
    export function isString(value: any) {
        return typeof value === "string";
    }
}

namespace App {
    // isString 为 Utils.isString 的别名
    import isString = Utils.isString;

    isString("hello");
    // ⬇️ 等同于
    Utils.isString("hello");
}

import 命令也可以在 namespace 外部指定别名。

namespace Utils {
    export function isString(value: any) {
        return typeof value === "string";
    }
}

import isString = Utils.isString;

isString("hello");
// ⬇️ 等同于
Utils.isString("hello");

namespace 可以嵌套。

namespace Utils {
    export namespace Messaging {
        export function log(msg: string) {
            console.log(msg);
        }
    }
}

Utils.Messaging.log("hello"); // "hello"

• 如果要在外部使用 Messaging，就必须加上 export 关键字。

• 嵌套的命名空间，必须从最外层开始引用。

namespace 不仅可以包含实义代码，还可以包括类型代码。

namespace N {
    export interface MyInterface {}
    export class MyClass {}
}

上面代码中，命令空间 N 不仅对外输出类，还对外输出一个接口，它们都可以用作类型。

namespace 与模块的作用是一致的，都是把相关的代码组织在一起的方式。对外输出接口。区别是一个文件只能有一个模块，但是可以有多个 namespace。由于模块是 JavaScript 的标准语法，且不需要编译转换，所以建议用模块来组织代码。

如果 namespace 代码放在一个单独的文件里，那么引入这个文件需要使用三斜杠语法。

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

namespace 的输出

namespace 本身也可以使用 export 命令输出，供其他文件使用

// shapes.ts
export namespace Shapes {
    export class Triangle {
        // ...
    }
    export class Square {
        // ...
    }
}

其它脚本文件使用 import 命令，加载这个命名空间。

// 写法一
import * as shapes from "./shapes";
let t = new shapes.Shapes.Triangle();
// 写法二
import { Shapes } from "./shapes";
let t = new Shapes.Triangle();

namespace 的合并

多个同名的 namespace 会自动合并，这一点跟 interface 一样。

namespace Animals {
    export class Cat {}
}
namespace Animals {
    export interface Legged {
        numberOfLegs: number;
    }
    export class Dog {}
}

// 等同于
namespace Animals {
    export interface Legged {
        numberOfLegs: number;
    }
    export class Cat {}
    export class Dog {}
}

合并命名空间时，命名空间中的非 export 的成员不会被合并，它们只在各自的命名空间中使用。

namespace N {
    const a = 0;

    export function foo() {
        console.log(a); // 正确
    }
}

namespace N {
    export function bar() {
        foo(); // 正确
        console.log(a); // 报错
    }
}

命名空间还可以和同名函数、类、枚举 合并。但是要求同名函数必须在命名空间之前声明。这样做是为了确保先创建一个对象，然后同名的命名空间就相当于给这个对象添加额外的属性。

function f() {
    return f.version;
}

namespace f {
    export const version = "1.0";
}

f(); // '1.0'
f.version; // '1.0'

class C {
    foo = 1;
}

namespace C {
    export const bar = 2;
}

C.bar; // 2