TS学习笔记八:命名空间

  本节介绍命名空间相关内容,包括命名空间的作用、实现方式、注意事项、命名空间和模块的区别等内容。
由于全局作用域下,有可能会导致命名冲突,使用命名空间之后就可以通过命名空间组织代码,将代码封装到不同的命名空间当中,这样就不会出现命名冲突的问题。

  1. 讲解视频

    TS学习笔记十三:命名空间


    TS学习笔记十四:命名空间和模块

  2. B站视频

    TS学习笔记十三:命名空间


    TS学习笔记十四:命名空间和模块

  3. 西瓜视频
    https://www.ixigua.com/7323775599850291738
    在这里插入图片描述

一、单文件命名空间

interface str{
}
const a:number = 1;
export class str1 implements str{}
export class str2 implements str{}

  上述实例若要继续扩展str时就需要对代码进行组织,以便于在记录他们的类型同时还不用担心与其它对象产生命名冲突,可以把定义包裹到一个命名空间中,使用命名空间中,可以定义哪些接口是外部可以访问的,需要使用export进行导出,内部的变量是实现的具体细节,不需要导出,因此在命名空间外部是不能访问的,由于是在命名空间之外访问,因此需要限定类型的名,如A.str,示例如下:

namespace A{
	export interface str{
	}
	const a:number = 1;
	export class str1 implements str{}
	export class str2 implements str{}
}
//通过A.str/A.str1/A.str2这种方式进行命名空间的调用

二、多文件中使用

  命名空间可以被分割到多个文件中,这样如果代码量比较大的情况下,就可以根据功能进行文件划分,提高代码的可维护性。
  命名空间在不同的文件中,仍然是同一个命名空间,使用时和在同一个文件中定义的命名空间一样,因为不同的文件之间存在依赖关系,所以需要使用引用标签告诉编译器文件之间的关联,如下:
A.ts

namespace V{
	export interface str{}
}

B.ts

namespace V{
	const a:number = 1;
	export calss str1 implements str{}
}

C.ts

namespace V{
	const b:number = 2;
	export class str2 implements str{}
}

test.ts

//调用时V.str/V.str1/V.str2通过这种方式调用,和在同一个文件中的使用方式一致。

  当设计多个文件时,必须确保所有编译后的代码都被加载了,有两种方式可以实现:

  1. 把所有的文件编译为一个输出文件,需要使用–outFile标记:
tsc --outFIle test.js test.ts

  编译器会根据源码中的引用标签自动地对输出进行排序,也可以单独的指定每个文件。
2. 可以编译每一个文件,每个源文件都会生成一个js文件,在html上通过

三、别名

  命名空间的访问需要A.B.C类似这样按照层级访问对应的内容,如果内容层级过多时使用起来就会很麻烦,可以使用起一个比较短的别名解决此问题,方法是import a = A.B.C,此时就可以直接使用a访问了,而不用A.B.C进行访问。此处的import a = 和加载模块的import x = require(‘A’)的语法是有区别的,此语法是为指定的符号创建一个别名,可以用此种方式给任意标识符创建别名,也包括导入的模块中的对象。

namespace A{
	export namespace B{
	export class C{}
	export class D{}
	}
}
import a = A.B;
let c = new a.C();

  上述示例中直接使用导入符号限定名赋值,并没有使用require关键字,和使用var相似,也适用于类型和导入的具有命名空间含义的符号,对于值来说,import 会生成与原始符号不同的引用,所以改变别名的var值并不会影响原始变量的值。

四、使用其它JS库

  有时候会使用不是ts编写的类库的类型,需要声明类库导出的API,由于大部分程序库只提供少数的顶级对象,此时可以用命名空间来表示。
  此处的声明不是外部程序的具体实现,而只是类型等的声明,需要编写在.d.ts文件中,类似于C语言中的.h文件。

五、外部命名空间

  许多库都是在全局对象定义它的功能,可以通过

declare namespace ${
	export interface Selecters{
	select:{
	(selector:string):Selection;
	(element:EventTarget):Selection;
	}
}
export interface Event{
	x:number;
	y:number;
}
export interface Base extends Selecters{
	event:Event;
	}
}
declare let a :$.Base;

六、命名空间及模块

  命名空间和模块具有不同的使用场景及规则,ts1.5中为了和es6中的术语保持一致,术语名发生了变化,内部模块现在被称做命名空间,外部模块被简称为模块,module x{}相当于现在推荐的写法namespace X{}

1.使用命名空间

  命名空间是位于全局命名空间下的一个普通带有名字的js对象,可以在多文件中使用,并通过–outFIle结合在一起,可以组织应用的代码结构,但是如果前端项目比较庞大时,很难识别命名空间之间的依赖关系。

2.使用模块

  模块和命名空间一样,模块可以包含代码和声明,不同的是模块可以声明它的依赖,模块会把依赖添加到模块加载器上,对于小型JS应用来说可能没必要,但是对大型应用就会使得应用具有较高的可维护性,模块也提供了更好的代码重用,更强的封闭性以及更好的使用工具进行优化。
  Node.js中模块是默认并推荐的组织代码的方式,从ES6开始,模块成为了语音内置的部分,应该会被所有正常的解释引擎所支持。

3.常见陷阱

(1) 对模块使用///
  不能使用///引用模块文件,应该使用import。使用import的时候编译器会首先尝试去查找相应路径下的.ts/.tsx/.d.ts,如果这些文件都找不到,编译器会查找外部模块声明。
(2) 不必要的命名空间
  不同的模块永远也不会在相同的作用域内使用相同的名字,因为使用模块时会为他们命名,所以完全没有必要把导出的符号包裹在一个命名空间里,如下:
a.ts

export namespace A{
		export class T{}
		export class B{}
}

使用时如下:

import * as a from “./a”;
let t = new a.A.T();

顶层的模块包括了T和B,使用起来就比较麻烦,需要多写一层。可以对上述示例进行改进:
a.ts

export class T{}
export class B{}

b.ts

import * as a from “./a”
let t = new a.T();

  不应该对模块使用命名空间,使用命名空间是为了逻辑分组和避免命名冲突,模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。
(3) 模块的取舍
  ts中模块文件与生成的js文件也是一一对应的,当指定的目标模块系统不同,可能无法链接多个模块源文件,如目标模块系统为commonjs或umd时,无法使用outFIle选项,ts1.8以上目标是amd或system时也能够使用outFIle。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GPTBots:利用FlowBot中的卡片和表单信息,提供丰富的客服体验

在当今的数字化时代,客户服务的形式和体验正在经历着前所未有的变革。传统的文字消息方式已经无法满足现代用户对于服务体验的多元化需求。那么,如何才能在这个信息爆炸的时代,让我们的服务方式更加个性化、多样化,从而提供更丰富…

MySQL-查询SQL语句

阅读目录 1.基础查询2.高级多表查询 回到顶部 1.基础查询 范围查询 在范围in select 字段 from 表名 where 字段 in (值,值); select id from stu where id in (2,3); 不在范围not in select 字段 from 表名 where 字段 in (值,值); select id from stu where id not in…

【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《RabbitMQ实战》。🎯🎯 &am…

JVM实战篇:GC调优

目录 一.GC调优的核心指标 1.1吞吐量(Throughput) 1.2延迟(Latency) 1.3内存使用量 二.GC调优的方法 2.1监控工具 Jstat工具 VisualVm插件 Prometheus Grafana 2.2诊断原因 GC日志 GC Viewer GCeasy 2.3常见的GC模…

从零学算法78

78.给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1: 输入:nums [1,2,3] 输出:[[],[1],[2],[1,2],[3…

分布式websocket即时通信(IM)系统保证消息可靠性【第八期】

b站上面本期视频版本,观看视频食用更佳!点击即可跳转,找不到视频可以直接搜索我 目前叫 呆呆呆呆梦 目前已经写的文章有。并且有对应视频版本。 git项目地址 【IM即时通信系统(企聊聊)】点击可跳转 sprinboot单体项目升级成sprin…

#GPU|LLM|AIGC#集成显卡与独立显卡|显卡在深度学习中的选择与LLM GPU推荐

区别 核心区别:显存,也被称作帧缓存。独立显卡拥有独立显存,而集成显卡通常是没有的,需要占用部分主内存来达到缓存的目的 集成显卡: 是集成在主板上的,与主处理器共享系统内存。 一般会在很多轻便薄型的…

Linux 网络传输学习笔记

这篇是混合《Linux性能优化实战》以及 《Wireshark网络分析就这么简单》的一些关于Linux 网络的学习概念和知识点笔记 ,主要记录网络传输流程以及对于TCP和UDP传输的一些影响因素 Linux 网络传输流程 借用一张倪朋飞先生的《Linux性能优化实战》课程中的图片 接收流…

第二证券:新手也能搞定!新股申购流程攻略

由于参加打新的获利概率较大,也就有许多投资者参加到新股申购中。那么,新股申购流程是怎样的?对此,本文将借助有关知识来展开讨论,为我们供给一个参阅思路。 投资者在参加网上打新时,应首要了解新股的申购日…

测试不拘一格——掌握Pytest插件pytest-random-order

在测试领域,测试用例的执行顺序往往是一个重要的考虑因素。Pytest插件 pytest-random-order 提供了一种有趣且灵活的方式,让你的测试用例能够以随机顺序执行。本文将深入介绍 pytest-random-order 插件的基本用法和实际案例,助你摆脱固定的测试顺序,让测试更具变化和全面性…

yolov5 opencv dnn部署自己的模型

yolov5 opencv dnn部署自己的模型 github开源代码地址使用github源码结合自己导出的onnx模型推理自己的视频推理条件c部署c 推理结果 github开源代码地址 yolov5官网还提供的dnn、tensorrt推理链接本人使用的opencv c github代码,代码作者非本人,也是上面作者推荐的…

【Electron】Electron是什么

1. Electron是什么 Electron是使用JavaScript、HTML和CSS构建跨平台(Windows、MacOs、Linux)的桌面应用。Electron其实就是一个可以展示网页内容的壳子,相当于一个独立的浏览器,可以提供给你一些接口,去调用系统的资源…

验证码短信API:企业级安全验证的必备工具

引言 随着数字经济的蓬勃发展,企业对在线服务的安全性要求越来越高。在这种背景下,验证码短信API作为一种有效的安全验证工具,正逐渐成为企业级应用的标配。本文将探讨验证码短信API如何为企业级安全验证提供坚实保障。 验证码短信 API 的优…

MySQL-SQL-DQL

DQL-介绍 DQL-语法 基本查询 1、查询多个字段 2、设置别名 3、去除重复记录 条件查询 1、语法 2、条件 聚合函数 1、介绍 2、常见的聚合函数 3、语法 分组查询 1、语法 2、where与having区别 排序查询 1、语法 2、排序方式 分页查询 1、语法 DQL-执行顺序

关于在微信小程序中使用taro + react-hook后销毁函数无法执行的问题

问题: 在 taro中使用navigageTo() 跳转路由后hook中useEffect 的return函数没有执行 没有执行return函数 框架版本: tarojs: 3.6 react: 18.0 原因: 使用navigateTo() 跳转路由的话并不会销毁页面和组件,会加入一…

智能小程序环境配置流程

App 与智能小程序 在用户使用 App 扫描小程序的二维码或者点击设备,尝试进入小程序时,系统会对 App 当前环境与小程序所需运行环境进行比对,确定环境配置兼容后,App 才能启动并运行小程序。 比对规则中,主要涉及&…

「webpack面试系列」说说你对webpack的理解?解决了什么问题?(收藏好,用时好找)

文章目录 一、背景模块化 二、问题三、是什么webpack的能力: 一、背景 Webpack 最初的目标是实现前端项目的模块化,旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候,我们会通过文件划分的形式实现模块化,也就是将…

【计算机网络】应用层——HTTP 协议(一)

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】 本专栏旨在分享学习计算机网络的一点学习心得,欢迎大家在评论区交流讨论💌 目录 一、什么是 HTTP 协…

Redis(六)

1、Redis的缓存淘汰策略 1.1、内存配置 首先查看Redis最大的占用内存,打开redis配置文件,设置maxmemory参数,maxmemory是bytes字节类型,注意转换。 打开配置文件发现没有配置,那么默认是多少的内存,是这样…

第2章-OSI参考模型与TCP/IP模型

目录 1. 引入 2. OSI参考模型 2.1. 物理层 2.2. 数据链路层 2.3. 网络层 2.4. 传输层 2.5. 会话层 2.6. 表示层 2.7. 应用层 3. 数据的封装与解封装 4. TCP/IP模型 4.1. 背景引入 4.2. TCP/IP模型(4层) 4.3. 拓展 1. 引入 1)产…