typescript:命名空间

命名空间

在JavaScript程序中,通常使用“命名空间”来组织并隔离代码以免产生命名冲突等问题,最为流行的实现命名空间的方法是使用立即执行的函数表达式。

TypeScript利用了这个经典的命名空间实现方式并提供了声明命名空间的简便语法

命名空间通过namespace关键字来声明,它相当于一种语法糖

namespace Utils {
	function isString(val:any){
		return typeof val === 'string'
	}
}

在定义命名空间的名字时允许使用以点符号“.”分隔的名字

namespace System.Utils {
   function isString(value: any) {
       return typeof value === 'string';
    }
}

同等于

namespace System {
     export namespace Utils {
        function isString(value: any) {
             return typeof value === 'string';
        }
    }
}

默认情况下,在命名空间内部的声明只允许在该命名空间内部使用,在命名空间之外访问命名空间内部的声明会产生错误

如果想要让命名空间内部的某个声明在命名空间外部也能够使用,则需要使用导出声明语句明确地导出该声明

namespace Utils {
    export function isString(value: any) {
        return typeof value === 'string';
    }
}
Utils.isString()

我们可以使用import语句为命名空间的导出声明起一个别名,当命名空间名字比较长时,使用别名能够有效地简化代码。

namespace Utils {
     export function isString(value: any) {
         return typeof value === 'string';
     }
}

namespace App {
   import isString = Utils.isString;

     isString('yes');

   Utils.isString('yes');
}

我们可以将同一个命名空间声明拆分到不同的文件中,TypeScript最终会将同名的命名空间声明合并在一起

// a.ts
namespace Utils {
    export function isString(value: any) {
         return typeof value === 'string';
    }
 
    export interface Point {
        x: number;
     }
}
//b.ts
namespace Utils {
    export function isNumber(value: any) {
        return typeof value === 'number';
     }
}

最终,合并后的Utils命名空间中存在三个导出声明isString、isNumber和Point

当我们将命名空间拆分到不同的文件后,需要注意文件的加载顺序,因为文件之间可能存在依赖关系

// a.ts
namespace App {
     export function isString(value: any) {
         return typeof value === 'string';
    }
 }
// b.ts
namespace App {
     const a = isString('foo');
 }

从上面的代码可以看出 b.ts 依赖于 a.ts,因为“b.ts”中调用了“a.ts”中定义的方法,我们需要保证“a.ts”先于“b.ts”被加载,否则在执行“b.ts”中的代码时将产生isString未定义的错误。

定义文件间的依赖关系有多种方式:

  • 使用tsconfig.json文件
  • 使用三斜线指令

tsconfig.json

 {
     "compilerOptions": {
        "strict": true,
         "target": "ESNext",
         "outFile": "main.js"
     },
     "files": ["a.ts", "b.ts"]
 }

三斜线指令

 /// <reference path="a.ts" />

上面这行代码声明依赖关系,即该三斜线后面的代码都依赖a.ts文件

除了上面的这种三斜线以外还有其他形式的三斜线指令,实际上三斜线指令是一系列指令的统称,它是从TypeScript早期版本就开始支持的编译指令。
目前,已经不推荐继续使用三斜线指令,因为可以使用模块来取代它的大部分功能.

接下来再了解一下其他的三斜线指令

/// <reference types="" />

该三斜线指令用来定义对某个DefinitelyTyped声明文件的依赖,或者说是对安装在“node_modules/@types”目录下的某个声明文件的依赖

types”属性的值是声明文件安装包的名称,也就是安装到“node_modules/@types”目录下的文件夹的名字

/// <reference lib="" />

该三斜线指令用于定义对语言内置的某个声明文件的依赖

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端御书房

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值