TypeScript学习笔记(13)-命名空间

命名空间简介

命名空间是一种用于组织和分类代码的 TypeScript 特定方式,使你能够将相关代码组合在一起。

可以使用命名空间执行以下操作:

  • 减少全局范围内的代码量,限制“全局范围污染”。

  • 为名称提供上下文,有助于减少命名冲突。

  • 提高可重用性。

单一文件

  1. 如果要使函数或类可供命名空间之外的代码使用,请在其名称前面添加 export 关键字。

  2. 如果省略 export 关键字,则只能在命名空间内使用该组件。

  3. 若要在命名空间中使用类或函数,请为组件名称添加命名空间名称前缀。

namespace A {

    export function fun1(msg: string) {
        console.log(`空间A的方法1 ${msg}.`);
    }

}

namespace B {
    export function fun1(msg: string) {
        console.log(`空间B的方法1 ${msg}.`);
    }
}

A.fun1('Hello'); // 输出:空间A的方法1 Hello.
B.fun1('Hello'); // 输出:空间B的方法1 Hello.

嵌套命名空间组织代码

namespace A {

    export function fun1(msg: string) {
        console.log(`空间A的方法1 ${msg}.`);
    }

    export namespace A1 {
        export function fun2(msg: string) {
            console.log(`空间A的空间A1方法2 ${msg}`);
        }
    }

    namespace A2 {
        export function fun2(msg: string) {
            console.log(`空间A的空间A1方法2 ${msg}`);
        }
    }

}

namespace B {
    export function fun1(msg: string) {
        console.log(`空间B的方法1 ${msg}.`);
    }
}

A.fun1('Hello'); // 输出:空间A的方法1 Hello.
B.fun1('Hello'); // 输出:空间B的方法1 Hello.
A.A1.fun2('Hello'); // 输出:空间A的空间A1方法2 Hello
A.A2.fun2('Hello'); // 未导出空间 报错 类型“typeof A”上不存在属性“A2”。

定义命名空间别名

随着嵌套命名空间变得越来越复杂,你可能需要创建一个别名来缩短和简化代码。 为此,请使用 import 关键字。

import A1 = A.A1;
A1.fun2('HelloA1'); // 输出:空间A的空间A1方法2 Hello

多文件命名空间

可以通过跨多个 TypeScript 文件共享命名空间来扩展它们。 使用三斜杠 (///) 语法 告诉 TypeScript 文件直接的关系 比如有下面三个文件:

  1. interfaces.ts,它声明包含某些接口定义的命名空间。

  2. functions.ts,该文件使用在 interfaces.ts 中实现接口的函数声明命名空间。

  3. main.ts,它调用 functions.ts 中的函数,并表示应用程序的主代码。

    TypeScript学习笔记(13)-命名空间_第1张图片

如果对多个文件进行引用,请从最高级别的命名空间开始,然后逐渐向下。 在编译文件时,TypeScript 将使用此顺序。

编译多文件命名空间

  1. 方法1 每个文件编译

  • 默认情况下,当你在 main.ts 上运行 TypeScript 编译器时,它将检查文件中的 reference 语句,并为每个输入文件生成一个 JavaScript 文件。 如果选择此选项,请使用网页上的

你可能感兴趣的:(TypeScript,前端,typescript)