最近在學習Typescript,由於網上的資料不是很全面，在嘗試require,import,export功能是出現的點棘手的問題。
下面介紹下如果在vs開發typescript，使用到require,import，export功能時的配置。
首先我們做個例子1.創建ValidationUtils3.ts
export interface StringValidator { isAcceptable(s: string): boolean; }
2.創建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); } }
3.創建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); } }
上面的代碼邏輯我就不介紹了，語法不動的地方都可以上網查到。
下面是引用上面創建的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可以獲取到該js
最后測試頁的demo3.html
<!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>
<script src="Scripts/require.js"></script>是我們應用的RequireJs。
<script>require(["demo1/demo3/demo3"]);</script> 這一行是指我們需要引用demo3.js的方式，不能寫成 <script src="demo1/demo3/demo3.js"></script>，否則會報如下錯誤
Uncaught Error: Mismatched anonymous define() module: function (require, exports, telValidator, emailValidator)
詳情請查看requirejs相關文檔
下一步是設置vs工程的typescript編譯
在TypeScript生成選項中勾選模塊系統AMD
到此，就可以正常運行模塊間的引用了。