码迷,mamicode.com
首页 > 其他好文 > 详细

TypeScript 模块

时间:2017-08-25 17:49:44      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:typescript   module   模块   

首先介绍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  (映射) 。


好了 , 本篇关于模块的博客 , 写完收工!!!!!!!!!!!


本文出自 “Better_Power_Wisdom” 博客,请务必保留此出处http://aonaufly.blog.51cto.com/3554853/1959368

TypeScript 模块

标签:typescript   module   模块   

原文地址:http://aonaufly.blog.51cto.com/3554853/1959368

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!