转发:微软MVP 卢建晖 的文章,希望对大家有帮助。原文:http://blog.csdn.net/kinfey/article/details/44568971


编者语 : 人总会多次犯错,历史上告诫大家不要在演讲前更新最新版本的软件,但周末我又一次错了......好吧下次我坚决录屏。本来约好周日和大家见,但深圳回来后又是各种的会议耽搁到现在真的不好意思。大家想我了吗?上周发了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可以从这里获取)

现在TypeScript都和主流的库都有匹配对应,你可以从nuget/上面的链接中获取。本人架构前端基本上基于AngularJS/KnockoutJS, 基本上没有大问题。更可喜的是AngularJS 2.0 和TypeScript进行了更加深入的整合(Google+Microsoft)。

基于TypeScript的前端,让你写代码更Cool,更不会再让你为一些奇怪的语法而迷惑。我喜欢TypeScript,你呢?


欢迎关注本博客微信订阅号 anb-io。每周推送内容,有技术也有生活,和你一起做一个有情怀的程序猿。

世界上不是所有的东西都是用直接经济契约来维系的,比如:阳光,空气,爱情和开源软件。

(转) 一步一步学习ASP.NET 5 (五)- TypeScript的更多相关文章

  1. 学习ASP.NET MVC(五)——我的第一个ASP.NET MVC CURD页面

    在上一篇文章中我们已经创建了实体类,在这一篇文章中,我将创建一个新的控制器类——BookController,使用BookController对Books表中的数据进行CURD操作的方法,并使用视图模 ...

  2. 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面

    在本篇文章中,我将添加一个新的查询页面(SearchIndex),可以按书籍的种类或名称来进行查询.这个新页面的网址是http://localhost:36878/Book/ SearchIndex. ...

  3. 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序

    学习ASP.NET MVC系列: 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序 学习ASP.NET MVC(二)——我的第一个ASP.NET MVC 控制器 学习ASP ...

  4. 学习ASP.NET MVC(九)——“Code First Migrations ”工具使用示例

    在上一篇文章中,我们学习了如何使用实体框架的“Code First Migrations ”工具,使用其中的“迁移”功能对模型类进行一些修改,同时同步更新对应数据库的表结构. 在本文章中,我们将使用“ ...

  5. 学习ASP.NET MVC(十一)——分页

    在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...

  6. 学习ASP.NET MVC系列 - 还有比这更简炼的吗?把复杂的事情变简单了,贡献啊!

    转自

  7. (转) 一步一步学习ASP.NET 5 (四)- ASP.NET MVC 6四大特性

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44459625 编者语 : 昨晚写好的文章居然csd ...

  8. (转) 一步一步学习ASP.NET 5 (二)- 通过命令行和sublime创建项目

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助. 注:昨天转发之后很多朋友指出了vNext的命名问题,原文作者已经做出了修改,后面的标题都适用 asp.net 5这个名称. 编者语 : 昨天发了第 ...

  9. 3、带你一步一步学习ASP.NET Core中的配置之Configuration

    如果你是刚接触ASP.NET Core的学习的话,你会注意到:在ASP.NET Core项目中,看不到.NET Fraemwork时代中的web.config文件和app.config文件了.那么你肯 ...

随机推荐

  1. Access is denied

    昨天有学习ASP.NET MVC的publish和IIS发行网站<简单的ASP.NET MVC发布>http://www.cnblogs.com/insus/p/4466200.html  ...

  2. C# 重载的几种实现

    算法重用是非常普遍的需求,在C#中可以使用如下手段实现,非常简单,自己记录一下,方便查询. 以一个小功能为例来说明一下:打印1-5这5个数,和A-E这5个字符. 重载方式 static void Ma ...

  3. JS获取子窗口中返回的数据

    在开发的时候,遇到了这样一个问题,客户填写自己的收货地址,可以新建,但同时也可以选择之前填写的,由于我们的客户本身就是商户,地址繁多,把它之前的地址简单用个下拉框罗列出来显然不合适,并且客户要求能够对 ...

  4. Web Api中的get传值和post传值

    GET 方式 get方式传参 我们一般用于获取数据做条件筛选,也就是 “查” 1.无参 var look = function () { $.ajax({ type: "GET", ...

  5. 修正 XE5 Android 键盘三个问题

    说明:XE5 在 Android 平台上存在这一些键盘操作的问题,目前发现有下列几种: 按键盘上的隐藏键后,无法按上一页(需要修改 XE5 源码「FMX.VirtualKeyboard.Android ...

  6. Spring mvc web.xml中 urlpatten的配置问题

    在使用spring mvc 是我们会配置spring 的DispatcherServlet作为请求的转发器. <servlet> <servlet-name>spring< ...

  7. python django 多级业务树形结构规划及页面渲染

    概述: 在项目中,父级到子级结构并不少见,如果仅仅的两层树形结构,我们可以使用数据库的外键设计轻松做到,子级业务表设计一字段外键到父级业务表,这样子到父.父到子的查询都非常简单. 但是往往父子结构会有 ...

  8. ViewHolder被设计成静态内部类的作用

    当你的内部类不需要依赖于外界的属性或方法等,而又想提供给外界使用,可以采取静态内部类的方式来写 其中static的作用是可以提供给外界调用,比如说类名.内部类这种方式 而ViewHolder的实际是为 ...

  9. git常用命令表

    本文主要是用来记录一些在git管理的项目中常见的场景及其对应的命令,方便自己和他人使用的时候快速查询.如有不对,敬请指正. 查看某个git命令的帮助文档 git help [command] 查看各个 ...

  10. CSS之详解:active选择器

    Active的一段话 active的英文解释为"积极的",表现在鼠标上就是点击的意思.关于active选择器最多的示例恐怕就是应用在链接上面的,然而打开链接是一个一瞬间的动作,这不 ...