浅谈typeScript命名空间

命名空间简介

命名空间(在早期版本的 TypeScript 中称为“内部模块”)是一种用于组织和分类代码的 TypeScript 特定方式,使你能够将相关代码组合在一起。 命名空间允许将与业务规则相关的变量、函数、接口或类分组到一个命名空间,将安全性分组到另一个命名空间。

命名空间内的代码将从全局范围拉入到命名空间范围。 这种布局有助于避免全局命名空间中组件之间的命名冲突,并且在与可能使用类似组件名称的分布式开发团队合作时也会有好处。

命名空间特点

  • 减少全局范围内的代码量,限制“全局范围污染”。
  • 为名称提供上下文,有助于减少命名冲突。
  • 提高可重用性。

TypeScript 中命名空间使用 namespace 来定义,例如:

namespace namespaceA{
	export interface interfaceA{}
	export class classA{}
	function getUserInfo() {
		let name = getName()
		return console.log(name + ',I am 26 years old')
	}
	function getName() {
		return 'my name is Yj'
	}
}

interfaceA  // false,没有添加命名空间名称前缀namespaceA
namespaceA.interfaceA    // true
namespaceA.classA  // true
namespaceA.getName  // false,没有export关键字
namespaceA.getUserInfo  // 'my name is Yj, I am 26 years old'

以上定义了一个命名空间 namespaceA,如果我们需要在外部可以调用 namespaceA中的类和接口,则需要在类和接口添加 export 关键字。命名空间中定义的所有组件的作用域都限定为命名空间,并从全局范围中删除

使用嵌套命名空间组织代码

在命名空间中嵌套命名空间,从而提供更多的选项来组织代码,个人理解类似于在一个对象里面找对象属性的属性。

namespace namespaceA{
	export namespaceB{
		export functionA() {
			namespaceC.functionB
		}
	}
	export namespaceC{
		export functionB() {
			return console.log('这是命名空间c里面的函数b!')
		}
		export functionC() {
			return console.log('这是命名空间C里面的函数C!')
		}
	}
}

namespaceA.namespaceB.functionA  // 这是命名空间c里面的函数b!
namespaceA.namespaceC.functionC  // 这是命名空间C里面的函数C!

定义命名空间别名

TypeScript 创建一个易于导航的嵌套命名空间层次结构。 但是,随着嵌套命名空间变得越来越复杂,你可能需要创建一个别名来缩短和简化代码。 为此,请使用 import 关键字。

//namespaceA 和 namespaceB来自上面的代码
import nameA = namespaceA.namespaceB;
nameA.functionA();  // '这是命名空间c里面的函数b!'

编译单一文件命名空间

编译单一文件命名空间的方式与编译任何其他 TypeScript 文件的方式相同。 因为命名空间是一个只包含 TypeScript 的构造,所以会从生成的 JavaScript 代码中删除它们,并将其转换为必要时嵌套的变量,以形成类似命名空间的对象。

如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:

/// 

使用多文件命名空间来组织代码

可以通过跨多个 TypeScript 文件共享命名空间来扩展它们。 如果在多个文件中具有彼此相关的命名空间,则必须添加 reference 标记,使 TypeScript 编译器知道文件之间的关系。 例如,假定你有三个 Typescript 文件:

  • interfaces.ts,它声明包含某些接口定义的命名空间。
  • functions.ts,该文件使用在 interfaces.ts 中实现接口的函数声明命名空间。
  • main.ts,它调用 functions.ts 中的函数,并表示应用程序的主代码。

若要告知 TypeScript interfaces.ts 与 functions.ts 之间的关系,请在 functions.ts 顶部使用三斜杠 (///) 语法向 interfaces.ts 添加 reference。 然后,在与 interfaces.ts 和 functions.ts 关联的 main.ts 中,将 reference 添加到这两个文件。

浅谈typeScript命名空间_第1张图片

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

编译多文件命名空间

编译多个文件命名空间的方法有两种:每文件编译和单一文件编译。

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

还可以使用 --outFile 选项指示编译器生成单个 JavaScript 输出文件。 在上面的示例中,命令 tsc --outFile main.js main.ts 指示编译器生成一个名为 main.js 的 JavaScript 文件。

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