• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript模块系统、命名空间、声明合并

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

命名空间

命名空间能有效避免全局污染。在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属性

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

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript泛型发布时间:2022-07-18
下一篇:
TypeScript &amp;&amp; React发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap