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

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

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

 

posted on 2016-03-08 12:29  Shaon.Liu  阅读(22321)  评论(0)  编辑  收藏  举报

导航