首页 技术 正文
技术 2022年11月16日
0 收藏 326 点赞 3,024 浏览 2502 个字

命名空间

命名空间能有效避免全局污染。在ES6引入模块之后,命名空间就较少被提及了。如果使用了全局的类库,命名空间仍是一个好的解决方案。

namespace Shape{
const pi = Math.PI;
// 使用export关键字导出,可以在全局空间内可见
export function circle(r: number) {
return pi * r ** 2
}
square(5)
}
Shape.circle(10); // 可以在全局空间访问导出的
import circle = Shape.circle; // 为命名空间内的变量起个别名,要清楚此处import与模块化的import含义不一样
circle(20);

随着程序的扩张,命名空间也会很大,需要对其进行拆分,在不同的文件中使用同名命名空间,他们之间共享命名空间。

// space1.ts
/// <reference path="space2.ts" /> // 三斜线引用标签告诉编译器,两个文件中的命名空间内部存在着依赖关系
namespace Shape{
export function square(x: number) {
return x*x;
}
circle(10); // 只有circle被export后,这里才能访问
}// space2.ts
/// <reference path="space1.ts" />
namespace Shape{
const pi = Math.PI;
// 使用export关键字导出,可以在全局空间内可见
export function circle(r: number) {
return pi * r ** 2
}
square(5);
}

命名空间最好不要和模块一起混用

模块化系统

TypeScript对ES6和CommonJS两种模块系统都有很好的支持,我们基本可以沿用以前的写法。但两者不要混用,如果出现混用,就要使用TS准备的兼容性写法。

先来看看ES6和CommonJS各自的写法

// ES6导入
import { a, b } from './Modular System/es6/a';
import { a as f } from './Modular System/es6/a';
import * as All from './Modular System/es6/a';
import abc from './Modular System/es6/b';
import Obj from './Modular System/es6/a'
// ES6导出
export defalut Obj;
export {a,b,c};
export {d as D};
export {D as C} from './a'; // 将a.ts中的D重新命名并导出,这种用法只能对a.ts中的非默认导出有效// CommonJS导入
let c1 = require('./Modular System/node/a.ts');
let c2 = require('./Modular System/node/b');
// CommonJS导出
module.exports = a; // 将a变量导出
exports.c = 3;
exports.d = 4;
相当于
module.exports = {c:3, d:4}
如果两种方式并存,module.exports将会覆盖exports.c这种方式的导出

两种模块在导入导出时互不兼容:

  • 导出:ES6允许同时存在export default和export多个变量,而CommonJS只允许有一种形式的导出,其中一种会把另外一种覆盖掉。
  • 导入:ES6可以按需导入也可以全部导入,而CommonJS只能全部导入。

如果在ES6模块中抛出数据,在非ES6模块中导入,就会出现问题。因此尽量不要混用不同的模块化系统。如果迫不得已,可以使用TS提供的兼容性语法:

// 导出
export = a;
// 导入
import c4 = require('../es6/c');
/*
1.如果使用以上方法导出,此文件不允许有其它形式的导出
2.以上形式的导出的数据,不仅可以用以上语法导入,还可以用es6的方式导入。前提是tsconfig.json中的"esModuleInterop":true配置项要开启。
*/

声明合并

编译器会把程序的多个地方具有相同名称的声明合并成一个,这样可以将程序散落在各处的重名声明合并在一起。

例如:

interface StateMerge {
x: number,
y: string,
}
interface StateMerge {
y: string;
foo(bar: string[]): string[],
}
// 此时会将两个声明的同名接口成员合并
let stateMerge: StateMerge = {
x: 1,
y: "15",
foo(bar: any) {
return bar
}
};

如果合并的两个结构内成员重名怎么办?

  • 对于非函数成员,必须类型一致,否则报错。
  • 对于函数成员,会发生重载,重载的顺序按照以下规则。
interface StateMerge {
x: number,
y: string,
foo(bar: number): number; // 4
foo(bar: string): string; // 5
foo(bar: "b"): number; // 2
}
interface StateMerge {
y: string;
foo(bar: string[]): string[], // 3
foo(bar: "a"): number, // 1
}

接口内部按照先后顺序。接口之间,声明在后的接口函数成员排序更靠前。

如果出现自变量,排名最靠前。后面的接口中的排在第一位,前面的接口排在第二位。上述排序如注释所示。

函数和命名空间的合并

function Lib() {
}
namespace Lib{
export let version = '1.0'
}
console.log(Lib.version); // 相当于为函数Lib添加了属性

类和命名空间的合并

class C{
}
namespace C{
export let state = 1
}
console.log(C.state); // 相当于为类C添加了state属性

此外,还可以为枚举增加属性。

注意:在命名空间与类、函数进行生命合并的时候,一定要将命名空间放在类、函数之后。否则报错。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,088
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,565
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,413
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,186
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,822
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,905