使用TypeScript如何提升JavaScript编程效果?

时间:2022-09-07 19:54:59

使用TypeScript如何提升JavaScript编程效果?

TypeScript是个什么鬼?和JavaScript有什么关系?

TypeScript是由微软开发的一种可快速入门的开源的编程语言,是JavaScript的一个超集,且向这个语言添加了可选的静态类型和基于类的面向对象编程。能够帮助web前端开发人员编出更出色的JavaScript代码、搞定规模可观的JavaScript项目并为ECMAScript 6的来临做好准备。

JavaScript是一款通用脚本语言,植根于开发工具的核心深处,同时在Node.js等服务器端实现方案中也有所体现。除此之外,JavaScript还是微软开发技术方案的关键组成部分,若想对office进行扩展,不使用JavaScript是不行的。

虽然JavaScript已发展得非常强悍了,但其离完美还有一大段距离,特别是在构建包含大量客户端代码的web应用时,JavaScript的不足之处就非常明显。这个时候,配合TypeScript使用,JavaScript的缺陷就可完美解决。只需在TypeScript当中编写代码,而后将其交付至编译器,即可将所开发代码转换为能够运行在服务器端,又可以由客户端中的HTML进行调用的JavaScript形式方案。

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

TypeScript允许我们面向变量进行类型声明,从而确保A始终属于整数而C始终属于字符串。虽然TyperScript的类型安全性并不像Fortran那么全面,但其仍然能够定义数字与字符串,并利用Boolean类型显著改善代码调试机制。除此之外,TyperScript还提供选项以实现类型推断,从而降低发生错误的可能性如果大家的代码为两个数字相加,那么TyperScript会认定其结果始终为数字。

通过使用TypeScript,开发者也可以将类型应用至数组中,或利用enums为特定变量名称设置值。如果不确定自己可能使用哪种类型,则可以将变量设定为any,在这种情况下TypeScript不会推断其具体类型、大家也不会因此遇到错误或者警告。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应用程序当中充分发挥由此带来的诸多优势。

在大型web应用程序的开发中,对JavaScript的使用,以TypeScript作为切入点,将大大提高我们开发的效率。TypeScript不仅能够帮助我们在具备充分掌控能力且遵循可重复使用方针的前提下完成编码工作,同时也能够拥有一条通往ECMAScript 6的理想路径。相信今后web前端开发,甚至整个web端所有网站的开发,都将逐步使用到TypeScript,以提高JavaScript的编程效果。

推荐学习:jQuery实战视频教程

使用TypeScript如何提升JavaScript编程效果?的更多相关文章

  1. Javascript编程风格

    Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么.我非常推荐这个演讲,它 ...

  2. 使用Typescript来写javascript

    使用Typescript来写javascript 前几天尝试使用haxejs来写javascript,以获得静态类型带来的益处.虽然成功了,但很快发现将它与angularjs一起使用,有一些不太顺畅的 ...

  3. javascript编程: JSON, Mapping, 回调

    使用 Javascript  编程, 组合使用 JSON 数据格式,Mapping 和回调技术, 可以产生很强的表达效果. 在实际工作中, 总会有数据汇总的需求. 比如说, 取得了多个 device ...

  4. Javascript编程模式(JavaScript Programming Patterns)Part 1.(初级篇)

    JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...

  5. javascript 拖放效果

    最近一直在看javascript的书籍,有些东西在书上看着貌似理解了,但是在真正动手实践时,其实有些细节你根本不了解.所以看起来就算是一个简单的效果,写起来也未必简单,就算写起来简单,写的代码也未必规 ...

  6. 《JavaScript编程实战》

    <JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...

  7. eval5&colon; TypeScript编写的JavaScript解释器

    eval5是基于TypeScript编写的JavaScript解释器,100%支持ES5语法. 项目地址:https://github.com/bplok20010/eval5 使用场景 浏览器环境中 ...

  8. 外媒速递:十大最佳心理学概念助你提升Web设计效果

    外媒速递是核子可乐精选的近日国外媒体的精彩文章推荐,希望大家喜欢! 本期给大家推荐的是帮助你提升Web设计效果的十大最佳心理学概念.改善企业云环境协作效率的九款卓越工具.选择移动应用开发工具时要考虑的 ...

  9. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

随机推荐

  1. 【C&num;进阶】多播委托和委托数组像是一回事~

    这个MathOperation类有三静态方法,参数都是double,并且没有返回值,考虑用Action<>() 这种预定义的委托哦 class MathOperations { publi ...

  2. mysql convert

    SELECT id,boshidianshu,boshidianshu_shuzi,CONVERT(REPLACE(boshidianshu, '个', ''),SIGNED) aaa from lg ...

  3. &lbrack;solaris&rsqb;odbc-oracle&comma;简单测试

    #include <string> #include <iostream> #include <stdio.h> #include <sql.h> #i ...

  4. Sqoop 将hdfs上的文件导入到oracle中,关于date类型的问题

    近期的项目中,需要将hadoop运行完成的结果(存在于hdfs上)导入到oracle中,但是在用sqoop导入hdfs中的日期字段'2016-03-01'时,sqoop报错,说date类型必须为'yy ...

  5. C&num;Winform 自定义透明按钮和单窗体模块化实现

    技术看点 WinForm自定义控件的使用 WinForm单窗体应用如何模块化 需求及效果 又来一波 C# GDI自定义控件show .这个控件已经使用几年了,最近找出来重构一下.原来是没有边框的,那么 ...

  6. TCPDF解决保存中文文件名的方法

    PHP使用TCPDF生成PDF文件时,如果文件名是中文会被直接过滤掉,以下是TCPDF不能保存中文文件名的解决方法: 打开tcpdf.php文件,找到output函数,大约在8467行 或(7554) ...

  7. &lbrack;日常&rsqb; nginx与负载均衡策略

    upstream mail.sina.net { #upstream的负载均衡,weight是权重,可以根据机器配置定义权重.weigth参数表示权值,权值越高被分配到的几率越大. server we ...

  8. 阿里p3c(代码规范,eclipse插件、模版,idea插件)

    阿里p3c 一.说明 代码规范检查插件p3c,是根据<阿里巴巴Java开发手册>转化而成的自动化插件. (高级黑:P-3C“Orion”,反潜巡逻机,阿里大概取p3c先进,监测,发现潜在问 ...

  9. LuoGu P1352 没有上司的舞会

    题目传送门 这可能是最简单的树形Dp了吧 对于每个人,要么他来,他的下属不来 要么他不来,他的下属爱来不来 于是设计状态: f[i][0/1]表示以i为根的子树中最大能达到的快乐值(i这个人选或者不选 ...

  10. H5C304

    H5C304 1.渐变 1)线性渐变 point,angle可取4个值:如上所示 需要使用background添加 2)径向渐变 position是按照元素右上为原点的 3)重复渐变 同样有重复线性渐 ...