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

作者: 爱学习的蹭蹭 | 来源:发表于2019-06-08 07:00 被阅读1次

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写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

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

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

2、不分文件实现module块

3 、import，require关键字

4、import，export，require关键字

5、module别名的使用

6、module内部模块

7、module外部模块

工程源代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

Web前端之路

JavaScript 进阶营

前端开发

前端开发笔记

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

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

2、 不分文件实现module块

3 、import，require关键字

4、import，export，require关键字

5、module别名的使用

6、module内部模块

7、module外部模块

工程源代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

Web前端之路

JavaScript 进阶营

前端开发

前端开发笔记

2、不分文件实现module块