TypeScript 模块

首先介绍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  （映射） 。

好了 ， 本篇关于模块的博客 ， 写完收工！！！！！！！！！！！

转载于:https://blog.51cto.com/aonaufly/1959368