[5편] TypeScript 블록 모듈의 사례 코드 상세 설명

14074 단어

1. 여러 ts 파일로 나누어 모듈 블록 구현

  • Validation.ts 코드
    • module Validation{ 
    export interface StringValidator { 
         isAcceptable(s: string): boolean;//    .
    }
}
  • ZipCodeValidator.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 코드
    • /// 
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 코드
    • /// 
/// 
/// 
/// 

/***
 * 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 파일
    • 



Insert title here

    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);
         }
    }
}
  • 테스트 파일 테스트-2.ts 
    • /// 
/// 
var strs : Array =["13697811800","[email protected]"];
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? ""+tel+"    " : ""+tel+"\t    ");
}
$(function(){ 
    showMsg1();
    showMsg2();
});
  • html 코드
    • 



Insert title here

    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 
    • /// 
/***
 * 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? ""+tel+"    " : ""+tel+"\t    ");
}


$(function() { 
    //showMsgs1();
var strings = ['13697811809', '[email protected]'];
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 파일
    • /// 
//  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? ""+tel+"    " : ""+tel+"\t    ");
}
$(function (){ 
    showMsgs1();
});

    주의: 3과 4는 모듈을 사용하지 않습니다. typescript에서 모듈 함수를 사용하면 생성된 코드가 브라우저에서 실행될 때 일부script loader의 지원이 필요합니다.브라우저 쪽 코드에 대해 우리는 일반적으로amd스타일의 코드를 생성하기 때문에amd를 지원하는 라이브러리를 찾아 앞에 놓아야 한다. 내가 여기서 가장 먼저 선택한 것은 AMD와 같은 라이브러리가 매우 많다는 것이다. 예를 들어RequireJS,Nodules,JSlocalnet,curl이다.js
  • 그렇지 않으면 이 html을 실행하면 Reference Error: 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  
///
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");
$(function() { 
    alert(myUrl);
    //$("#msg1").html(myUrl);
});


    TypeScript 블록 모듈의 사례 코드 상세 정보
    블로그의 모든 글은 본인이 2014년에 작성한 것이고 GitHub의 원본 코드는 2014년과 2015년에 정리한 것이다. 2013년 프로젝트에서 TypeScript를 접했고 그해 KendoUI 개발을 접했을 때 TypeScript의 그림자를 접했기 때문에 1년 후에 공식 문서의 모든 API 문서를 진지하게 한 번 검토하고 작성 TypeScript 하기로 결정했다. 당초의 다운로드량은 비교적 높았다. Kotlin， TypeScript， Kotlin 개인적인 느낌으로 그의 문법은 ActionScript, Swift와 매우 비슷하다.그러므로 몇 년 동안 전단을 개발하지 못했지만 그 중요성 때문에 일부러 이 전단 언어를 다시 정리하였다.
    springjavamail과quartz를 통합하여 정해진 시간에 메일을 보내기
    PHP 오픈 소스 개발 프레임워크 ZendFramework 사용 중 FAQ 설명 및 솔루션

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage