TS学习笔记(十):命名空间

news/2024/7/23 22:08:04 标签: typescript

在确保我们创建的变量不会泄露至全局变量中,我们以前曾采用过这种代码组织形式:


   
  1. ( function(someObj){
  2. someObj.age = 18;
  3. })(someObj || someObj = {});
  4. 复制代码

但在基于文件模块的项目中,我们无须担心这一点,此种方式,适合用于合理的函数逻辑分组中,在 TypeScript 中,提供了 namespace 关键字来描述这种分组,在 typescript 编译器进行编译过后,命名空间也就被编译成了上述示例那样的代码。

命名空间的声明

TypeScript 的命名空间只对外暴露需要在外部访问的对象,命名空间内的对象通过 export 关键字对外暴露,比如我们在一个名叫 utils.ts 的文件里声明一个命名空间:

typescript copyable">
   
  1. // utils.ts
  2. namespace Utils {
  3. export interface IPerson {
  4. name: string;
  5. age: number;
  6. }
  7. }
  8. 复制代码

命名空间的使用

通过 namespace 关键字声明命名空间,在命名空间外部需要通过完全限定名访问这些对象,通常情况下,声明的命名空间代码和调用的代码不在同一个文件里,因此在其他文件中使用,注意引入的路径要写正确,此处我们在同级目录中任意一个 ts 文件中使用我们刚定义的命名空间:

typescript copyable">
   
  1. /// <reference path="utils.ts" />
  2. const me: Utils.IPerson = {
  3. name: 'funlee',
  4. age: 18
  5. }
  6. console.log(me); // {name: 'funlee', age: 18}
  7. 复制代码

如上述代码所示,通过 reference 注释引用命名空间,即可通过完全限定名进行访问,我们也可以通过 import 导入模块的形式,引入命名空间:

typescript copyable">
   
  1. import './utils'
  2. const me: Utils.IPerson = {
  3. name: 'funlee',
  4. age: 18
  5. }
  6. console.log(me); // {name: 'funlee', age: 18}
  7. 复制代码

多文件的命名空间

就像普通的 JS 模块文件可以相互引用一样,包含 namespace 的命名空间文件也可以相互引入,还可以组合成一个更大的命名空间,下面是一个简单的示例,所有文件都在同一目录下,你也可参考官方示例:

utils.ts

typescript copyable">
   
  1. namespace Utils {
  2. export interface IAnimal {
  3. name: string;
  4. say(): void;
  5. }
  6. }
  7. 复制代码

animal.ts

typescript copyable">
   
  1. /// <reference path="utils.ts" />
  2. export namespace Animal {
  3. export class Dog implements Utils.IAnimal{
  4. name: string;
  5. constructor( theName: string) {
  6. this.name = theName;
  7. }
  8. say() {
  9. console.log( `${this.name}: 汪汪汪`)
  10. }
  11. }
  12. }
  13. 复制代码

index.ts

typescript copyable">
   
  1. import {Animal} from './animal';
  2. const he = new Animal.Dog( 'Jack');
  3. he.say(); // Jack: 汪汪汪
  4. 复制代码

http://www.niftyadmin.cn/n/951512.html

相关文章

TS学习笔记:命名空间

在确保我们创建的变量不会泄露至全局变量中&#xff0c;我们以前曾采用过这种代码组织形式&#xff1a; (function(someObj){someObj.age 18; })(someObj || someObj {});但在基于文件模块的项目中&#xff0c;我们无须担心这一点&#xff0c;此种方式&#xff0c;适合用于合…

vue 预览pdf

<embed:src"previewSrc"type"application/pdf"width"1200px"height"1000px"> embed 标签h5特性中包含四个属性&#xff1a;高、宽、类型、预览文件src&#xff01; 与< iframe > < / iframe > 不同&#xff0c;这个…

CSDN博客第一天,求关注!!!

CSDN博客第一天&#xff0c;求关注&#xff0c;欢迎各位前辈、大侠、大佬捧场。

OpenLayers 4 ol.source 详解

source 是 Layer 的重要组成部分&#xff0c;表示图层的来源&#xff0c;也就是服务地址。 除了在构造函数中指定外&#xff0c;还可以使用 layer.setSource(source) 稍后指定。 一、包含的类型 ol.source.BingMaps &#xff0c;必应地图的切片数据&#xff0c;继承自ol.sour…

Vue中:error ‘XXXXX‘ is not defined no-undef解决办法

报错内容: ClientCompiled with some errors in 7.42s √ ServerCompiled successfully in 6.05sERROR Failed to compile with 1 errors friendly-errors 17:33:15 ERROR in ./pages/pla…

如何解决Android中 Error generating final archive: Debug Certificate expired on的问题

一、问题描述 今天&#xff0c;打开eclipse编译android project&#xff0c;提示如下错误&#xff1a; Error generating final archive: Debug Certificate expired on 13-8-14 下午5:03 二、产生原因 这个问题产生的原因是&#xff1a; android要求所有的程序必须有签名&…

如何批量导入数据到Sqlite数据库

做android和ios开发的一般都用Sqlite数据库&#xff0c;有的时候数据需要批量导入&#xff0c;那么如何导入呢&#xff1f; 在这里&#xff0c;介绍2种方法供大家参考。 一、用sqlite命令 以windows系统为例&#xff0c;linux下命令是一样的。 1.安装sqlite工具包 首先要安装有…

vue 中动态添加html元素并绑定点击事件onclick

方法中动态添加html元素 getWindContent(){return </div><span style"cursor: pointer;" onclick"closeMaker()"><img class"img" src"/assets/svg/close-white.svg" /></span></div> }mounted中 win…