当前位置: 首页 > news >正文

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 项目通常更倾向于使用模块来组织代码。然而,对于一些遗留项目或那些需要将多个文件合并为一个全局可用的库的场景,命名空间可能更为合适。

相关文章:

TypeScript命名空间和模块

🎬 岸边的风:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 命名空间(Namespace) 命名空间(Namespace)使用场景 第三方库 兼容…...

C++学习笔记--函数重载(1)

文章目录 序言一、洞悉函数重载决议1.1、重载决议的基本流程1.2、Name Lookup1.2.1、Qualified Name Lookup1.2.1.1、Class Member Lookup1.2.1.2、Namespace Member Lookup 1.2.2、Unqualified Name Lookup1.2.2.1、Usual Unqualified Lookup1.2.2.2、Argument Dependant Look…...

交叉编译poco-1.9.2

目录 一、文件下载二、编译三、可能遇到的问题和解决方法3.1 error "Unknown Hardware Architecture."3.2 error Target architecture was not detected as supported by Double-Conversion一、文件下载 下载地址:poco-1.9.2 二、编译 解压目录后打开build/config/…...

C++中如何处理超长的数字(long long类型的整数都无法存储的)

C中如何处理超长的数字(long long类型的整数都无法存储的) 在 C中,如果数字超出了 long long 类型的范围,可以考虑使用字符串或第三方库(如 Boost.Multiprecision)来表示和处理超长数字。要使用第三方库需…...

RabbitMQ MQTT集群方案官方说明

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

深圳唯创知音电子将参加IOTE 2023第二十届国际物联网展•深圳站

​ 2023年9月20~22日,深圳唯创知音电子将在 深圳宝安国际会展中心(9号馆9B1)为您全面展示最新的芯片产品及应用方案,助力传感器行业的发展。 作为全球领先的芯片供应商之一,深圳唯创知音电子一直致力于为提供高质量、…...

《TCP/IP网络编程》阅读笔记--I/O复用

目录 1--基于I/O复用的服务器 2--select()函数 3--基于I/O复用的回声服务器端 4--send()和recv()函数的常用可选项 5--readv()和writev()函数 1--基于I/O复用的服务器 多进程服务器端具有以下缺点:当有多个客户端发起连接请求时,就会创建多个进程来…...

[C#] 允许当前应用程序通过防火墙

通常在一台装有防火墙的电脑上运行程序的场合,往往会弹出对话框提示:是否允许执行该应用程序。 我们在开发软件的时候,可以事先在软件里面设置当前软件为防火墙允许通过的软件。这样,用户在使用时就可以避开前面提到的弹框了。 在…...

帆软FineReport决策报表Tab实现方案

最近有个需求是要做首页展示,为了减少前端工作量,利用采购的帆软FineReport来实现,记录过程,方便备查。 需求 做个Tab页,实现多个页切换。 方案一、利用帆软自带切换 帆软自带的有Tab控件,可实现切换&a…...

只打印文名

CMakeLists.txt set(CMAKE_C_FLAGS "-O0 -ggdb -D__NOTDIR_FILE__$(notdir $<)") // set(CMAKE_C_FLAGS "-O0 -ggdb -D__NOTDIR_FILE__$(notdir $<) -D__FILENAME__$(subst $(dir $<),,$<)")C文件 #include <stdio.h>#ifdef __NOTDIR_…...

【经典小练习】JavaSE—拷贝文件夹

&#x1f38a;专栏【Java小练习】 &#x1f354;喜欢的诗句&#xff1a;天行健&#xff0c;君子以自强不息。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f384;效果&#x1f33a;代码&#x1f6f8;讲解&#x…...

FPGA-结合协议时序实现UART收发器(六):仿真模块SIM_uart_drive_TB

FPGA-结合协议时序实现UART收发器&#xff08;六&#xff09;&#xff1a;仿真模块SIM_uart_drive_TB 仿真模块SIM_uart_drive_TB&#xff0c;仿真实现。 vivado联合modelsim进行仿真。 文章目录 FPGA-结合协议时序实现UART收发器&#xff08;六&#xff09;&#xff1a;仿真模…...

Spring Boot集成EasyExcel实现数据导出

在本文中&#xff0c;我们将探讨如何使用Spring Boot集成EasyExcel库来实现数据导出功能。我们将学习如何通过EasyExcel库生成Excel文件&#xff0c;并实现一些高级功能&#xff0c;如支持列下拉和自定义单元格样式&#xff0c;自适应列宽、行高&#xff0c;动态表头 &#xff…...

EasyExcel3.0读(日期、数字或者自定义格式转换)

EasyExcel 3.0读(日期、数字或者自定义格式转换) 依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.2.1</version> </dependency>对象 package com.xiaobu.entity.vo;import …...

浅谈C++|STL之vector篇

一.vector的基本概念 vector是C标准库中的一种动态数组容器&#xff0c;提供了动态大小的数组功能&#xff0c;能够在运行时根据需要自动扩展和收缩。vector以连续的内存块存储元素&#xff0c;可以快速访问和修改任意位置的元素。 以下是vector的基本概念和特点&#xff1a; 动…...

微信、支付宝修改步数【小米运动】

简介 小米运动是一款流行的健身应用,可以记录用户的步数和运动数据。然而,有些用户希望能够修改步数,以达到一些特定的目的。本文将介绍一个Python脚本,可以帮助用户实现修改小米运动步数的功能。 正文 脚本介绍: 本脚本是一个Python脚本,用于修改小米运动步数。通过模…...

stu02-初识HTML

1.HTML概述 &#xff08;1&#xff09;HTML是Hyper Text Mark-up Language的首字母缩写。 &#xff08;2&#xff09;HTML是一种超文本标记语言。 &#xff08;3&#xff09; 超文本&#xff1a;指除了文字外&#xff0c;页面内还可以包含图片、链接、甚至音乐、视频等非文字元…...

软件测试7大误区

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

【深度学习】 Python 和 NumPy 系列教程(十二):NumPy详解:4、数组广播;5、排序操作

目录 一、前言 二、实验环境 三、NumPy 0、多维数组对象&#xff08;ndarray&#xff09; 多维数组的属性 1、创建数组 2、数组操作 3、数组数学 4、数组广播 5、排序操作 1. np.sort() 函数 2. np.argsort() 函数 3. ndarray.sort() 方法 4. 按列或行排序 5. n…...

CSS宽度问题

一、魔法 为 DOM 设置宽度有哪些方式呢&#xff1f;最常用的是配置width属性&#xff0c;width属性在配置时&#xff0c;也有多种方式&#xff1a; widthmin-widthmax-width 通常当配置了 width 时&#xff0c;不会再配置min-width max-width&#xff0c;如果将这三者混合使…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...