广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript命名空间讲解
  • 685
分享到

TypeScript命名空间讲解

2024-04-02 19:04:59 685人浏览 独家记忆
摘要

目录1.定义和使用 1.1定义 1.2使用 2.拆分为多个文件 3.别名 前言: 命名空间namespace在typescript1.5版本之前是叫做内部模块 ,那是因为es6中的

前言:

命名空间namespacetypescript1.5版本之前是叫做内部模块 ,那是因为es6中的模块还没有称为正式标准,在ES6提出该规范时,TypeScript1.5 正事更名为命名空间 ,用namespace来定义。

1.定义和使用

1.1定义

命名空间的定义就相当于定义了一个对象,该对象中可以定义变量、接口、类、方法等等,但是如果不使用export关键字指定此内容为外部可见的话,外部是没有办法访问到的。

接下来定义一个正则验证的一个.ts文件,实现代码如下:


// validation.ts
// 通过 namespace 创建一个名为 Validation 的命名空间
namespace Validation {
    // 定义一个正则表达式
    const isLetterReg = /^[A-Za-z]+$/
    // 这里在定义一个正则表达式,与上一个的区别就是这个正则表达式通过export导出了
    export const isNumberReg = /^[0-9]+$/
    // 导出一个方法
    export const checkLetter = (text: any) => {
        return isLetterReg.test(text)
    }
}

在上面的代码中,我们定义了一个名为Validation的命名空间,并在里面定义了两个属性和一个方法,并将一个属性和一个方法导出(命名空间的中导出使用export关键字)。

1.2使用

在某个文件使用命名空间中的内容只需要在使用外部命名空间的地方使用/// <reference path=“namespace.ts”/>来引入,注意三斜线///开头,然后在 path 属性指定相对于当前文件,这个命名空间文件的路径。具体代码如下:


// index.ts
/// <reference  path='validation.ts' />
let isLetter = Validation.checkLetter('text')
const reg = Validation.isNumberReg
console.log(isLetter)
console.log(reg)

值得注意的是第一行的/// <reference path='validation.ts' /> 。语法结构是不能错的,否则编译是不通过的。

编译命令如下:


tsc --outFile src/index.js index.ts


outFile参数是用于将输出文件合并为一个文件

编译后的index.js文件如下:


// 通过 namespace 创建一个名为 Validation 的命名空间
var Validation;
(function (Validation) {
    // 定义一个正则表达式
    var isLetterReg = /^[A-Za-z]+$/;
    // 这里在定义一个正则表达式,与上一个的区别就是这个正则表达式通过export导出了
    Validation.isNumberReg = /^[0-9]+$/;
    // 导出一个方法
    Validation.checkLetter = function (text) {
        return isLetterReg.test(text);
    };
})(Validation || (Validation = {}));
/// <reference  path='validation.ts' />
var isLetter = Validation.checkLetter('text');
var reg = Validation.isNumberReg;
console.log(isLetter);
console.log(reg);

2.拆分为多个文件

随着我们的开发内容的不断增加,我们可以将同一个命名命名空间拆分为多个文件分开维护,尽管我们将其拆分为为多个文件,但是他们仍然属于一个命名空间,

示例代码如下:

LetterValidation.ts


// LetterValidation.ts
namespace Validation {
    export const isLetterReg = /^[A-Za-z]+$/
    export const checkLetter = (text: any) => {
        return isLetterReg.test(text)
    }
}

NumberValidation.ts


// NumberValidation.ts
namespace Validation {
    export const isNumberReg = /^[0-9]+$/
    export const checkNumber = (text: any) => {
        return isNumberReg.test(text)
    }
}

index.ts


// index.ts
/// <reference path="./LetterValidation.ts"/>
/// <reference path="./NumberValidation.ts"/>
let isLetter = Validation.checkLetter('text')
const reg = Validation.isNumberReg
console.log(isLetter)

我们使用命令行来编译一下:


tsc --outFile src/index.js index.ts


最终编译后的index.js代码如下:


// LetterValidation.ts
var Validation;
(function (Validation) {
    Validation.isLetterReg = /^[A-Za-z]+$/;
    Validation.checkLetter = function (text) {
        return Validation.isLetterReg.test(text);
    };
})(Validation || (Validation = {}));
// NumberValidation.ts
var Validation;
(function (Validation) {
    Validation.isNumberReg = /^[0-9]+$/;
    Validation.checkNumber = function (text) {
        return Validation.isNumberReg.test(text);
    };
})(Validation || (Validation = {}));
/// <reference path="./LetterValidation.ts"/>
/// <reference path="./NumberValidation.ts"/>
var isLetter = Validation.checkLetter('text');
var reg = Validation.isNumberReg;
console.log(isLetter);

由编译结果可以看出,我们先引入了LetterValidation.ts文件,后引入NumberValidation.ts文件,他们最终编译后的结果也是按照引入顺序编译的。

3.别名

别名是一种简化命名空间的操作方式,其语法是使用import关键字,使用方式如下:


import q = x.y.z


值得注意的是该方式不要与家长模块的import x = require('name')语法混淆,这里的语法是为指定的符号创建一个别名。可以使用该方法为任意标识符创建别名,也包括引入模块中的对象。


// 定义一个命名空间
namespace Shapes {
    // 在命名空间中定义一个子命名空间,并将其导出
    export namespace PolyGons {
        export class Triangle {}
        export class Square {}
    }
}
// 通过 import 的语法将导出的子命名空间重新命名为 polygons
import polygons = Shapes.Polygons
// 通过导出的命名空间实例化 Square 类
let sq = new polygons.Square()

通过这个例子我们可以看到,使用import关键字来定义命名空间中某个输出元素的别名,可以减少我们深层次获取属性的成本。

到此这篇关于TypeScript命名空间讲解的文章就介绍到这了,更多相关TypeScript命名空间内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: TypeScript命名空间讲解

本文链接: https://www.lsjlt.com/news/159568.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript命名空间讲解
    目录1.定义和使用 1.1定义 1.2使用 2.拆分为多个文件 3.别名 前言: 命名空间namespace在TypeScript1.5版本之前是叫做内部模块 ,那是因为ES6中的...
    99+
    2022-11-12
  • TypeScript命名空间合并讲解
    目录同名的命名空间之间的合并 命名空间和其他类型的合并 合并同名的命名空间和类 合并同名的命名空间和函数 同名的命名空间和枚举 前言: 回顾上一节的内容,在上一节中我们介绍了TS中最...
    99+
    2022-11-12
  • C++ 命名空间详解
    目录一、C++ 命名空间1.默认NameSpace(Global&Function)2.语法规则1.声明 2.使用方法3.支持嵌套总结一、C++ 命名空间 命名空间...
    99+
    2022-11-12
  • 【C++】命名空间 namespace 与 标准流 iostream ( 命名空间概念简介 | 命名空间定义 | 命名空间使用 | iostream 中的命名空间分析 )
    文章目录 一、命名空间 namespace1、命名空间基本概念2、名称概念4、C 语言的命名空间3、命名空间避免标识符冲突 二、命名空间定义1、命名空间基本概念2、命名空间定义语法3、代码示例 - 命名空间定义使用 三、命名...
    99+
    2023-08-20
    c++ namespace iostream 命名空间 标准流 原力计划
  • C++的命名空间详解
    目录C++ | C++命名空间C++命名空间定义命名空间实例1:using 指令实例2:实例3:不连续的命名空间嵌套的命名空间实例4:实例5:笔记:实例6:实例7:总结C++ | C...
    99+
    2022-11-12
  • C++namespace命名空间解析
    目录命名空间 namespace命名空间的定义1. 函数定义在命名空间里2.对全局变量使用命名空间3.命名空间的嵌套4.using命名空间5.命名空间里的结构体命名空间 namesp...
    99+
    2022-11-12
  • C++命名空间namespace详解
    目录一、命名空间的定义1.一般定义2.嵌套定义3.重名定义二、命名空间的使用1.命名空间的名称及作用域限定符2.使用using namespace 命名空间全展开3.使用using引...
    99+
    2023-05-14
    命名空间 namespace c++ 命名空间 namespace
  • python命名空间
    python使用命名空间记录变量。python中的命名空间就像是一个dict,key是变量的名字,value是变量的值。 python中,每个函数都有一个自己的命名空间,叫做local namespace,它记录了函数的变量。 ...
    99+
    2023-01-31
    空间 python
  • python-命名空间
    通俗的来说,Python中所谓的命名空间可以理解为一个容器。在这个容器中可以装许多标识符。不同容器中的同名的标识符是不会相互冲突的。理解python的命名空间需要掌握三条规则:第一,赋值(包括显式赋值和隐式赋值)产生标识符,赋值的地点决定标...
    99+
    2023-01-31
    空间 python
  • TypeScript模块与命名空间的关系和使用方法
    目录一、模块1. 全局模块2. 文件模块3. 模块规范二、命名空间三、文件模块和命名空间的关系一、模块 1. 全局模块 在默认情况下,当你开始在一个新的 TypeScript 文件中...
    99+
    2023-03-09
    TypeScript模块 TypeScript命名空间
  • C#命名空间怎么理解
    这篇文章主要介绍“C#命名空间怎么理解”,在日常操作中,相信很多人在C#命名空间怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#命名空间怎么理解”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!从C...
    99+
    2023-06-17
  • 详解PHP中的命名空间
    命名空间其实早在PHP5.3就已经出现了。不过大部分同学可能在各种框架的使用中才会接触到命名空间的内容,当然,现代化的开发也都离不开这些能够快速产出的框架。这次我们不从框架的角度,仅...
    99+
    2022-11-12
  • Linux的命名空间如何理解
    小编今天带大家了解Linux的命名空间如何理解,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“Linux的命名空间如何理解”的知识吧。...
    99+
    2023-06-29
  • C++学习之命名空间详解
    目录1.命名空间的定义和使用2.命名空间嵌套3.命名空间别名4.标准命名空间总结C++中,命名空间(namespace)是一个重要的概念。命名空间可以为函数、变量、类等定义作用域,以...
    99+
    2023-05-18
    C++命名空间定义 C++命名空间使用 C++命名空间
  • 【C++】入门 --- 命名空间
    文章目录 🍪一、前言🍩1、C++简介🍩2、C++关键字 🍪二、命名冲突🍪三、命名空间🍩1、命名空间定义🍩2、命名空...
    99+
    2023-08-17
    c++ 命名空间 开发语言
  • Linux中的命名空间
    本篇内容介绍了“Linux中的命名空间 ”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!背景从Linux 2.6.24版的内核开始,Linux...
    99+
    2023-06-13
  • php命名空间之怎么定义空间
    小编给大家分享一下php命名空间之怎么定义空间,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首先,我们了解一下什么是命名空间。(有需要的可以参考PHP 命名空间)...
    99+
    2023-06-20
  • TypeScript模块与命名空间的关系和使用方法是什么
    这篇文章主要讲解了“TypeScript模块与命名空间的关系和使用方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript模块与命名空间的关系和使用方法是什么”吧!一、模...
    99+
    2023-07-05
  • C++内存模型与名称空间概念讲解
    目录1、存储持续性与作用域及链接性2、作用域和链接3、静态持续变量4、静态持续性和外部链接性5、静态持续性与内部链接性6、静态存储性与无链接性7、const8、函数和链接性9、语言的...
    99+
    2023-01-02
    C++内存模型 C++名称空间
  • 什么是VB.NET命名空间
    这篇文章主要为大家展示了“什么是VB.NET命名空间”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“什么是VB.NET命名空间”这篇文章吧。对于命名组织在程序集中定义的对象你有深入的了解吗?程序集...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作