TypeScript的命名空间-NameSpace

最新推荐文章于 2025-10-25 15:37:21 发布
原创 最新推荐文章于 2025-10-25 15:37:21 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #vscode #javascript

本文介绍了如何在TypeScript中使用命名空间（NameSpace）来管理全局变量，避免污染全局作用域。通过实例展示了从创建package.json、tsconfig.json，到编写page.ts和components.ts，并配置AMD模块和合并输出，详细解释了命名空间的使用方法和优势。同时，探讨了命名空间的嵌套以及在实际项目中的应用，帮助理解其在代码组织和封装上的作用。

TypeScript的命名空间-NameSpace

初识TypeScript的命名空间-NameSpace

新建个TSWeb文件夹，在VScode中打开文件夹，新建终端，在终端中输入

// 生成package.json
npm init -y // -y 所有的配置都选择默认的

再运行生成tsconfig.json

ts -init

创建一个入口文件：index.html
完成配置
在这里插入图片描述
在这里插入图片描述
在src中创建page.ts，写入
在这里插入图片描述
在终端中运行 编译生成page.js

tsc

生成代码如下
在这里插入图片描述
打开文件夹和浏览器，把index.html拖拽到浏览器中，显示如下：
在这里插入图片描述

这里面代码中有个问题：都是全局变量。
代码量一大，这样操作会使全局变量过多，造成全局变量污染。
所以我们在就要使用-NameSpace
在page.ts 中用

namespace Home{
	class Header{.........}
	class Content{.........}
	class Footer{............}
	export c;ass Page{........} //暴露一个
}

再运行,再次编译更新page.js

tsc

在浏览器中F12打开console在里面输入查找Home.Footer、Home.Page
可以看到Home.Footer是显示undefined的，只有Home.Page是有显示的
在这里插入图片描述

namespace的好处： 让我们的全局变量变得很少，实现了基本的封装，减少了全局变量的污染。

深入了解TypeScript的命名空间-NameSpace

在src中新建一个components.ts
在这里插入图片描述
page.ts要修改一下
在这里插入图片描述
在index.html 中引用多个script会造成代码沉余，所以去tsconfig.json进行两个配置

"module": "amd", //把commonjs改成amd,因为commonjs不支持 outFile
"outFile": "./build/page.js",  //多个ts文件编译生成同一个json文件

命名空间也可进行嵌套
在这里插入图片描述

在终端运行编译

tsc

刷新浏览器页面，在控制台中可显示
在这里插入图片描述

TypeScript入门基础(十一)——命名空间
weixin_43298884的博客
04-26 534
目录 一、命名空间的定义 二、引用文件 三、命名空间嵌套 一、命名空间的定义 格式： typeScript 定义命名空间关键字：namespace 以下定义了一个SpaceName命名空间。 如果我们在外部需要使用命名空间内的接口和类，可以使用给接口和类添加关键字：export 例如下面定义的InterfaceName 和ClassName，皆可在外部调用。 namespace SpaceName { export interface InterfaceName { .
17_TypeScript 命名空间 --[深入浅出 TypeScript 测试]
桃园码工的博客
01-11 627
TypeScript 的命名空间（Namespaces）是用于组织代码的一种方式，可以将相关的类、接口、函数和变量封装在一起。使用命名空间可以帮助避免全局作用域的污染，并且可以使代码更模块化和易于维护。从 TypeScript 1.5 开始，推荐使用 ES6 模块系统 (`import` 和 `export`) 来代替命名空间，因为模块提供了更好的组织结构和支持异步加载等特性。然而，在某些情况下，如在非模块化的环境中或需要向后兼容时，命名空间仍然是有用的。
学习篇-TypeScript-命名空间
东东爱编码博客
06-06 426
文章目录一、TypeScript-命名空间1.命名空间是什么2. 命名空间的好处3. 命名空间的定义4. 命名空间的调用5. 命名空间的示例 一、TypeScript-命名空间 1.命名空间是什么 使用namespace关键字将一段代码包裹起来，这段被包裹起来的逻辑代码就是一个命名空间。 2. 命名空间的好处 在单一的空间中，如果存在两个变量或函数的名字完全相同，就会出现冲突。为了解决这类问题，只要将相同的变量和函数放在不通的空间中就可以完美解决此类烦恼。 代码层面的归类和管理。将有相似功能的代码都归
TypeScript基础篇三: TypeScript的命名空间
我的博客
12-29 757
TypeScript基础篇一: HelloWorld TypeScript TypeScript基础篇二: 使用TypeScript编写接口和类 TypeScript基础篇三: TypeScript的命名空间 文章目录一、背景二、命名空间的定义三、命名空间应用实例 一、背景 我们在创建项目时需要一种命名方式来组织代码，避免与其他对象产生命名冲突。因此，我们需要把代码包裹到一个命名空间内，而不是把它们放在全局命名空间下。本文章将介绍命名空间的应用方法。 二、命名空间的定义 命名空间最明确的目的就是解决重
阮一峰《TypeScript 教程》学习笔记——namespace
最新发布
qq_41422946的博客
10-25 1323
TypeScript 的 namespace 是早期代码组织方案，通过 namespace 关键字封装代码，需 export 暴露成员，支持嵌套和合并。
TypeScript学习笔记（七） - 命名空间
weixin_30567225的博客
09-04 670
本篇将介绍TypeScript的命名空间，并简单说明一下与模块的区别。 在之前的例子里，有如下一段代码，通过修改这段代码来演示命名空间的用法。 1 interface Animal { 2 name: string; 3 eat(): void; 4 } 5 6 class Dog implements Animal { 7 na...
TypeScript-命名空间
lihui61357457的博客
06-07 360
1.什么是命名空间? 2.命名空间和模块区别 调用其他位置的命名空间的方法 ./56/test.ts
npm 包的命名空间介绍，以及@typescript-eslint/typescript-eslint
baiduguoyun的博客
10-27 1811
npm 包的命名空间是一个重要的概念，用于组织和管理相关的包。通过命名空间，开发者可以避免命名冲突、增强包的可读性和可维护性。以下是关于 npm 命名空间的详细介绍，并以作为示例。
TypeScript 命名空间和模块
咸鱼滚滚
08-08 1051
TypeScript 1.5里名已经发生了变化：“内部模块”现在称做“命名空间”。也就是说像这样的写法，在当前推荐的写法中应该是。“外部模块”现在简称为“模块”，通常通过import和export关键字来实现模块间的功能共享和代码组织。这是为了让 TypeScript 与 ECMAScript 2015（ES6）的术语保持一致，从而减少混淆并提高与主流 JavaScript 标准的兼容性。
TypeScript命名空间 命名空间块化.zip
11-05
TypeScript命名空间是通过`namespace`关键字定义的，它可以将相关的类型、接口、函数等封装在一起，形成一个独立的模块。例如： ```typescript namespace MyModule { export interface MyInterface {} export ...
typescript-definition-style-guide：用于将类型定义添加到我的npm包中的样式指南
02-06
- 使用`namespace MyNamespace {}`来定义命名空间。 9. **类型断言（Type Assertions）**： - 当编译器无法确定正确的类型时，可以使用类型断言来告诉编译器如何解析值。 - 两种常见形式是`<Type>value`和`value...
typescript 命名空间
蓝with黑的博客
10-08 358
命名空间 任何使用module关键字声明的一个内部模块的地方都应该使用namespace关键字来替换。 第一步 定义一个简单的字符串验证器，假设你会使用它们来验证表单里的yoghurt输入或验证外部数据 interface StringValidator{ isAcceptable(s:string): boolean } let letterRegexp = /^[A-Za-z]+$/ let numberRegexp = /^[0-9]+$/
typescript的命名空间
马优晨
12-17 1235
命名空间的作用 防止变量冲突； 构建大型项目时候大家可以分成不同的模块开发； 命名空间写法 命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。 namespace + 空间名； 命名空间内的对象通过export关键字对外暴露； 命名空间引入 通过import可以引入这个模块，并且在在引用命名空间时，可以通过import关键字起一个别名 命名空间实例 namespace shuai...
Typescript中的命名空间
yinge0508的博客
02-03 880
命名空间：在大量代码的情况下，为了防止各种变量命名冲突，可将相似功能的函数，类，接口房知道命名空间内； ts的命名空间可以将代码包裹起来，只对外暴露需要外部访问的对象，命名空间内的对象通过export暴露 命名空间和模块的区别：命名空间是内部模块，主要用于组织代码，避免命名冲突；模块：ts外部模块的简称，侧重代码的重用，一个模块里可能有多个命名空间； namespace A { interface Animal { name: string; eat(): void; .
TypeScript 中的命名空间
lostdeer
06-02 560
在 TypeScript 中，使用namespace关键字可以定义一个命名空间。// 定义命名空间。
浅谈typeScript命名空间
YangJing17的博客
05-24 1111
命名空间简介 命名空间（在早期版本的 TypeScript 中称为“内部模块”）是一种用于组织和分类代码的 TypeScript 特定方式，使你能够将相关代码组合在一起。 命名空间允许将与业务规则相关的变量、函数、接口或类分组到一个命名空间，将安全性分组到另一个命名空间。 命名空间内的代码将从全局范围拉入到命名空间范围。 这种布局有助于避免全局命名空间中组件之间的命名冲突，并且在与可能使用类似组件名称的分布式开发团队合作时也会有好处。 命名空间特点 减少全局范围内的代码量，限制“全局范围污染”。 为名称提
10、TypeScript 命名空间
红鹰
07-12 156
命名空间命名空间命名空间案例BigDog.tx 项目代码SmallDog.tx 项目代码index.ts 使用命名空间Node环境执行JS 命名空间 在代码内部为了避免命名冲突，组织代码的手段； 命名空间内部对象及命名空间都需要export，外部才能够访问； 3.4.5版本之后，通过import {} from方式引入命名空间； 命名空间案例 BigDog.tx 项目代码 //命名空间也需要export，外部才能够使用 export namespace com.hongying{ //外部使用
TypeScript-命名空间篇
热门推荐
往事不回头,余生不将就
07-25 1万+
简介 命名空间: 在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内 同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来， 只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。 命名空间和模块的区别： 命名空间：内部模块，主要用于组织代码，避免命名冲突。 模 块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。 使用namespa.
【TypeScript入门】TypeScript入门篇——命名空间
看世界，也找自己
01-10 3092
命名空间是程序设计者命名的内存区域，程序设计者根据需指定一些有名字的空间域，把一些全局实体分别存放到各个命名空间中，从而与其他全局实体分隔开。通俗的说，每个名字空间都是一个名字空间域，存放在名字空间域中的全局实体只在本空间域内有效。名字空间对全局实体加以域的限制，从而合理的解决命名冲突。
typescript命名空间使用场景
01-21
### TypeScript 命名空间的适用情况 当处理较小规模的应用程序或特定功能模块时，如果希望避免全局命名污染并保持代码整洁有序，则可以考虑使用命名空间。然而，在现代Web开发实践中更倾向于采用ES6模块化方案[^3]。 对于遗留系统的迁移工作而言，利用命名空间能够逐步过渡到更加现代化的架构设计模式下而不至于一次性重构整个项目结构；另外，在某些特殊场合比如编写第三方库的时候也可以借助命名空间来封装内部实现细节从而保护私有成员不受外界干扰[^1]。 ### 使用场景示例 #### 场景一：防止变量冲突 假设在一个页面中有多个独立的功能区域都需要定义名为`User`的对象类型： ```typescript // 定义第一个命名空间中的 User 类型 namespace AdminPanel { export interface User { id: number; username: string; role: "admin"; } } // 定义第二个命名空间中的 User 类型 namespace PublicSite { export class User { constructor(public name: string, public email?: string) {} } } ``` 通过这种方式可以在不引起任何名称冲突的情况下分别创建两个具有相同名字但含义不同的实体[^4]。 #### 场景二：模拟类继承关系 有时为了简化依赖注入过程或者模仿面向对象编程里的继承机制，可以通过嵌套的方式构建层次化的命名空间体系： ```typescript namespace Shapes { export namespace Circle { export function draw(radius: number): void { console.log(`Drawing circle with radius ${radius}`); } } export namespace Rectangle { export function draw(width: number, height: number): void { console.log(`Drawing rectangle of width=${width},height=${height}`); } } } Shapes.Circle.draw(5); // Drawing circle with radius 5 Shapes.Rectangle.draw(10,20);// Drawing rectangle of width=10,height=20 ``` 上述例子展示了如何基于几何图形这一主题建立起一组相互关联却又各自独立存在的子命名空间集合。 ### 最佳实践建议 - **谨慎选用**：尽管命名空间有助于解决一些实际问题，但由于其局限性和潜在风险（如增加理解成本），除非必要否则应优先尝试其他解决方案例如ES Modules； - **合理规划**：一旦决定引入命名空间特性就要做好充分准备，包括但不限于提前构思好整体布局框架、制定清晰易懂的名字约定规则等措施以确保后续维护工作的顺利开展； - **适度运用**：即使是在适合应用命名空间的情境里也应当控制好数量范围以免过度分隔而导致难以追踪调试等问题的发生； - **文档记录**：及时更新相关说明文件以便团队成员之间共享知识经验共同进步。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值