TypeScript 模块
首先介绍2个关键字 ： export（导出，让其他模块可以导入使用） 和 import（导入）
先可以这么理解 ： 一个TS文件就是一个模块。现在有一个需求 ： A模块要使用B模块中的内容 ， 也就是代码复用问题。
其中 ： Greeter.ts的代码如下：
|
1
2
3
|
export interface StringValidator{ isAcceptable( s : string ) : boolean;
} |
注意一点 ： export修饰了这个接口（实际上，它"export"还可以修饰类，变量，函数），则这个接口可以被别的模块导入使用 例如： CodeValidator.ts
CodeValidator.ts代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
import {StringValidator} from "./Greeter"
export const numberRegexp = /^[0-9]+$/;export class CodeValidator implements StringValidator{ isAcceptable( s : string ) : boolean{
return s.length == 5 && numberRegexp.test(s);
}
}let s : StringValidator = new CodeValidator();
console.log(`this is : ${s.isAcceptable("123")}`);
|
注意：import {StringValidator} from "./Greeter" 既是从Greeter.ts模块中导入StringValidator接口 ， 常量 numberRegexp 也是被export修饰
查看结果：
我们稍微延伸一下：
修改一个CodeValidator.ts代码如下（把打印信息修改下）：
|
1
2
3
4
5
6
7
8
9
10
11
|
import {StringValidator} from "./Greeter"
export const numberRegexp = /^[0-9]+$/;export class CodeValidator implements StringValidator{ isAcceptable( s : string ) : boolean{
return s.length == 5 && numberRegexp.test(s);
}
}let s : StringValidator = new CodeValidator();
console.log(`this CodeValidator is : ${s.isAcceptable("123")}`);
|
我在com文件夹外见一个MC.ts
MC.ts的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
import {StringValidator} from "./com/Greeter"
import {numberRegexp} from "./com/CodeValidator"
export class MC implements StringValidator{ isAcceptable( s : string ) : boolean{
return numberRegexp.test(s);
}
}let mc : StringValidator = new MC();
console.log(`this MC func : ${mc.isAcceptable("123")}`);
|
注意：from后面的路径变了
结果：
我们继续扩展 ， 我间一个和com文件夹平级的文件夹cn，在cn文件夹中使用com文件夹中的CodeValidator.ts和Greeter.ts的内容或功能
SP.ts的代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
import {StringValidator} from "./../com/Greeter"
import {numberRegexp} from "./../com/CodeValidator"
export class SP implements StringValidator{ isAcceptable( s : string ) : boolean{
return numberRegexp.test(s);
}
}let sp : StringValidator = new SP();
console.log(`this MC func : ${sp.isAcceptable("123")}`);
|
结果：
可以总结如下：
./ : 在本TS的文件夹中
../ : 返回上一级文件夹
如果还是不懂 ， 可以再看看以上的测试
好了，开始使用正儿八经的使用模块 ， 需要使用关键字 module
其实module 相当于高级语言的 命名空间 。那么使用module ， 只要module不同 ， 里面的内容都是独立的 ， 这样可以避免命名冲突
还在原来的基础上改： 在Greeter.ts上以上module 如下：
|
1
2
3
4
5
|
module com { export interface StringValidator {
isAcceptable(s: string): boolean;
}
} |
可见模块（命名空间）的名称为com
那么导入它也需要发生改变：
CodeValidator.ts如下：：：
|
1
2
3
4
5
6
7
8
9
10
11
|
///<reference path="Greeter.ts" />export const numberRegexp = /^[0-9]+$/;export class CodeValidator implements com.StringValidator{ isAcceptable( s : string ) : boolean{
return s.length == 5 && numberRegexp.test(s);
}
}let s : com.StringValidator = new CodeValidator();
console.log(`this CodeValidator is : ${s.isAcceptable("123")}`);
|
注意上面的 ///<reference path="Greeter.ts" /> 是引用Greeter.ts模块 ， 那么调用此模块中的成员，需要使用模块名 + “.” + 元素名 如 com.StringValidator 即为调用接口
MC.ts 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
///<reference path="com/Greeter.ts" />import {numberRegexp} from "./com/CodeValidator"
export class MC implements com.StringValidator{ isAcceptable( s : string ) : boolean{
return numberRegexp.test(s);
}
}let mc : com.StringValidator = new MC();
console.log(`this MC func : ${mc.isAcceptable("123")}`);
|
SP.ts代码如下 ：
|
1
2
3
4
5
6
7
8
9
10
|
///<reference path="../com/Greeter.ts" />import {numberRegexp} from "./../com/CodeValidator"
export class SP implements com.StringValidator{ isAcceptable( s : string ) : boolean{
return numberRegexp.test(s);
}
}let sp : com.StringValidator = new SP();
console.log(`this MC func : ${sp.isAcceptable("123")}`);
|
结果：
或许有读者说每次带个com. 挺烦的 ， 好了扩展继续（以SP.ts为例）
SP.ts
|
1
2
3
4
5
6
7
8
9
10
11
|
///<reference path="../com/Greeter.ts" />import {numberRegexp} from "./../com/CodeValidator"
type StringValidator = com.StringValidator;export class SP implements StringValidator{ isAcceptable( s : string ) : boolean{
return numberRegexp.test(s);
}
}let sp : StringValidator = new SP();
console.log(`this MC func : ${sp.isAcceptable("123")}`);
|
核心 type StringValidator = com.StringValidator; 将com.StringValidator 命名为 StringValidator （映射） 。
好了 ， 本篇关于模块的博客 ， 写完收工！！！！！！！！！！！
本文转自Aonaufly51CTO博客，原文链接： http://blog.51cto.com/aonaufly/1959368，如需转载请自行联系原作者