暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

鲸技术:2019让我们拥抱TypeScript

中航鲸技术 2019-02-20
239


做前端开发的一定了解或离不开JavaScript,它是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。有着易学,易用,不用编译,跨平台等优点。


那既然有那么多优点,为什么我们还要费劲去用TypeScript去编译呢?这就要追溯到JavaScript设计之初了,它是一种为了实现让浏览器去做一些表单验证,而不用等待服务端去花个几秒钟给你反馈(那是一个绝大多数用户都在使用调制解调器上网的时代),一些诸如字段格式,数字位数的基本判断,在客户端就能很快地给于反馈,在那个年代是相当令人兴奋的功能。所以它被设计得相当灵活,能和HTML、CSS混合着使用。


但随着时代的变迁,JavaScript绝不仅仅是这点作用了,它被广泛地用于网站前端开发、网站后端开发、混合式移动应用开发、桌面软件开发、插件开发等,而且项目的工程量越来越庞大。面对这样的变化,原有的设计思路就有些不够用了。



上面的例子可以看出,灵活的代价,往往是出错的可能性增加,相信函数的预期一定不是这样的。当然,你可以说,我可以把参数先进行类型转换,但这个例子主要是告诉你,在弱类型的使用上,出错的可能性会增加,如果每个方法需要额外的类型判断,代码也显得冗余而不优雅,何不让语言本身为你解决这个问题呢。再设想一下,如果你面对的是一个同事开发的util库,提供的方法如果有类型提示会不会更好?而不是追着同事去问方法的参数类型是字符串还是数字型,亦或是展开一场调试大战呢?



什么是TypeScript


TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。它有助于我们在许多领域扩展我们的大型(相当复杂的)代码库。它包括:


good

1. 通过类型检查在构建之前捕获错误


2. 在许多我们喜爱的编辑器中提供代码提示补全和重构支持,例如VS Code


3. 允许我们在所有浏览器中使用JavaScript之前使用JavaScript的现代语言功能


我们认为,这些特性是很棒的(当然如果你是在做一个独自维护的小型项目的话,还是推荐JavaScript,毕竟它更容易使用)。随着如今互联网用户越来越多,相继的也越来越重视开发质量,毕竟你面对的是一个庞大的用户群,牵一发而动全身,一个bug往往是需要一个程序员祭天的。





React & TypeScript


之前鲸技术的前端文章提到过,将会选用React作为前端的开发框架,那让我们聊聊如何使用TypeScript去编写React应用


在过去的几年中,TypeScript已经开始在React世界中获得动力,现在,它已经在create-react-app中获得官方支持。因此,我们认为分享一些关于如何使用TypeScript启动新React项目的教程会很有帮助。




使用Create-react-app


通过npm安装最新的Create-React-App:


npm install -g create-react-app


现在,启动一个新项目create-react-app,指定项目名称,并添加TypeScript标志:


create-react-app reacttypescript --typescript

cd reacttypescript


这将使用TypeScript作为语言来构建一个新的React项目。接下来,启动开发服务器:


npm run start


恭喜,你的React项目在TypeScript中运行了!


请注意,你获得了TypeScript配置的tsconfig.json文件。你可以随意自定义此处的设置以满足你的需求。



在TypeScript中编写组件


接下来,让我们在TypeScript中创建一个新组件,并从我们的App中使用它,以查看我们现在得到的一些好处。



这个例子突出了TypeScript的一个主要好处,它通过HelloProps和HelloState接口,指定props和state对象的属性类型,然后将它们作为通用参数传递给Component类。


现在我们的组件是静态类型的,不再可能意外输入错误的props和state的属性成员,也不能尝试为其分配与该成员类型不匹配的值。


Typescript的优点在于您可以在代码编辑器中以及构建期间捕获这些错误,你可以在自己的编辑器中做尝试,体会其中的好处。


相信你会有不错的收获!


- END -






文章转载自中航鲸技术,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论