您的位置：首页 > 产品设计 > UI/UE

在vs中开发TypeScript，使用Require，import,export的实现

2016-03-08 12:29 671 查看

最近在学习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>

在TypeScript生成选项中勾选模块系统AMD

到此，就可以正常运行模块间的引用了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航