为什么还需要学习TypeScript

 

 

开篇

 

TypeScript 是由 C#语言的创始人 Anders Hejlsberg 设计的一种编程语言,设计的初衷就是为了帮助 JavaScript 的开发人员能像类似高级语言c#,Java那样编写代码,比如使用高级语言的强类型、面向对象、语法检查,代码编译等特点。TypeScript包含一个编译器,可以将用TypeScript 编写的代码转换为原生的 JavaScript。

 

TypeScript 目前最新的版本是 3.x 了,是目前微软最好的产品之一,现在完全免费并且使用 Apache 协议开源了 TypeScript,并成为社区很活跃的框架之一。连谷歌这样的死对头,也拥抱 TypeScript ,在 Angular 2.0 版本就开始集成 TypeScript,如果你不学 TypeScript,Angular 这个框架就无法使用。目前 React 、Vue 在未来的版本都在考虑集成 TypeScript 。在可以预计的未来,如果还不开始学习 TypeScript,我们就不能使用这些框架的新特性了。

 

以下几个观点就是笔者强烈大家学习TypeScript的原因,纯属个人观点,如有不恰当地方,欢迎各位指正。

 

01

JavaScript 发展迅速

从目前 JavaScript 的发展和应用趋势来看,它的发展实在是太快了,你可以用它进行 web开发、移动应用开发、桌面软件开发、后端开发,以及未来成为趋势的 VR、WebGL及物联网的应用开发等,它的标准从2015年开始每年都会更新,更新实在是太快了,及时这样,但是与 java 和 c# 这些成熟的高级语言还有很大的距离。

 

使用 TypeScript 可以帮你降低 JavaScript 弱语言的脆弱性,帮你减少由于不正确类型导致错误产生的风险,以及各种 JavaScript 版本混杂造成错误的风险。

 

02

我们需要强类型的 JavaScript

从表面上看,TypeScript 像普通的 JavaScript 代码,这一特点就降低我们初学者的难度,因此不得不佩服微软的良苦用心。TypeScript 只是把高级语言的强类型这个最主要的特征引入 JavaScript ,就解决了防止我们在编写 JavaScript 代码时因为数据类型的转换造成的意想不到的错误,增加了我们排查问题的困难性。它为 JavaScript 上了一把高级语言强类型的锁,避免这类问题的产生,使用 TypeScript,你的代码可能是这样的:

 

 

 

 

也许你觉得这段代码很平常,如果你这样调用 increaseAge(cat),TypeScript会抛出一个错误,提示你 increaseAge 函数的参数必须是数字类型。如果使用原生的 JavaScript ,原生编译器则不会产生错误,还能正常的返回 Merlin1 的内容,这可不是我们期望的,这就大大增加了我们开发过程中潜在的风险,排查错误的困难性。

 

这就是 TypeScript 的魅力所在,提前帮我们发现代码出现错的风险。

 

03

按需输出 JavaScript 版本

前面提及到 JavaScript 发展迅速,估计 JavaScript 的创始人也没有想到能发展到今天的地步,JavaScript 的版本现在几乎每年都会有更新,如果你要写出兼容性的脚本,对于每位开发者就是一个相当大的挑战。TypeScript 却很好的解决了此问题,你可以按需输出你需要的脚本,比如 ECMAScript 3、ECMAScript 5 、ECMAScript 6 。

 

04

代码标准化利于团队开发

由于 JavaScript 本身语言的特点,还有其版本迭代太快的原因,团队成员使用 JavaScript 时很容易随意发挥,不受规范约束。你的团队当然可以针对这些版本的 JavaScript 做出使用规范,引入一些代码质量检测插件,比如eslint。整理这些内容,估计就需要花不少的时间,在团队推广和使用制定的规范又要花一段时间。与其花这些时间进行整理,还不如在TypeScript 的基础上,结合 TypeScript 的特点做一套标准即可来应对 JavaScript 版本不断的更新迭代。

 

05

主流框架及最新特性的支持

文章一开始笔者都提及到 Angular 2.0 版本就开始集成 TypeScript,用于解决版本兼容性和弱语言的特点,从而互相推动了各自的发展。时至今日,React 、Vue也要加入 TypeScript 的阵营,因此我们不得不去学好 TypeScript。

 

除了主流前端框架集成的问题,还有一个重要的原因,TypeScript 紧跟 JavaScript 的发展,比如 ES7 、ES8、ES9 相关语言的新特性都支持,比浏览器支持的速度更快。这就意味着你能用最新的语言特性,编写质量更高的 JavaScript。

 

 

 

如果你是 JavaScript 的新手,笔者不太建议你一上来就学习 TypeScript,建议你还是从基础的 JavaScript 学起。之所以有 TypeScript 这个工具,并不是为了吸引开发者学前端,而是为每个 JavaScript 开发者能像其它高级语言一样编写更健壮的代码。

 

当初之所以有 JavaScript 就是为了便携和简单性,但是随着时间的发展,已经大大超出了当初设计者的初衷。如果是几百行代码还好,但是随着多设备支持(pc、手机、各种移动终端及大屏设备),产品线的增长,项目越来越大,如果还用原始的方式编写 JavaScript ,维护的难度可想而知。

 

学习TypeScript本身并不难。它像JavaScript一样编写和运行,只是增加一些新的理念和语法糖,我们学起来也会更加顺手。

 

今天的内容就到这里,我说了这么多,以上纯属个人愚见,不知道是否能打动你去学习 TypeScript 呢 ?你有什么想法,欢迎到留言区发表你的意见。

 

原文地址:https://www.cnblogs.com/cczlovexw/p/11507696.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我最大的一个关于TypeScript的问题是,它将原型的所有方法(无论访问修饰符)编译.例classExample{publicgetString():string{return"HelloWorld";}privategetNumber():number{return123;}}众所周知,访问修饰符仅在编译时检
我对React很新,我正在尝试理解子组件之间相互通信的简洁方法.在一个简单的组件中,我知道我可以使用props将数据传递给子节点,并让子节点的回调将数据传递回父组件.在稍微复杂的情况下,当我在父组件中有多个子组件时,子组件之间的通信会有点混乱.我不确定我应该为同级别的儿童组
我有一个非常简单的表单,我将用户电子邮件存储在组件的状态,并使用onChange函数更新状态.有一个奇怪的事情发生在我的onChange函数用函数更新状态时,我在键入时在控制台中得到两个错误.但是,如果我使用对象更新状态,则不会出现错误.我相信用函数更新是推荐的方法,所以我很想知道为
我发现接口非常有用,但由于内存问题我需要开始优化我的应用程序,我意识到我并不真正了解它们在内部如何工作.说我有interfaceFoo{bar:number}我用这种类型实例化一些变量:letx:Foo={bar:2}Q1:这会创建一个新对象吗?现在,假设我想改变bar的值.我这样做有两种
我得到了一个json响应并将其存储在mongodb中,但是我不需要的字段也进入了数据库,无论如何要剥离不道德的字段?interfaceTest{name:string};consttemp:Test=JSON.parse('{"name":"someName","age":20}')asTest;console.log(temp);输出:{name:'someName
我试图使用loadsh从以下数组中获取唯一类别,[{"listingId":"p106a904a-b8c6-4d2d-a364-0d21e3505010","section":"section1","category":"VIPPASS","type":"paper","availableTi
我有以下测试用例:it("shouldpassthetest",asyncfunction(done){awaitasyncFunction();true.should.eq(true);done();});运行它断言:Error:Resolutionmethodisoverspecified.SpecifyacallbackorreturnaPromise;n
我正在一个有角度的2cli项目中工作,我必须创建一个插件的定义,因为它不存在它的类型.这个插件取决于已经自己输入的主库,它可以工作.无论如何,我有两个文件主要的一个图书馆类型文件AexportclassAextendsB{constructor(...);methodX():void;}我需要为我的
我有三元操作的问题:leta=undefined?"Defined!":"DefinitelyUndefined",b=abc?"Defined!":"DefinitelyUndefined",//ReferenceErrorc=(abc!==undefined)?"Defined!":"DefinitelyUndefin
下面的代码片段是30秒的代码网站.这是一个初学者的例子,令人尴尬地让我难过.为什么这样:constcurrentURL=()=>window.location.href;什么时候可以这样做?constcurrentURL=window.location.href;解决方法:第一个将currentURL设置为一个求值为window.location.href的
我是TypeScript和AngularJS的新手,我正在尝试从我的API转换日期,例如:"8/22/2015"…到ISO日期.将日期正确反序列化为Date类型的TypeScript属性.但是,当我尝试以下命令时(在typescript中,this.dateDisplay的类型为string)this.dateDisplay=formats.dateTimeValue.toISOString
我的名为myEmployees的数组中有5个名字,但是当我运行代码时,它只打印出其中的3个.我相信这种情况正在发生,因为脚本中的for循环覆盖了它在HTML文档中编写的前一行.我怎样才能解决这个问题?YearlyBulletinBoardAnnouncements!CongratulationstoTaylor,youhavebeenheref
我看到有一种方法可以在摩纳哥编辑器中设置scrolltop.如何滚动到特定行而不是特定像素?解决方法:如在文档中:https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.icodeeditor.html滚动到顶部,在px中:editor.setScrollPosition({scrollTop:0});滚动到特定
在从同一个类继承的一个数组中收集各种不同的对象时,如何在TypeScript中设置一个优等的类,以便TypeScript不显示错误?我正在尝试这样:interfaceIVehicle{modelName:string}interfaceICarextendsIVehicle{numberOfDoors:number,isDropTop:boolean}inte
什么是TypescriptTypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。作者是安德斯大爷,Delphi、C#之父(你大爷永远是你大爷)。把弱类型语言改成了强类型语言,拥有了静态类型安全检查,IDE智能提示和追踪,代码重构简单、可读性
0.系列文章1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手,跑通流程3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数5.使用Typescript重构axios(五
1.1Typescript介绍1.TypeScript是由微软开发的一款开源的编程语言,像后端java、C#这样的面向对象语言可以让js开发大型企业项目。2.TypeScript是Javascript的超级,遵循最新的ES6、Es5规范(相当于包含了es6、es5的语法)。TypeScript扩展了JavaScript的语法。3.最新的Vu
0.系列文章1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手,跑通流程3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数5.使用Typescript重构axios(
webpack.config.jsconstpath=require('path');constCopyWebpackPlugin=require('copy-webpack-plugin');constExtractTextPlugin=require('extract-text-webpack-plugin');const{CleanWebpackPlugin}=require('clean-webpac
我在这篇ECMAScriptpage上读到“class”是JavaScript的一部分.在这个关于TypeScript的页面上,我看到’class’也可以在Typescript中找到.我的问题是,开发未来JavaScript应用程序的正确方法是利用(a)JavaScript中的面向对象功能以及EMACScript7.0中可用的功能或(b)使用TypeScript