TypeScript命名空间和模块

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

命名空间(Namespace)

命名空间(Namespace)使用场景

第三方库

兼容性

模块

3. 命名空间与模块的对比


命名空间(Namespace)

在 TypeScript 中,命名空间是一种将代码封装在一个特定名称下的方式,以防止全局作用域污染并避免命名冲突。命名空间在 TypeScript 中非常重要,因为它们为模块化和封装提供了灵活的选项。

创建命名空间的语法如下:

namespace MyNamespace {export const myVar: number = 10;export function myFunction(): void {console.log("Hello from MyNamespace");}
}

在此例中,我们创建了一个名为MyNamespace的命名空间,该命名空间内有一个变量myVar和一个函数myFunctionexport关键字允许我们从命名空间外部访问这些元素。

命名空间中的元素可以通过以下方式访问:

console.log(MyNamespace.myVar); // 输出:10
MyNamespace.myFunction(); // 输出:Hello from MyNamespace

我们也可以使用嵌套的命名空间:

namespace ParentNamespace {export namespace ChildNamespace {export const myVar: number = 20;}
}
console.log(ParentNamespace.ChildNamespace.myVar); // 输出:20

命名空间(Namespace)使用场景

在 TypeScript 的早期版本中,命名空间被广泛地使用来组织和包装一组相关的代码。然而,随着 ES6 模块系统(ES6 Modules)的出现和广泛使用,命名空间的用法变得越来越少,现在被视为一种遗留的方式来组织代码。

第三方库

一些第三方库仍然使用命名空间来组织自己的代码,并提供命名空间作为库的入口点。在这种情况下,我们需要使用命名空间来访问和使用库中的类型和函数。

namespace MyLibrary {export function myFunction() {// ...}
}MyLibrary.myFunction();

兼容性

在一些遗留的 JavaScript 代码或库中,命名空间仍然是一种常见的组织代码的方式。如果我们需要与这些代码进行交互,我们可能需要创建命名空间来适应它们。

// legacy.js
var MyNamespace = {myFunction: function() {// ...}
};MyNamespace.myFunction();

在上面的示例中,我们演示了命名空间的几个使用场景。第一个示例展示了如何使用命名空间访问和使用第三方库的函数。第二个示例展示了如何使用命名空间来管理全局状态。第三个示例展示了如何在与遗留 JavaScript 代码进行交互时创建命名空间。

虽然在现代 TypeScript 开发中,模块是更常见和推荐的代码组织方式,但命名空间仍然在特定的情况下具有一定的用处,并且在与一些特定的库或代码进行交互时可能是必需的。

模块

在 TypeScript 中,模块是另一种组织代码的方式,但它们更关注的是依赖管理。每个模块都有其自己的作用域,并且只有明确地导出的部分才能在其他模块中访问。

创建和使用模块的方式如下:

myModule.ts文件中:

export const myVar: number = 10;
export function myFunction(): void {console.log("Hello from myModule");
}

在另一个文件中导入和使用模块:

import { myVar, myFunction } from './myModule';console.log(myVar); // 输出:10
myFunction(); // 输出:Hello from myModule

在 TypeScript 中,我们可以使用模块解析策略(如 Node 或 Classic),以确定如何查找模块。这些策略在 tsconfig.json 文件的 compilerOptions 选项下的 moduleResolution 选项中定义。

3. 命名空间与模块的对比

虽然命名空间和模块在某种程度上有所相似,但它们有以下几个关键区别:

  1. 作用域:命名空间是在全局作用域中定义的,而模块则在自己的作用域中定义。这意味着,在模块内部定义的所有内容默认情况下在模块外部是不可见的,除非显式地导出它们。

  2. 文件组织:命名空间通常用于组织在同一文件中的代码,而模块则是跨文件进行组织。

  3. 依赖管理:模块关注的是如何导入和导出功能,以便管理代码之间的依赖关系。相比之下,命名空间并未对依赖管理提供明确的支持。

  4. 使用场景:随着 ES6 模块语法的普及,现代 JavaScript 项目通常更倾向于使用模块来组织代码。然而,对于一些遗留项目或那些需要将多个文件合并为一个全局可用的库的场景,命名空间可能更为合适。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77892.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux rz乱码文件删除

通过rz上传文件的时候经常会遇到 文件乱码问题,删又删不掉。 使用rz -be的方法上传 遇到乱码文件操作步骤 1. ls -i # 列出文件的编号 2. find . -inum 29229139 -delete # 根据编号删除文件 find 需要扫描的路径 -inum 文件编号 -delete

动态调用微服务

主要由三个文件组成 DynamicService.java DynamicFeignClientFactory.java DynamicClient.java 代码 package org.jeecg.modules.cloud.feign;import org.springframework.cloud.openfeign.SpringQueryMap; import org.springframework.web.bind.annotation.GetMapping; im…

RabbitMQ MQTT集群方案官方说明

RabbitMQ MQTT 官方网说明 官方地址: https://www.rabbitmq.com/mqtt.html 从3.8开始,该MQTT插件要求存在一定数量的群集节点。这意味着三分之二,五分之三,依此类推。 该插件也可以在单个节点上使用,但不支持两个节点的集群。 如…

Unity粒子系统ParticleSystem各模块及其参数学习

粒子系统控制面板默认有4个模块:Particle System(主模块),Emission(发射模块), Shape(形状模块),Renderer(渲染器模块) 1.Particle …

Vue.js not detected解决方法

扩展程序》管理扩展程序》详情》允许访问文件地址打开

软件测试7大误区

随着软件测试对提高软件质量重要性的不断提高,软件测试也不断受到重视。但是,国内软件测试过程的不规范,重视开发和轻视测试的现象依旧存在。因此,对于软件测试的重要性、测试方法和测试过程等方面都存在很多不恰当的认识&#xf…

Vulnhub系列靶机---HarryPotter-Fawkes-哈利波特系列靶机-3

文章目录 信息收集主机发现端口扫描dirsearch扫描gobuster扫描 漏洞利用缓冲区溢出edb-debugger工具msf-pattern工具 docker容器内提权tcpdump流量分析容器外- sudo漏洞提权 靶机文档:HarryPotter: Fawkes 下载地址:Download (Mirror) 难易程度&#xff…

WEBPACK基础配置【总结】

webpack打包原理: webpack是一个js应用程序的静态模块打包工具,当webpack处理应用程序时,它的内部构建一个依赖图,会映射项目中需要打包的每个模块,并生成一个或多个bundle包。因此我们会在web pack.config.js中配置各…

【Datawhale简单学点大模型笔记】大模型的有害性

参考: https://github.com/datawhalechina/so-large-lm/blob/main/第三章:大模型的有害性-上.md https://github.com/datawhalechina/so-large-lm/blob/main/第四章:大模型的有害性-下.md 大模型的有害性 性能差异社会偏见和刻板印象有害信…

C++面试/笔试准备,资料汇总

文章目录 后端太卷,建议往嵌入式,qt,测试,音视频,C一些细分领域投简历。有任何疑问评论区聊,我看到了回复 C面试/笔试准备,资料汇总自我介绍项目实习尽可能有1.编程语言:一.熟悉C语言…

【牛客面试必刷TOP101】Day4.BM15删除有序链表中重复的元素-I和BM17二分查找-I

作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:牛客面试必刷TOP101 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!!&…

前端面试题JS篇(6)

ES6 Module 和 CommonJS 模块的区别: CommonJS 是对模块的浅拷⻉,ES6 Module 是对模块的引⽤,即 ES6 Module 只存只读,不能改变其值,也就是指针指向不能变,类似 const; import 的接⼝是 read-o…

ATFX汇市:离岸人民币大幅升值,昨日盘中跌破7.3关口

ATFX汇市:美国CPI数据即将公布之际,周一美元指数大跌,带动离岸人民币升值0.85%,实现3月14日以来的最大单日升值幅度,当日汇率(USDCNH)最低触及7.292,突破7.3000关口。消息面上&#…

【LangChain系列 8】Prompt模版——少样本prompt模版(二)

原文地址:【LangChain系列 8】Prompt模版——少样本prompt模版(二) 本文速读: 固定少样本prompt模版 动态少样本prompt模版 在上篇文章中介绍了少样本模版的基本用法,本文将介绍 对话模型(chat model) 中 少样本prompt模版的用法。 LangCh…

Gogs国内大佬开发的git私有服务

Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。 gogs官网:https://gogs.io/ github地址:https://github.com/gogs/gogs/tree/main/docker docker安装gogs服务 docker pull gogs/gogs 启动gogs容器 docker run --namegogs -…

《TCP/IP网络编程》阅读笔记--基于UDP的服务器端/客户端

目录 1--TCP和UDP的主要区别 2--基于 UDP 的数据 I/O 函数 3--基于 UDP 的回声服务器端/客户端 4--UDP客户端Socket的地址分配 5--UDP存在数据边界 6--UDP已连接与未连接的设置 1--TCP和UDP的主要区别 ① TCP 提供的是可靠数据传输服务,而 UDP 提供的是不可靠…

现成Hadoop配置,图文手把手交你

为了可以更加快速的可以使用Hadoop,便写了这篇文章,想尝试自己配置一下的可以参考从零开始配置Hadoop,图文手把手教你,定位错误 资源 1.两台已经配置好的hadoop 2.xshellVmware 链接:https://pan.baidu.com/s/1oX35…

性能测试 —— Jmeter定时器

固定定时器 如果你需要让每个线程在请求之前按相同的指定时间停顿,那么可以使用这个定时器;需要注意的是,固定定时器的延时不会计入单个sampler的响应时间,但会计入事务控制器的时间 1、使用固定定时器位置在http请求中&#xf…

用 Github Codespaces 免费搭建本地开发测试环境

如何丝滑地白嫖一个本地开发环境?怎么新建一个代码空间? 1:通过Github网页新建2:通过VSCode插件新建 为代码创建相应的开发测试环境 如何丝滑地白嫖一个本地开发环境? 使用Codespaces为开发者解决这样的痛点&#xf…

SQL约束

约束 1.概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。 2.目的:保证数据库中数据的正确、有效性和完整性。 3.分类: 约束描述关键字非空约束限制该字段的数据不能为nullNOT NULL唯一约束保证该字段的所有数据…