【第5篇】TypeScript块module的案例代码详解

1 、分多个ts文件实现module块

  • Validation.ts代码
module Validation{ 
    export interface StringValidator { 
         isAcceptable(s: string): boolean;//是否接受.
    }
}
  • ZipCodeValidator.ts代码
/// <reference path="Validation.ts" />
module Validation {
   //匹配0-9的数字.
    var numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            //如果长度=5并且是数字就返回一个true
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}
  • LettersOnlyValidator.ts代码
/// <reference path="Validation.ts" />
module Validation {
    //匹配A-Z,a-z的英文
    var lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }}
  • test-1.ts代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
/// <reference path="test1/Validation.ts" />
/// <reference path="test1/LettersOnlyValidator.ts" />
/// <reference path="test1/ZipCodeValidator.ts" />

/***
 * Splitting Across Files分割跨文件
 */
// 声明一个数组.
var strings = ['Hello', '98052', '101'];
// 使用这个验证.
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['Zip Code'] = new Validation.ZipCodeValidator();//这个是验证邮政编码
validators['Letters only'] = new Validation.LettersOnlyValidator();//这个是验证英文

function showMsg():void{ 
    //显示每个字符串是否通过每个验证
    strings.forEach(s => {
        for (var name in validators) {
            console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);

            $("#msg1").html('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
        }//--for--end

    });//--forEach--end
}

$(document).ready(function(){ 
    showMsg();
   
});
  • Html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script src="../test1/Validation.js" type="text/javascript"></script>
<script src="../test1/LettersOnlyValidator.js" type="text/javascript"></script>
<script src="../test1/ZipCodeValidator.js" type="text/javascript"></script>
<script src="../test-1.js" type="text/javascript"></script>
</head>
<body>
<div id="msg1"></div>
<br/>
<div id="msg2"></div>
</body>
</html>

2、 不分文件实现module块

  • ValidationUtils.ts
/**
 *声明一个ValidationUtils工具块module
 *推荐使用.
 */
module ValidationUtils{ 
    //-声明StringValidator字符串验证器.
     export interface StringValidator { 
         isAcceptable(str: string): boolean;//是否接受.
    }

    //　匹配email正则表达式
    var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    export class EmailValidator implements StringValidator {
        isAcceptable(s: string) {
            return emailReg.test(s);
        }
    }
    //匹配移动电话号码
    var telReg=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
    export class TelValidator implements StringValidator{ 
         isAcceptable(s:string){ 
            return  telReg.test(s);
         }
    }
}
  • 测试文件test-2.ts
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
/// <reference path="test2/ValidationUtils.ts" />
var strs : Array<any> =["13697811800","jilongliang@sina.com"];
var validators1: { [s: string]: ValidationUtils.StringValidator; } = {};
validators1["Tel"]=new ValidationUtils.TelValidator;//验证码QQ
validators1["Email"] = new ValidationUtils.EmailValidator;//验证Email

//-------显示信息1----------------------------
function showMsg1():void{ 
    strs.forEach(s=>
      {
        for(var name in validators1 ){  
            console.log('"' + s + '" ' + (validators1[name].isAcceptable(s) ? ' 匹配 ' : ' 不匹配 ') + name);
        }
      }
   );
}
//-------------------显示信息2---------------------
function showMsg2():void{ 

    //--方法一---
    var telObj:ValidationUtils.TelValidator;
    telObj=new ValidationUtils.TelValidator;
     //--方法二---
     //var telObj=new ValidationUtils.TelValidator;
    var tel : string="13697811809";
    var flag : boolean=telObj.isAcceptable(tel);//调用TelValidator类的isAcceptable方法
    console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
    $("#msg2").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}
$(function(){ 
    showMsg1();
    showMsg2();
});
  • html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script src="../test2/ValidationUtils.js" type="text/javascript"></script>
<script src="../test-2.js" type="text/javascript"></script>
</head>
<body>
<div id="msg1"></div>
<br/>
<div id="msg2"></div>
</body>
</html>

3 、import，require关键字

  • ValidationUtils3.ts文件
/* 这个ts没module关键字*/
export interface StringValidator {
    isAcceptable(s: string): boolean;
}
  • EmailValidator.ts
 /**import、require、export关键的使用..***********/
    //--导入--ValidationUtils3.ts文件---
    import validation = require('./ValidationUtils3');
    //　匹配email正则表达式
    var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    export class EmailValidator implements validation.StringValidator {
        isAcceptable(s: string) {
            return emailReg.test(s);
        }
    }
  • TelValidator.ts
/**import、require、export关键的使用..***********/
//--导入--ValidationUtils3.ts文件---
import validation = require('./ValidationUtils3');
    //匹配移动电话号码
    var telReg=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
    export class TelValidator implements validation.StringValidator{ 
         isAcceptable(s:string){ 
            return  telReg.test(s);
         }
    }
  • Test-3.ts
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
/***
 * import与require关键字使用..require(是命令，要求的意思.)
 */
//引入ValidationUtils3.ts文件,前面这个是用了module块关键字定义ts文件，需要用reference与path引入.
import validation = require('test3/ValidationUtils3');
import telValidator = require('test3/TelValidator');
import emailValidator = require('test3/EmailValidator');


//-------------------显示信息1---------------------
function showMsgs1() : void { 
    //--方法一---
    var  telObj=new emailValidator.EmailValidator();//
    var tel : string="13697811809";
    //调用TelValidator类的isAcceptable方法
    var flag : boolean=telObj.isAcceptable(tel);
    console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
    $("#msg1").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}


$(function() { 
    //showMsgs1();
var strings = ['13697811809', 'jilongliang@sina.com'];
var validators: { [s: string]: validation.StringValidator; } = {};
validators['email'] =new emailValidator.EmailValidator();
validators['tel'] = new telValidator.TelValidator();
strings.forEach(s => {
    for (var name in validators) {
        console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does not match ') + name);
    }
});
});

4、import，export，require关键字

  • ValidationUtils4.ts
/**
 * 不使用Module,如果我们在typescript使用了module函数，则生成的代码在浏览器端执行时，需要有一些script loader的支持。
 * 对于浏览器端代码，我们一般生成amd风格的代码，所以需要找一个支持amd的库放在前端。这样的库有很多
 */
export interface StringValidator {
    isAcceptable(s: string): boolean;
}
  • export = 对象 的使用
  • EmailValidator4.ts
/**export = 对象 的使用*/
    import validation = require('./ValidationUtils4');
    //　匹配email正则表达式
    var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
     class EmailValidator4 implements validation.StringValidator {
        isAcceptable(s: string) {
            return emailReg.test(s);
        }
    }
    export = EmailValidator4; //export = 对象 的使用
  • TelValidator4.ts
/**export = 对象 的使用*/
    import validation = require('./ValidationUtils4');
    //匹配移动电话号码
    var telReg=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
     class TelValidator4 implements validation.StringValidator{ 
         isAcceptable(s:string){ 
            return  telReg.test(s);
         }
    }
    export = TelValidator4;//
  • Test-4.ts文件
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//引入ValidationUtils3.ts文件,前面这个是用了module块关键字定义ts文件，需要用reference与path引入.
import validation = require('test4/ValidationUtils4');
import telValidator = require('test4/TelValidator4');
import emailValidator = require('test4/EmailValidator4');
//-------------------显示信息1---------------------
function showMsgs1() : void { 
    //--方法一---
    var  telObj=new telValidator();//
    var tel : string="13697811809";
;//调用TelValidator类的isAcceptable方法
    var flag : boolean=telObj.isAcceptable(tel)
    console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
    $("#msg1").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}
$(function (){ 
    showMsgs1();
});

注意：3和4不使用Module,如果我们在typescript使用了module函数，则生成的代码在浏览器端执行时，需要有一些script loader的支持。对于浏览器端代码，我们一般生成amd风格的代码，所以需要找一个支持amd的库放在前端,我这里首选的是AMD这样的库有很多，比如 RequireJS 、 Nodules、 JSLocalnet 、 curl.js

  • 不然的话运行这个html会报ReferenceError: define is not defined

5、module别名的使用

//------------别名的使用..
//--声明一个--Shapes块别名--
module Shapes { 
     //===========================多边形===========================
     export module Polygons { 
        //===========================三角形
        export class Triangle {  
            side : number = 3;//声明边一个变量，并且给一个默认值..
            theName : string;//声明一个名字
            //声明构造方法--传一个名字的参数..
            constructor(strName : string) { 
                this.theName = strName;
            }
            //计算三角形,获取面积，这里为了返回一个构造方法的传进来的字符串，故返回类型给了一个any类型..
            getTriangleArea(side : number) : any{ 
               return this.theName+ this.side*side;
            }
        }

        //===========================正方形
        export class Square { 
            side : number = 8;//声明边一个变量，并且给一个默认值..
            theName : string;//声明一个名字
            //声明构造方法--传一个名字的参数..
            constructor(strName : string) { 
                this.theName = strName;
            }
            //---计算正方形,获取面积
            getSquareArea(side : number) : any{ 
               return this.theName+ this.side*side;
            }
        }
    }
}
  • ts编译成js文件
//------------别名的使用..
//--声明一个--Shapes块别名--
var Shapes;
(function (Shapes) {
    //==========================多边形===========================
    var Polygons;
    (function (Polygons) {
        //===========================三角形
        var Triangle = (function () {
            //声明构造方法--传一个名字的参数..
            function Triangle(strName) {
                this.side = 3; //声明边一个变量，并且给一个默认值..
                this.theName = strName;
            }

            //计算三角形,获取面积，这里为了返回一个构造方法的传进来的字符串，
//故返回类型给了一个any类型..
            Triangle.prototype.getTriangleArea = function (side) {
                return this.theName + this.side * side;
            };
            return Triangle;
        })();
        Polygons.Triangle = Triangle;
        //===========================正方形
        var Square = (function () {
            //声明构造方法--传一个名字的参数..
            function Square(strName) {
                this.side = 8; //声明边一个变量，并且给一个默认值..
                this.theName = strName;
            }
            //---计算正方形,获取面积
            Square.prototype.getSquareArea = function (side) {
                return this.theName + this.side * side;
            };
            return Square;
        })();
        Polygons.Square = Square;
    })(Polygons = Shapes.Polygons || (Shapes.Polygons = {}));
})(Shapes || (Shapes = {}));

6、module内部模块

  • D3.d.ts文件，.d.ts文件不会编译成js文件
//环境内部模块
declare module D3{ 
   //声明一个Selectors选择器接口
   export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }
     //声明一个Event事件
    export interface Event {
        x: number;
        y: number;
    }
     //声明一个Base接口继承Selectors接口
    export interface Base extends Selectors {
        event: Event;
    }
}

7、module外部模块

  • node.d.ts
//环境外部模块
//在node.js中，大多数的任务是由加载一个或多个模块来实现的。我们可以定义自己的.d.ts文件顶层出口报关单每个模块，但它更方便他们写为一个较大的.d.ts文件。要做到这一点，我们使用了模块的引用名，这将提供给一个后来进口
declare module "url" {
    export interface Url {
        protocol?: string;
        hostname?: string;
        pathname?: string;
    }
    export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}
declare module "path" {
    export function normalize(p: string): string;
    export function join(...paths: any[]): string;
    export var sep: string;
}
  • 引入node.d.ts文件
/引入node.d.ts文件
///<reference path="test6/node.d.ts"/>
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");
$(function() { 
    alert(myUrl);
    //$("#msg1").html(myUrl);
});

工程源代码

TypeScript块module的案例代码详解

博客所有文章是本人2014年撰写,而GItHub的源代码是有些是2014年与2015年进行整理，由于在2013年项目接触TypeScript，同时在当年接触KendoUI开发的时候TypeScript的影子，故一年后决定把官方文档所有API文档认真琢磨了一遍，并且撰写成一本最全的中文TypeScript入门指南详解案例教程与代码,当初的下载量还是比较高的。由于最近接触Kotlin，自从学习TypeScript，它的语法对我后面学习Kotlin有了极大的帮助，个人感觉，它的语法跟ActionScript，Swift写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,874评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,102评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,676评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,911评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,937评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,935评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,860评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,660评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,113评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,238评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,861评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2赞 352

推荐阅读更多精彩内容

  • TypeScript入门
    慕课网@JoJozhai 老师 TypeScript入门课程分享 TypeScript入门 ES5,ES6,JS,...
    shangpudxd阅读 10,432评论 0赞 22
  • 使用Visual Studio Code搭建TypeScript开发环境
    使用Visual Studio Code搭建TypeScript开发环境 1、TypeScript是干什么的 ? ...
    KingOfLion阅读 1,643评论 0赞 8
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,472评论 1赞 45
  • 深入理解TypeScript-1
    这一章主要总结TypeScript的用法和项目常用配置 编译上下文 用来给文件分组，告诉 TypeScript 哪...
    Terryzh阅读 2,000评论 0赞 0
  • 小 树 林 记
    准假期里，某老师养精为业。无聊中，忆起小树林。忽见树林外，大约数百米，密围铁皮，见的树木，不见路口。老师甚为急。复...
    云影ccl阅读 291评论 2赞 1