正文 

当前位置： 首页 > java > java教程

typescript学习笔记-命名空间

星辰.Lee的园子 星辰.Lee的园子     2022-08-02     596

关键词：

本篇将介绍TypeScript的命名空间，并简单说明一下与模块的区别。

在之前的例子里，有如下一段代码，通过修改这段代码来演示命名空间的用法。

 1 interface Animal {
 2     name: string;
 3     eat(): void;
 4 }
 5 
 6 class Dog implements Animal {
 7     name: string;
 8     constructor(theName: string) {
 9         this.name = theName;
10     }
11 
12     eat() {
13         console.log(`${this.name} 吃狗粮。`);
14     }
15 }
16 
17 class Cat implements Animal {
18     name: string;
19     constructor(theName: string) {
20         this.name = theName;
21     }
22 
23     eat() {
24         console.log(`${this.name} 吃猫粮。`);
25     }
26 }

一、命名空间的声明

同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。

将上面的例子进行修改

 1 namespace Biology {
 2     export interface Animal {
 3         name: string;
 4         eat(): void;
 5     }
 6 
 7     export class Dog implements Animal {
 8         name: string;
 9         constructor(theName: string) {
10             this.name = theName;
11         }
12 
13         eat() {
14             console.log(`${this.name} 吃狗粮。`);
15         }
16     }
17 
18     export class Cat implements Animal {
19         name: string;
20         constructor(theName: string) {
21             this.name = theName;
22         }
23 
24         eat() {
25             console.log(`${this.name} 吃猫粮。`);
26         }
27     }
28 }
29 
30 
31 let dog: Biology.Animal;
32 dog = new Biology.Dog('狗狗');
33 dog.eat();

通过namespace关键字声明命名空间，通过export导出需要在外部使用的对象。在命名空间外部需要通过“完全限定名”访问这些对象。

 

二、命名空间的引用

通常情况下，声明的命名空间代码和调用的代码不在同一个文件里

biology.ts

 1 namespace Biology {
 2     export interface Animal {
 3         name: string;
 4         eat(): void;
 5     }
 6 
 7     export class Dog implements Animal {
 8         name: string;
 9         constructor(theName: string) {
10             this.name = theName;
11         }
12 
13         eat() {
14             console.log(`${this.name} 吃狗粮。`);
15         }
16     }
17 
18     export class Cat implements Animal {
19         name: string;
20         constructor(theName: string) {
21             this.name = theName;
22         }
23 
24         eat() {
25             console.log(`${this.name} 吃猫粮。`);
26         }
27     }
28 }
biology.ts

app.ts

1 /// <reference path="biology.ts" />
2 
3 let dog: Biology.Animal;
4 dog = new Biology.Dog('狗狗');
5 dog.eat();

通过reference注释引用命名空间，即可通过“完全限定名”进行访问。

更有甚者，相同的命名空间会声明在不同的文件中

1 namespace Biology {
2     export interface Animal {
3         name: string;
4         eat(): void;
5     }
6 }
biology.ts
 1 /// <reference path="biology.ts" />
 2 
 3 namespace Biology {
 4     export class Dog implements Animal {
 5         name: string;
 6         constructor(theName: string) {
 7             this.name = theName;
 8         }
 9 
10         eat() {
11             console.log(`${this.name} 吃狗粮。`);
12         }
13     }
14 }
dog.ts
 1 /// <reference path="biology.ts" />
 2 
 3 namespace Biology {
 4     export class Cat implements Animal {
 5         name: string;
 6         constructor(theName: string) {
 7             this.name = theName;
 8         }
 9 
10         eat() {
11             console.log(`${this.name} 吃猫粮。`);
12         }
13     }
14 }
cat.ts
 1 // app.ts
 2 
 3 /// <reference path="biology.ts" />
 4 /// <reference path="cat.ts" />
 5 /// <reference path="dog.ts" />
 6 
 7 
 8 let dog: Biology.Animal;
 9 dog = new Biology.Dog('狗狗');
10 dog.eat();
11 
12 let cat: Biology.Animal;
13 cat = new Biology.Cat('喵星人');
14 cat.eat();

编译之后，每一个文件都将编译成对应的一个JavaScript文件，使用时需要将这些文件都引用进来。通过如下命令，可以将有相同命名空间的文件编译到一个JavaScript文件中，这样在引用时只需要一个文件即可。

1 tsc --outFile js\biology.js ts\biology.ts ts\dog.ts ts\cat.ts

将biology.ts、dog.ts、cat.ts编辑到一个JavaScript文件biology.js文件内，编译后的文件内容如下

 1 /// <reference path="biology.ts" />
 2 var Biology;
 3 (function (Biology) {
 4     var Dog = (function () {
 5         function Dog(theName) {
 6             this.name = theName;
 7         }
 8         Dog.prototype.eat = function () {
 9             console.log(this.name + " \u5403\u72D7\u7CAE\u3002");
10         };
11         return Dog;
12     }());
13     Biology.Dog = Dog;
14 })(Biology || (Biology = {}));
15 /// <reference path="biology.ts" />
16 var Biology;
17 (function (Biology) {
18     var Cat = (function () {
19         function Cat(theName) {
20             this.name = theName;
21         }
22         Cat.prototype.eat = function () {
23             console.log(this.name + " \u5403\u732B\u7CAE\u3002");
24         };
25         return Cat;
26     }());
27     Biology.Cat = Cat;
28 })(Biology || (Biology = {}));

 

三、命名空间的别名

在引用命名空间时，可以通过import关键字起一个别名

 1 // app.ts
 2 
 3 /// <reference path="biology.ts" />
 4 /// <reference path="cat.ts" />
 5 /// <reference path="dog.ts" />
 6 
 7 import bio_other = Biology;     // 别名
 8 
 9 let dog: bio_other.Animal;
10 dog = new bio_other.Dog('狗狗');
11 dog.eat();
12 
13 let cat: bio_other.Animal;
14 cat = new bio_other.Cat('喵星人');
15 cat.eat();

 

四、命名空间与模块

命名空间：代码层面的归类和管理。将有相似功能的代码都归一到同一个空间下进行管理，方便其他代码引用。更多的是侧重代码的复用。

模块：一个完整功能的封装，对外提供的是一个具有完整功能的功能包，需要显式引用。一个模块里可能会有多个命名空间。

c#学习笔记2

1.命名空间声明：命名空间是一种特殊的分类机制，它将与一个特定功能有关的所有类型都分组到一起。一般将外层命名空间指定为公司名，向内依次是产品名，最后是功能区域，比如Microsoft.Win32.Networking。命名空间中中可以包... 查看详情

c++基础学习笔记命名空间namespace的理解和使用(代码片段)

文章目录命名空间的概念命名空间的定义命名空间的正确使用方式命名空间的概念概念：在C/C++中，变量、函数和后面要学到的类都是大量存在的，这些变量、函数和类的名称将都存在于全局作用域中，可能... 查看详情

TypeScript 从类 + 命名空间拆分接口

】TypeScript从类+命名空间拆分接口【英文标题】：TypeScriptsplitinterfacefromclass+namespace【发布时间】：2019-03-1818:37:39【问题描述】：在TypeScript中，我有一个与命名空间合并的类(foo.ts):exportclassCfoo():Foo...exportnamespaceCtypeFoo=......在准备... 查看详情

TypeScript：用其他东西替换命名空间

】TypeScript：用其他东西替换命名空间【英文标题】：TypeScript:SubstituteNamespaceswithsomethingelse【发布时间】：2018-10-2814:22:48【问题描述】：TSLint抱怨不应使用命名空间，据我所知，常识是不应再使用它们，因为它们是特殊的TypeScript... 查看详情

TypeScript：如何在命名空间中使用内部接口

】TypeScript：如何在命名空间中使用内部接口【英文标题】：TypeScript:Howtouseinternalinterfacewithinnamespace【发布时间】：2017-02-1611:37:30【问题描述】：我有一个接口，我只想在命名空间（内部模块）中使用，并且不应该在命名空间之... 查看详情

typescript与javascript不同之处系列===;命名空间,三斜线指令

本系列目的:列出TypeScript与JavaScript的不同点,缩小文档内容,提高学习速度.原文档地址:https://www.tslang.cn/index.html全系列目录1.基础类型https://blog.csdn.net/c_kite/article/details/852320212.接口https://blog.csdn.net/c_kite/article/details/8 查看详情

TypeScript：找不到命名空间“ng”

】TypeScript：找不到命名空间“ng”【英文标题】：TypeScript:Cannotfindnamespace\'ng\'【发布时间】：2016-09-2813:12:21【问题描述】：我正在尝试使用tsconfig.json，这样我就可以避免在一堆文件的顶部。但我不断收到此错误：[ts]找不到命名... 查看详情

为啥 ES2015 模块语法优于自定义 TypeScript 命名空间？

】为啥ES2015模块语法优于自定义TypeScript命名空间？【英文标题】：WhytheES2015modulesyntaxispreferredovercustomTypeScriptnamespaces?为什么ES2015模块语法优于自定义TypeScript命名空间？【发布时间】：2021-01-1013:43:52【问题描述】：来自typescript-es... 查看详情

typescript命名空间(代码片段)

demo.tsclassHeader　　constructor()　　　　constelem=document.createElement(‘div‘);　　　　elem.innerText=‘ThisisHeader‘;　　　　document.body.appendChild(elem);　　classContent　　constructor()　　　　constelem=docu 查看详情

layabox---typescript---命名空间和模块(代码片段)

目录1.介绍2.命名空间2.1使用命名空间的验证器3.分离到多文件3.1多文件的命名空间4.别名5.使用其它的JavaScript库5.1外部明明空间6.命名空间和模块7.命名空间和模块的陷阱 7.1对模块使用7.2不必要的命名空间7.3模块的取舍1.介绍我... 查看详情

TypeScript 在命名空间下扩展 JQuery

】TypeScript在命名空间下扩展JQuery【英文标题】：TypeScriptextendJQueryunderNamespace【发布时间】：2016-01-2112:36:05【问题描述】：我正在尝试通过TypeScript中的函数扩展默认的JQuery接口和默认对象jQuery代码///<referencepath="jquery.d.ts"/>name... 查看详情

typescript-8.命名空间(代码片段)

基础略。https://www.tslang.cn/docs/handbook/namespaces.html多文件中的命名空间（一个文件分解为几个）现在，我们把Validation命名空间分割成多个文件。尽管是不同的文件，它们仍是同一个命名空间，并且在使用的时候就如同它们在一个... 查看详情

如何将命名空间与 TypeScript 外部模块一起使用？

】如何将命名空间与TypeScript外部模块一起使用？【英文标题】：HowdoIusenamespaceswithTypeScriptexternalmodules?【发布时间】：2015-08-0204:05:41【问题描述】：我有一些代码：baseTypes.tsexportnamespaceLiving.ThingsexportclassAnimalmove()/*...*/exportclassPlan... 查看详情

在 Typescript 中获取命名空间的所有值？

】在Typescript中获取命名空间的所有值？【英文标题】：GetallthevaluesofanamespaceinTypescript?【发布时间】：2018-04-0202:52:31【问题描述】：节点版本：6.11.3Typescript版本：2.1.6我们的项目中有一堆枚举，大部分看起来像这样：exporttypeThingT... 查看详情

TypeScript 错误：找不到命名空间“google”

】TypeScript错误：找不到命名空间“google”【英文标题】：TypeScriptError:Cannotfindnamespace\'google\'【发布时间】：2017-02-1523:58:02【问题描述】：我有项目angular-cli~root~/src/typings.json"globalDevDependencies":"angular-protractor":"registry:dt/angular-pro 查看详情

TypeScript 声明文件：命名空间中的函数

】TypeScript声明文件：命名空间中的函数【英文标题】：TypeScriptDeclarationFile:Functioninnamespace【发布时间】：2017-01-2620:55:10【问题描述】：我在我的一个项目中使用OpenLayers3，并从DefinitiveTyped(DefinitionFile)中检索了TypeScript定义文件，... 查看详情

c++学习笔记：高级编程：文件和流，异常处理，动态内存，命名空间

C++文件和流到目前为止，我们已经使用了iostream标准库，它提供了cin和cout方法分别用于从标准输入读取流和向标准输出写入流。本教程介绍如何从文件读取流和向文件写入流。这就需要用到C++中另一个标准库fstream，它定义了三... 查看详情

typescript（18）：命名空间(代码片段)

命名空间一个最明确的目的就是解决重名问题。假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父... 查看详情