如何利用TypeScript提升JavaScript编程效果

译文
移动开发 Android
如果非要从现代开发领域找出一种通用语言的话,那么大多数人可能会把支持票投给JavaScript,网景公司打造的这款浏览器脚本语言在其近二十年的发展历程当中一直在不断成长,而且如今几乎渗透到了我们生活的方方面面。

TypeScript能够帮助大家编写出更出色的JavaScript代码、搞定规模可观的JavaScript项目并为ECMAScript 6的来临做好准备——更重要的是,上手TypeScript几乎没有任何难度可言。

如果非要从现代开发领域找出一种通用语言的话,那么大多数人可能会把支持票投给JavaScript。网景公司打造的这款浏览器脚本语言在其近二十年的发展历程当中一直在不断成长,而且如今几乎渗透到了我们生活的方方面面。它不仅植根于开发工具的核心深处,同时也在Node.js等服务器端实现方案中有所体现,甚至已经作好了进军微服务架构的战斗准备。JavaScript同时也是相当一部分微软开发技术方案的关键性组成部分。打算对微软Office进行扩展?我们必须得使用JavaScript。想为Windows 10编写一套用户界面?JavaScript仍然是最好的选择。

不过JavaScript本身还远远称不上完美,特别是在大家希望构建一款包含有大量客户端代码的大型Web应用程序时。在这种情况下,TypeScript现身救驾了。TypeScript属于JavaScript的一套超集,其中不仅加入了大量用于即将面世的ECMAScript 6的功能特性,同时也可以通过编译将开发成果转换为JavaScript代码以供现代浏览器接纳——当然也包括Node.js。

TypeScript是由微软公司下辖的技术团队负责设计,负责人为Anders Hjelsberg(他最广为人知的成果应该是Turbo Pascal、Delphi以及C#)。微软的这个专项团队在设计过程中,将TypeScript打造成了一款能够利用编译器将所开发代码转换为JavaScript形式的方案。大家只需在TypeScript当中编写代码,而后将其交付至编译器即可。由此生成的JavaScript转换结果既能够运行在服务器端,又可以由客户端中的HTML进行调用。

TypeScript还将大量ECMAScript 6功能加入到了JavaScript当中,具体包括类与模块。此外,该团队还尝试将这两种本是同根生的语言加以进一步融合,从而满足ECMAScript 6的标准化方法要求。这绝对是个明智的决定。通过这种方式,大家可以利用TypeScript开发出能够为ECMAScript 6所接纳的代码,同时充分发挥TypeScript的静态类型优势以提升代码安全性水平。

如果大家此前曾经使用过C或者Fortran等语言,那么一定不会对静态类型感到陌生——它允许我们面向变量进行类型声明,从而确保A始终属于整数而C始终属于字符串。虽然TyperScript的类型安全性并不像Fortran那么全面,但其仍然能够定义数字与字符串,并利用Boolean类型显著改善代码调试机制。除此之外,TyperScript还提供选项以实现类型推断,从而降低发生错误的可能性——例如我们可能会把某个对象分配给未经过适当转换的字符串。如果大家的代码为两个数字相加,那么TyperScript会认定其结果始终为数字。

大家也可以利用TypeScript将类型应用至数组当中,或者利用enums为特定变量名称设置值。作为一款极具实用性的工具,enums具备双向属性,因此大家可以利用它通过数字来查找某条变量名称——这就使得大家可以在代码当中更轻松地建立键/值记录。如果大家不确定自己可能使用哪种类型,则可以将变量设定为any,在这种情况下TypeScript不会推断其具体类型、大家也不会因此遇到错误或者警告。TypeScript类型可以自行选择,因此我们用不着在编译或者运行之前、首先向现有代码添加各种类型,而这将有效简化现有代码的相关迁移工作。再有,我们可以从纯JavaScript代码入手,而后随着其它TypeScript功能的加入而同时添加相关类型。

需要注意的是,大家的现有JavaScript代码将成为TypeScript应用程序的一部分加以运行。而如果将代码迁移到ECMAScript 6或者TypeScript语法形式下,大家即可享受到TypeScript的各种功能优势。而如果我们使用具备TypeScript识别能力的工具,则可以拥有面向Visual Studio IntelliSense的支持能力——其能够帮助我们对函数调用中的类型进行管理。除此之外,大家也能够利用TypeScript声明文件向各类常用库及服务中快速添加类型支持,例如人气极高的jQuery库。

拥有这样一款类型化且近似于JavaScript的语言能够给类使用与模块构建带来显著简化(与AngularJS当中的处理方式非常相近)。类型的存在能够确保某个警告类中的所有实例都通过字符串进行调用,这将帮助我们轻松构建起更理想的构造函数。大家可以将这种类型化构造函数调用视为一种契约,负责定义两段代码之间的相互作用——并帮助我们更轻松地在不同应用程序之间重复使用同一函数。

在函数调用当中定义类型正是创建接口结构的关键所在,能够使我们的代码更具面向对象特性。大家可以将函数元素明确定义为接口,并选择在函数当中使用更具描述性的名称,同时又不会影响到进行调用检查时向IntelliSense等函数所必需的工具发出通知。

以这种方式定义类型与接口,能够让多位开发人员轻松对大型JavaScript项目加以管理。而在函数与类设计中秉持“接口至上”的契约化方法,则能够帮助大家在对应用程序中特定部分进行优化时不至于影响到其余部分,或者从其他开发者手中借用某种接口定义并直接运用到其它实现方案当中。这种方式允许我们以更为高效的方式使用诸如Git以及GitHub等工具,从而在一套持续开发模型当中轻松管理多个代码分支。

如果大家使用的是Java或者C#语言,那么对TypeScript(以及ECMAScript 6)的类实现机制一定不会感到陌生。大家可以在构造函数之内创建类,从而对方法中所使用的类型进行定义,最终利用类似的来处理各种内部对象。大家也可以利用继承、添加功能与重写方法等方式对类进行扩展。而更值得注意的是,TypeScript还支持常见于函数与接口当中的泛型——其能够帮助大家交付可重复使用的函数。

一旦掌握了TypeScript处理类与函数的方式,大家就可以着手将其组织在模块当中,在这里类与函数能够被拆分至多个文件当中。这显然是一种非常便捷的代码组织方案——举例来说,我们可以利用几个文件来处理购物车当中的不同函数。在此之后,大家可以对各个子模块进行分别更新,从而在特定函数中利用调整归零机制改善其性能水平,同时又不至于对其它函数造成影响。具备声明文件的JavaScript库也可以作为模块使用,因此大家能够在TypeScript应用程序当中充分发挥由此带来的诸多优势。

如果大家希望利用TypeScript处理日常开发工作,那么当前版本的Visual Studio以及新的Visual Studio Code跨平台编辑工具都提供相关支持能力。除此之外,TypeScript网站上还拥有一套在线编码环境,大家可以点击此处访问并在这里体验自己的编码思路或者查看在线教程。

在将JavaScript引入大型乃至超大型项目当中时,以TypeScript作为切入点能够带来极为可观的现实意义。TypeScript不仅能够帮助大家在具备充分掌控能力且遵循可重复使用方针的前提下完成编码工作,同时也能够拥有一条通往ECMAScript 6的理想路径。

责任编辑:chenqingxiang 来源: 51CTO
相关推荐

2021-01-12 10:22:45

JavaScript并发控制前端

2024-06-28 16:15:59

CIO销售漏斗

2023-06-07 09:00:00

JavaScript开发TypeScript

2015-07-24 19:10:47

大数据

2011-08-09 17:15:45

注册表注册表编辑器

2010-11-18 23:39:48

云计算

2020-04-17 10:14:47

人工智能AI客户服务

2016-10-27 08:39:35

大数据设计定量

2019-08-30 08:54:05

TypeScriptJavaScript语言

2012-10-08 09:15:57

JavaScriptJSTypeScript

2018-01-10 15:03:27

前端TypeScriptJavaScript

2022-05-30 14:33:55

MLOpsIDC人工智能

2010-07-30 13:08:38

Flex调用JavaS

2021-04-24 23:31:18

Python日志编程

2011-09-15 17:49:32

Windows7效率

2023-12-01 07:10:01

JavascriptTypescript

2009-06-18 12:21:07

javascriptdom

2016-01-29 10:39:35

排序搜索美团

2020-10-15 13:29:57

javascript

2017-05-22 14:28:02

CreamVim用户体验
点赞
收藏

51CTO技术栈公众号