首先介绍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);
}
}
|
客服电话
APP下载
官方微信
请发表评论