在vs中開發TypeScript，使用Require，import,export的實現

時間 2019-12-19

標籤開發 typescript 使用 require import export 實現简体版

原文原文鏈接

最近在學習Typescript,因爲網上的資料不是很全面，在嘗試require,import,export功能是出現的點棘手的問題。html

下面介紹下若是在vs開發typescript，使用到require,import，export功能時的配置。jquery

首先咱們作個例子1.建立ValidationUtils3.ts正則表達式

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

2.建立EmailValidator.tstypescript

/**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);
    }
}

3.建立TelValidator.tsrequirejs

/**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);
    }
}

上面的代碼邏輯我就不介紹了，語法不動的地方均可以上網查到。學習

下面是引用上面建立的typescript文件，並寫測試執行代碼demo3.ts測試

/// <reference path="../../scripts/jquery.d.ts" />
/***
* import 與 require 關鍵字使用..require(是命令，要求的意思.)
*/
//引入 ValidationUtils3.ts 文件,前面這個是用了 module 塊關鍵字定義 ts 文件，須要用
import validation = require('./ValidationUtils3');
import telValidator = require('./TelValidator');
import emailValidator = require('./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);
        }
    });
});

後面是最重要的，由於typescript中若是使用了require ,export,import功能，須要應用到RequireJS.經過vs的NuGet能夠獲取到該jsui

最後測試頁的demo3.htmlspa

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-2.2.1.js"></script>
    <script src="demo1/demo2/panel.js"></script>-->
    <script src="Scripts/require.js"></script>
    <script>require(["demo1/demo3/demo3"]);</script>

</head>
<body>
    <div id="msg1"></div>
</body>
</html>