1780人阅读
ASP.NET 5（7）
& & & &编者语 ： 人总会多次犯错，历史上告诫大家不要在演讲前更新最新版本的软件，但周末我又一次错了......好吧下次我坚决录屏。本来约好周日和大家见，但深圳回来后又是各种的会议耽搁到现在真的不好意思。大家想我了吗？上周发了4篇，貌似效果都不错，谢谢徐总和善友的微信推广。感恩，感谢有这群好兄弟的支持！今天和大家聊聊TypeScript 。有人觉得这个话题与ASP.NET 5 无关但是个人觉得关系比较密切，毕竟你要做前端
& & & & 什么是TypeScript ?
& & & & TypeScript 是JavaScript 的超集，它给JavaScript带来了面向对象，也带来了静态类型。在你的项目中不需要修改任何现有JavaScript代码就可以注入TypeScript代码。通过TypeScript你可以规范JavaScript代码方式并以面向对象的方式构建你的前端。TypeScript已经支持现在流行的JavaScript库，让你更容易去和现有项目结合，如Jquery/AngularJS/KnockoutJS/NodeJS等。
& & & &&TypeScript环境配置
& & & &&1.安装
& & & & npm install -g typescript
& & & &&2.开发环境
& & & & 个人建议还是在Sublime Text ,通过Control Package 安装Better TypeScript .
& & & & TypeScript的几个主要特点
& & & & &1. 静态类型
& & & & & TypeScript通过静态类型规范了JavaScript变量的声明，并在编译时提供类型检查。如下图
& & & & &&
& & & & 这里定义了一个类，并在类中定义了一个getJSON的方法，这里结合静态类型对方法所传送的参数进行类型定义， 并返回void。如果你用传统的JavaScript写，虽然弱类型的方式比较方便，但是对于传参的类型不明确。通过TypeScript你就可以像C/C++那样编写你的前端代码。这里说明一点，当你对于对象的类型不太明确时你可以用any（动态类型）取代。
& & & & 2. 面向对象
& & & & TypeScript为JavaScript带来了interface/class/module等面向对象的特性。这个好处除了规范代码，也可以规范前端项目结构。以往我们的JS项目用传统的MVC/MVVM入手总因为JavaScript太过灵活，导致架构无从入手。通过TypeScript你可以利用面向对象去整合你的前端代码。
& & & &&&&
& & & & 3.ts编译器
& & & &通过tsc 可以将TypeScript的ts文件编译为通用的JavaScript文件。当然你可以选择预编译的方式，也可以选择实时编译的方式。还是那句咸鱼白菜各有所爱，就看自身需求。而我在项目中我喜欢用预编译。
& & & & 4.第三方库支持
& & & & 现在TypeScript都和主流的库都有匹配对应，你可以从nuget/上面的链接中获取。本人架构前端基本上基于AngularJS/KnockoutJS, 基本上没有大问题。更可喜的是AngularJS 2.0 和TypeScript进行了更加深入的整合（Google+Microsoft）。
& & & & 基于TypeScript的前端，让你写代码更Cool,更不会再让你为一些奇怪的语法而迷惑。我喜欢TypeScript，你呢？
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：89301次
积分：1228
积分：1228
排名：千里之外
原创：33篇
评论：43条
(2)(2)(2)(2)(5)(5)(1)(1)(1)(1)(3)(6)(2)您所在的位置： &
直接在浏览器上使用TypeScript脚本语言
直接在浏览器上使用TypeScript脚本语言
Typescript 要求你必须预编译来生成 JavaScript 代码，现在也可以直接在浏览器上动态编译，但你必须引用 Typescript.js 这个 JS 编译器，这个编译器有 250Kb 大小，这可能是一颗很难咽下的药丸。
已经有很多社区的文章在介绍 Typescript&这个新的语言，这是理所当然的 - 因为它解决了很多JavaScript的问题，尽管处于起步阶段，却已经显示了巨大的潜力。
Typescript 要求你必须预编译来生成 JavaScript&代码，现在也可以直接在浏览器上动态编译，但你必须引用 Typescript.js&这个 JS 编译器，这个编译器有 250Kb 大小，这可能是一颗很难咽下的药丸。
好在，通过&ASP.NET 的瑞士军刀 &&&Web API ，我们可以实现对 Typescript&动态编译为 Javascript。
为了不用再每次修改 Typescript&后都要手工编译，我们将透过&Web&API&来为我们完成这项工作，使用的是定制的 MediaTypeFormatter.
你所需要做的就是通过一个特定的预先配置好的&Web&API&路由/控制器来引用这个 JS 编译器脚本(Typescript.js)，然后让&Web&API&管道通过 MediaTypeFormatter&来完成这项重任务。
路由和控制器
我们在 HTML&中引用编译后的 js 文件如下：
&script&type=&text/javascript&&src=&/dynamic/scripts/demo.js&&&/script&&
为了实现这个目的，新建一个典型的&MVC4， Web&API&项目。
需要一个定制的路由和一个简单的控制器：
config.Routes.MapHttpRoute( &&&&&name:&&DynamicScripts&, &&&&&routeTemplate:&&dynamic/{controller}/{name}.{ext}&, &&&&&defaults:&new&{&name&=&RouteParameter.Optional,&ext&=&RouteParameter.Optional&}, &&&&&constraints:&new&{&controller&=&&Scripts&&} &);&
public&class&ScriptsController&:&ApiController &{ &&&&&public&string&Get(string&name) &&&&&{ &&&&&&&&&return& &&&&&} &}&
这个路由可以让我们传递一个 name 参数和一个扩展(用于匹配所需的 filename.js)，然后控制器简单的将文件对应的请求重定向到&formatter&中。
为了让上述思路可行，我们需要命令行的 Typescript 编译器，可从 &上获取，选择中间那个 (Plugins)，推荐 Visual Studio 2012，但 2010 也没关系，我们只关心命令行工具而已。
一旦安装成功，你会找到一个名为&TCS.exe 的可执行文件，默认位于 C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\.&将所有编译器文件拷贝到解决方案目录下的 TS&文件夹。
格式化器/编译器
注意下面的代码应根据你特定的需求进行调整（包括持久化机制、错误处理等等）：
public&class&TypeScriptMediaTypeFormatter&:&MediaTypeFormatter &{ &&&&&&&&&private&static&readonly&ObjectCache&Cache&=&MemoryCache.D &&&&&&&&&&public&TypeScriptMediaTypeFormatter() &&&&&&&&&{ &&&&&&&&&&&&&this.AddUriPathExtensionMapping(&js&,&&text/html&); &&&&&&&&&} &&&&&&&&&&public&override&void&SetDefaultContentHeaders(Type&type,&System.Net.Http.Headers.HttpContentHeaders&headers,&System.Net.Http.Headers.MediaTypeHeaderValue&mediaType) &&&&&&&&&{ &&&&&&&&&&&&&headers.ContentType&=&new&MediaTypeHeaderValue(&application/javascript&); &&&&&&&&&} &&&&&&&&&&public&override&bool&CanReadType(Type&type) &&&&&&&&&{ &&&&&&&&&&&&&return&false; &&&&&&&&&} &&&&&&&&&&public&override&bool&CanWriteType(Type&type) &&&&&&&&&{ &&&&&&&&&&&&&return&type&==&typeof(string); &&&&&&&&&} &&&&&&&&&&public&override&Task&WriteToStreamAsync(Type&type,&object&value,&Stream&writeStream,&HttpContent&content,&TransportContext&transportContext)&{ &&&&&&&&&&} &}&
在我们开始写数据到流前，所有代码的执行都是很耗资源的，注意我们设置了一些默认值，我们添加了 UriPathExtensionMapping 这样格式化器就可以处理所有 .js&请求。所有的输出的内容&content-type&将是 application/javascript ，告诉浏览器这些都是 js 文件。也支持请求 text/html, 某些浏览器可能会这样。
我们只支持序列化（单向的格式化，非反序列化），而且只接受字符串。
WriteToStreamAsync
MediaTypeFormatter 方法根据如下流程将数据写到流中：
1.文件名(Typescript 文件)
2.检查 TS 文件是否存在
3.检查缓存，如果相应的文件已存在则使用MD5 checksum&来确保文件没有改动
4.如果没改动则直接从缓存中返回内容
5.如果改动了，或者缓存文件不存在则使用&tcs.exe 编译并返回 JS
6.将第5步生成的 JS 和 MD5 checksum 内容保存到缓存中以便继续使用
public&override&Task&WriteToStreamAsync(Type&type,&object&value,&Stream&writeStream,&HttpContent&content,&TransportContext&transportContext) &{ &&&&var&serverPath&=&HttpContext.Current.Server.MapPath(&~/tsc&); &&&&var&filepath&=&bine(serverPath,&value.ToString()&+&&.ts&); &&&&var&jsfilepath&=&bine(serverPath,&value.ToString()&+&&.js&); &&&&&var&tcs&=&new&TaskCompletionSource&object&(); &&&&&if&(File.Exists(filepath)) &&&&{ &&&&&&&string&cachedItem&=&CheckCache(filepath,&value&as&string); &&&&&&&&if&(cachedItem&!=&null) &&&&&&&{ &&&&&&&&&&using&(var&writer&=&new&StreamWriter(writeStream)) &&&&&&&&&&{ &&&&&&&&&&&&&writer.Write(cachedItem); &&&&&&&&&&} &&&&&&&} &&&&&&&else&&&&&&&{ &&&&&&&&&&var&typescriptCompiler&=&new&ProcessStartInfo &&&&&&&&&&{ &&&&&&&&&&&&&UseShellExecute&=&false, &&&&&&&&&&&&&RedirectStandardError&=&true, &&&&&&&&&&&&&FileName&=&bine(serverPath,&&tsc.exe&), &&&&&&&&&&&&&Arguments&=&string.Format(&\&{0}\&&,&filepath) &&&&&&&&&&}; &&&&&&&&&&&var&process&=&Process.Start(typescriptCompiler); &&&&&&&&&&var&result&=&process.StandardError.ReadToEnd(); &&&&&&&&&&process.WaitForExit(); &&&&&&&&&&&if&(string.IsNullOrEmpty(result)) &&&&&&&&&&{ &&&&&&&&&&&&&using&(var&filestream&=&new&FileStream(jsfilepath,&FileMode.Open,&FileAccess.Read)) &&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&filestream.CopyTo(writeStream); &&&&&&&&&&&&&&&&var&fileinfo&=&new&Dictionary&string,&string&(); &&&&&&&&&&&&&&&&fileinfo.Add(&md5&,&ComputeMD5(filepath)); &&&&&&&&&&&&&&&&&using&(var&reader&=&new&StreamReader(filestream)) &&&&&&&&&&&&&&&&{ &&&&&&&&&&&&&&&&&&&filestream.Position&=&0; &&&&&&&&&&&&&&&&&&&var&filecontent&=&reader.ReadToEnd(); &&&&&&&&&&&&&&&&&&&fileinfo.Add(&content&,&filecontent); &&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&&Cache.Set(value&as&string,&fileinfo,&DateTime.Now.AddDays(30)); &&&&&&&&&&&&&} &&&&&&&&&&} &&&&&&&&&&else&&&&&&&&&&{ &&&&&&&&&&&&&throw&new&InvalidOperationException(&Compiler&error:&&&+&result); &&&&&&&&&&} &&&&&&&} &&&&} &&&&&&&&&&&&& &&&&tcs.SetResult(null); &&&&return&tcs.T &} &&private&string&CheckCache(string&filepath,&string&filename) &{ &&&&var&md5&=&ComputeMD5(filepath); &&&&var&itemFromCache&=&Cache.Get(filename)&as&Dictionary&string,&string&; &&&&&if&(itemFromCache&!=&null) &&&&{ &&&&&&&if&(itemFromCache[&md5&]&==&md5) &&&&&&&{ &&&&&&&&&&return&itemFromCache[&content&]; &&&&&&&} &&&&} &&&&return&null; &} &&private&string&ComputeMD5(string&filename) &{ &&&&var&sb&=&new&StringBuilder(); &&&&using&(var&file&=&new&FileStream(filename,&FileMode.Open,&FileAccess.Read)) &&&&{ &&&&&&&var&md5&=&new&MD5CryptoServiceProvider(); &&&&&&&var&bytes&=&puteHash(file); &&&&&&&&for&(int&i&=&0;&i&&&bytes.L&i++) &&&&&&&{ &&&&&&&&&&sb.Append(bytes[i].ToString(&x2&)); &&&&&&&} &&&&} &&&&return&sb.ToString(); &}&
这样做的好处是文件修改时我们只需要编译一次就可以重复使用，这里选用的是直接在内存中缓存，你也可以使用其他方式，例如返回磁盘中的 js 文件之类的。原则上，我们是通过 MD5 checksum&来确定文件是否修改。
注意这里使用了 TCS 进程的 StandardError&属性来判断编译器运行成功运行，如果编译过程中发生任何错误，该属性将会包含详细的错误信息，否则就是空的。
假设有如下的 TS 文件，名为 demo.ts:
class&Person&{ &&&&constructor(public&name)&{&} &&&&sing(text)&{ &&&&&&&&return&this.name&+&&&sings&&&+& &&&&} &}&
我在 HTML 页面中引用如下，使用相同的名称，只是将 ts 扩展名改为 js，这样该请求就会触发控制器调用编译方法：
&script&type=&text/javascript&&src=&/dynamic/scripts/demo.js&&&/script&&
现在&Web&API&将即时编译 demo.ts 并生成所需的 js 输出到浏览器，而我们并没有手工去编译它：
而且 JS 内容是缓存的，以后再次刷新页面无需重新编译 ts 文件。
我的调用结果：
如果修改了 Typescript&代码：If I change the Typescript code to something else & i.e. let&s modify the sing method:
class&Person&{ &constructor&(&public&name&)&{&} &sing&(&text&)&{ &return&this&.&name&+&&&sings&&&+&text&+&&&and&it's&embarassing.&&; &} &}&
我不需要重新编译，只需要刷新页面，因为 MD5 checksum 不匹配，因此 TS&会自动重新编译并生成新的 JS ：
我们前面提到的，Typescript 可使用纯 JavaScript&来编译生成 JavaScript，但因为 JS 编译器本身有 250Kb 大小，因此采用了这种方法来避免编译器的加载变得让人无法接受。
当然，如果你使用的是其他的&Web&开发技术，也可以参考这个思路来实现。
原文链接：【编辑推荐】【责任编辑： TEL：（010）】
关于&&的更多文章
又是一周匆匆而过。上周五、周六两天，2013年51CTO云计算架构师
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
很久很久以前，冬天爱上了夏天，可是他们始终不能相见
流火过，金秋来，在学校开学之前的最后一周，终于凉快
又到了一周的末尾，闷热过后，这周的温度算是降下来了
本书全面深入地介绍网络安全的配置与实现技术，包括系统管理、用户账户、病毒防御、灾难恢复、文件备份、安全策略、注册表等服务
51CTO旗下网站}