学习篇-TypeScript-命名空间

最新推荐文章于 2024-06-02 22:16:29 发布

不要跟我说对不起

最新推荐文章于 2024-06-02 22:16:29 发布

阅读量286

点赞数 1

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/u012365780/article/details/106591144

版权

typescript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

- - - - 一、TypeScript-命名空间
      - 1. 命名空间是什么
        2. 命名空间的好处
        3. 命名空间的定义
        4. 命名空间的调用
        5. 命名空间的示例

一、TypeScript-命名空间

1. 命名空间是什么

使用namespace关键字将一段代码包裹起来，这段被包裹起来的逻辑代码就是一个命名空间。

2. 命名空间的好处

在单一的空间中，如果存在两个变量或函数的名字完全相同，就会出现冲突。为了解决这类问题，只要将相同的变量和函数放在不通的空间中就可以完美解决此类烦恼。
代码层面的归类和管理。将有相似功能的代码都归一到同一个空间下进行管理，方便其他代码引用，更多的是侧重代码的复用。

3. 命名空间的定义

由关键字namespace + 命名空间名字，之后接一对花括号，里面放入具体需要声明和定义。
```
namespace 命名空间的名字{
	// 具体的声明
}
```
- 花括号中可以出现能够全局作用域出现的任意声明：类、变量、函数、接口以及其他的命名空间。

4. 命名空间的调用

通过export 关键字将需要引用的类、变量、函数、接口以及其他的命名空间导出
- 在同一个文件中，直接使用即可。如果是对象，属性这些直接使用“完全限定名”. 的方式访问，如果是接口直接实现即可。
- 如果分离到多个文件时，则应使用三斜杠 /// 引用它，语法格式如下：
```
  	/// <reference path = "xxx.ts"/>
    // xxx.ts就是需要引用的命名空间的ts文件
```

5. 命名空间的示例

定义

namespace Computer {
  export const PI = 3.14;
  export function sum(first: number, second: number) {
    return first + second;
  }
}

// 在外部使用命名空间
console.log(Computer.PI);
console.log(Computer.sum(3, 4));

拆分到多个文件中

computer1.ts

namespace Computer {
  export const PI = 3.14;
}

computer2.ts

namespace Computer {
  export function sum(first: number, second: number) {
    return first + second;
  }
}

在index.ts中引用

console.log(Computer.PI);
console.log(Computer.sum(3, 4));

如何使用？

方式一

使用tsc命令将其编译成js文件

在index.html中,通过script标签引用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!--引用-->
    <script src="./dist/computer1.js"></script>
    <script src="./dist/computer2.js"></script>
    <script src="./dist/index.js"></script>
  </head>
  <body>
  </body>
</html>

编译后的computer1.js

"use strict";
var Computer;
(function (Computer) {
    Computer.PI = 3.14;
})(Computer || (Computer = {}));

编译后的computer2.js

"use strict";
var Computer;
(function (Computer) {
    function sum(first, second) {
        return first + second;
    }
    Computer.sum = sum;
})(Computer || (Computer = {}));

编译后的index.js

"use strict";
///<reference path="computer1.ts"/>
///<reference path="computer2.ts"/>
console.log(Computer.PI);
console.log(Computer.sum(3, 4));

方式二

使用tsc --outfile 编译到的目标文件需要编译的文件1 需要编译的文件2 需要编译的文件3 ...

需要编译的文件，保持依赖关系

tsc --outfile index.js computer1.ts computer2.ts index.ts

在index.html中只需要引用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!--引用-->
    <script src="./dist/index.js"></script>
  </head>
  <body>
  </body>
</html>

编译后的index.js

var Computer;
(function (Computer) {
    Computer.PI = 3.14;
})(Computer || (Computer = {}));
var Computer;
(function (Computer) {
    function sum(first, second) {
        return first + second;
    }
    Computer.sum = sum;
})(Computer || (Computer = {}));
console.log(Computer.PI);
console.log(Computer.sum(3, 4));

方式三

通过///<reference path="…" 引入文件

在index.ts中直接引用computer1.ts、computer2.ts文件

///<reference path="computer1.ts"/>
///<reference path="computer2.ts"/>
console.log(Computer.PI);
console.log(Computer.sum(3, 4));

使用tsc命令
```
tsc --outfile index.js index.ts 
```

编译后的index.js

var Computer;
(function (Computer) {
    Computer.PI = 3.14;
})(Computer || (Computer = {}));
var Computer;
(function (Computer) {
    function sum(first, second) {
        return first + second;
    }
    Computer.sum = sum;
})(Computer || (Computer = {}));
///<reference path="computer1.ts"/>
///<reference path="computer2.ts"/>
console.log(Computer.PI);
console.log(Computer.sum(3, 4));

不要跟我说对不起

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习篇-TypeScript-命名空间

文章目录一、TypeScript-命名空间1.命名空间是什么2. 命名空间的好处3. 命名空间的定义4. 命名空间的调用5. 命名空间的示例一、TypeScript-命名空间1.命名空间是什么使用namespace关键字将一段代码包裹起来，这段被包裹起来的逻辑代码就是一个命名空间。2. 命名空间的好处在单一的空间中，如果存在两个变量或函数的名字完全相同，就会出现冲突。为了解决这类问题，只要将相同的变量和函数放在不通的空间中就可以完美解决此类烦恼。代码层面的归类和管理。将有相似功能的代码都归
复制链接

扫一扫