TypeScript之命名空间与模块

news2024/11/24 4:07:49

一、模块

TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块

相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的

例如我们在在一个 TypeScript 工程下建立一个文件 1.ts,声明一个变量a,如下:

const a = 1

然后在另一个文件同样声明一个变量a,这时候会出现错误信息

提示重复声明a变量,但是所处的空间是全局的

如果需要解决这个问题,则通过import或者export引入模块系统即可,如下:

const a = 10;

export default a

typescript中,export关键字可以导出变量或者类型,用法与es6模块一致,如下:

export const a = 1
export type Person = {
    name: String
}

通过import 引入模块,如下:

import { a, Person } from './export';

二、命名空间

命名空间一个最明确的目的就是解决重名问题

命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的

这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中

TypeScript 中命名空间使用 namespace 来定义,语法格式如下:

namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }
   export class SomeClassName {      }
}

以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字

使用方式如下:

SomeNameSpaceName.SomeClassName

命名空间本质上是一个对象,作用是将一系列相关的全局变量组织到一个对象的属性,如下:

namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
  // ...
  export let z = 26;
}

编译成js如下:

var Letter;
(function (Letter) {
    Letter.a = 1;
    Letter.b = 2;
    Letter.c = 3;
    // ...
    Letter.z = 26;
})(Letter || (Letter = {}));

三、区别

  • 命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象,使用起来十分容易。但就像其它的全局命名空间污染一样,它很难去识别组件之间的依赖关系,尤其是在大型的应用中

  • 像命名空间一样,模块可以包含代码和声明。 不同的是模块可以声明它的依赖

  • 在正常的TS项目开发过程中并不建议用命名空间,但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间,主要作用是给编译器编写代码的时候参考使用

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

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

相关文章

Linux 网络流量监控利器 iftop命令详解及实战

简介 iftop 是什么 在 Linux 系统下即时监控服务器的网络带宽使用情况,有很多工具,比如 iptraf、nethogs 等等,但是推荐使用小巧但功能很强大的 iftop 工具。 iftop 是 Linux 系统一个免费的网卡实时流量监控工具,类似于 top 命令…

智能防雷浪涌保护器的行业应用

智能浪涌保护器是一种能够自动监测和控制电涌保护器(SPD)的工作状态,实现SPD的自我保护和远程管理的设备。智能防雷是一种将云计算、移动互联网和物联网技术引入到综合防雷措施中,实现雷电预警、智能化防雷、智能化监测的系统。这…

群晖 | Synology Directory Server 批量导入用户 文件模板格式

目录 错误写法 正确写法 错误写法 在网上找到过类似的教程,但是一律都以失败告终: 正确写法 其实并不是只要写上前面的属性即可, 就算后面不写也需要使用 tab 补齐 ,所有的属性: 1.名称 2.密码 3.描述 4…

开源问答平台网站源码系统商业运营版源码系统 带完整的搭建教程

在我们现在的日常生活中,人们对于获取信息的需求越来越大,而问答平台作为一种快速、有效的信息获取方式,受到了广泛的关注和使用。同时,随着开源技术的普及和成熟,越来越多的开发者选择使用开源技术进行网站的开发和维…

几种常见的接地类型详解

接地作为一种应用最为广泛的电气安全措施,是指电力系统和电气装置的中性点、电气设备的外露导电部分和装置外导电部分经由导体与大地相连。接地的作用主要是防止人身遭受电击、设备和线路遭受损坏、预防火灾和防止雷击、防止静电损害和保障电力系统正常运行。按其功…

关于 iOS 报Multiple commands produceMultiple 错误的解决方案

今天在运行一个RN老项目的时候,报了一个下面的错误。 对应的信息如下: Multiple commands produce /Users/xzh/RN/work/cgv_app/ios/build/Debug-iphonesimulator/cgv_app.app/Entypo.ttf Multiple commands produce /Users/xzh/RN/work/cgv_app/ios/bu…

EASYX实现多物体运动

eg1:单个物体运动使用easyx实现单个小球的运动 #include <stdio.h> #include <easyx.h> #include <iostream> #include <math.h> #include <stdlib.h> #include <conio.h> #include <time.h> #define PI 3.14 #define NODE_WIDTH 4…

应用在阀门控制中的直流有刷驱动芯片

控制阀又称阀门&#xff0c;是流体运送系统中的控制部件&#xff0c;具有导流、截流、调节、节流、防止倒流、分流或溢流卸压等功能。阀门是一种用于控制流体&#xff08;液体、气体、粉体等&#xff09;流动的装置&#xff0c;广泛应用于工业生产、建筑、农业、能源等领域。 …

提高效率!5个顶级网页开发工具助你事半功倍!

1.WordPress–一站式网站建设工具 价格&#xff1a;基本版终身免费&#xff0c;个人版HK$30&#xff0c;高级版HK$63&#xff0c;商务版HK$1993 推荐指数&#xff1a;★★★★ WordPress是一个使用PHP语言开发的博客平台。它可以在PHP和MySQL数据库的服务器上设置自己的网站&…

从项目开始学习Vue——01

目录标题 一、官方文档二、搭建环境三、停止服务四、使用 webstorm 一键创建项目创建过程可能出现错误 五、启动和访问项目&#xff08;一&#xff09;启动&#xff08;二&#xff09;访问项目六、项目目录讲解 一、官方文档 https://cn.vuejs.org/ 二、搭建环境 参考&#…

新版开源UI千月影视APP源码/后端基于ThinkPHP框架/前后端完美匹配

源码简介&#xff1a; 开源UI千月影视APP源码&#xff0c;它是基于ThinkPHP框架&#xff0c;而且前后端完美匹配。这是一个广泛使用的PHP开发框架&#xff0c;具有稳定性和安全性方面的优势。 2023版本UI千月影视APP是一款提供电影、电视剧、综艺节目等视频内容的应用程序&am…

如何使用ps制作ico图标文件

如何使用ps制作ico图标文件 Chapter1 如何使用ps制作ico图标文件Chapter2 ICOFormat.8bi&#xff08;Photoshop Ico、Cur插件&#xff09;的下载使用1. ICOFormat.8bi的作用2. ICOFormat.8bi使用 Chapter3 ps手机计算机图标教程,手绘设计精美手机APP软件图标的PS教程步骤 01 制…

ArcGIS Pro怎么生成高程点

一般情况下&#xff0c;我们从公开渠道获取到的高程数据都是DEM数据&#xff0c;但是如果要用到CAD等软件内则需要用到高程点&#xff0c;那么如何从DEM提取高程点呢&#xff0c;这里为大家介绍一下生成方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是…

Java中的继承和多态

目录 1. 继承 1.1 为什么需要继承 1.2 继承概念 1.3 继承的语法 1.4 父类成员访问 1.4.1 子类中访问父类的成员变量 1.4.2 子类中访问父类的成员方法 1.5 super关键字 1.6 子类构造方法 1.7 super和this 1.8 再谈初始化 1.9 protected 关键字 1.10 继承方式…

【ElasticSearch系列-03】ElasticSearch的高级句法查询Query DSL

ElasticSearch系列整体栏目 内容链接地址【一】ElasticSearch下载和安装https://zhenghuisheng.blog.csdn.net/article/details/129260827【二】ElasticSearch概念和基本操作https://blog.csdn.net/zhenghuishengq/article/details/134121631【二】ElasticSearch的高级查询Quer…

酷开系统丨酷开会员,让你畅享无限的娱乐乐趣

你是否厌倦一成不变的平凡生活&#xff0c;渴望寻找一些刺激和乐趣&#xff1f;那么&#xff0c;让我们一起走进酷开会员的世界&#xff0c;那里充满了无限的可能性和无尽的乐趣&#xff01;酷开系统为会员群体精心打造的娱乐平台&#xff0c;汇聚了众多热门影视、音乐、游戏直…

【功能更新】JVS源码级低代码:列表页组件、标签栏、多流程等等

在数字化时代&#xff0c;低代码平台已经成为企业快速搭建应用、提升开发效率的首选工具。为了满足广大用户不断增长的需求&#xff0c;我们持续努力&#xff0c;对JVS低代码平台进行了一系列重要的更新和优化。本次更新如下&#xff1a; 新增&#xff1a; 1、表单中新增列表…

lua-web-utils库

lua--导入所需的库local web_utilsrequire("lua-web-utils")--定义要下载的URLlocal url"https://jshk.com.cn/"--定义代理服务器的主机名和端口号local proxy_port8000--使用web_utils的download函数下载URLlocal file_pathweb_utils.download(url,proxy_…

【通关选择】upload-labs通关攻略(全)

前提条件&#xff1a; 1.文件能够成功上传到服务器 2.攻击者能够知道文件的上传路径 upload-labs靶场 Pass-01&#xff08; 前端验证&#xff09; 三种方法解决思路 1.禁用客户端JavaScript弹窗 2.通过burp抓包&#xff0c;修改后缀名 3.f12删除return filecheck&#xff0…

uniapp原生插件之安卓原生插件集

插件介绍 安卓原生插件集&#xff0c;集成了常用的插件&#xff0c;包括设备&#xff0c;语音、文件、屏幕、usb、TCP等等 插件地址 安卓原生插件集 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 使用文档 插件集成内容 腾讯Bugly插件汉字转…