6.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> |
6.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> |
6.3import，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"; var flag : boolean=telObj.isAcceptable(tel);//调用TelValidator类的isAcceptable方法 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); } }); });
|
6.4import，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"; var flag : boolean=telObj.isAcceptable(tel);//调用TelValidator类的isAcceptable方法
console.log(flag? tel+" 匹配 " : tel+"\t 不匹配 ");
$("#msg1").html(flag? "<span style='color:red;'>"+tel+" 匹配</span> " : "<span>"+tel+"\t 不匹配</span>");
}
$(function (){
showMsgs1(); }); |
注意：6.3和6.4不使用Module,如果我们在typescript使用了module函数，则生成的代码在浏览器端执行时，需要有一些script loader的支持。对于浏览器端代码，我们一般生成amd风格的代码，所以需要找一个支持amd的库放在前端,我这里首选的是AMD这样的库有很多，比如
1. RequireJS
2. Nodules
3. JSLocalnet
4. curl.js
不然的话运行这个html会报ReferenceError: define is not defined
6.5module别名的使用
|
//------------别名的使用.. //--声明一个--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 = {}));
|
Test.ts文件
|
//-------import入module 块 import polygons = Shapes.Polygons;
var tg = new polygons.Triangle("三角形面积是："); var triangleArea=tg.getTriangleArea(3);//传一个3进去..
var sq = new polygons.Square("正方形面积是："); var squareArea = sq.getSquareArea(8);
$(function () {
$("#msg1").html("<span style='color:red;'>"+triangleArea+"</span>"); $("#msg2").html("<span style='color:red;'>"+squareArea+"</span>");
}) |
6.6module内部模块
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; } }
declare var d3: D3.Base; |
6.7module外部模块
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文件 ///<reference path="test6/node.d.ts"/>
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");
$(function() {
alert(myUrl); //$("#msg1").html(myUrl); }); |