首先介绍2个关键字 : export(导出,让其他模块可以导入使用) 和 import(导入)
先可以这么理解 : 一个TS文件就是一个模块。现在有一个需求 : A模块要使用B模块中的内容 , 也就是代码复用问题。
其中 : Greeter.ts的代码如下:
export interface StringValidator{ isAcceptable( s : string ) : boolean; }
注意一点 : export修饰了这个接口(实际上,它"export"还可以修饰类,变量,函数),则这个接口可以被别的模块导入使用 例如: CodeValidator.ts
CodeValidator.ts代码如下:
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代码如下(把打印信息修改下):
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的代码如下:
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的代码如下:
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 如下:
module com { export interface StringValidator { isAcceptable(s: string): boolean; } }
可见模块(命名空间)的名称为com
那么导入它也需要发生改变:
CodeValidator.ts如下:::
///<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 代码如下:
///<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代码如下 :
///<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
///<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 (映射) 。
好了 , 本篇关于模块的博客 , 写完收工!!!!!!!!!!!