奕玖科技 > 新闻中心 > 技术文章

TypeScript与JavaScript对数据处理的对比

来源: 奕玖科技 瘦死的猪 | 2022/12/13 16:59:26

最近由于我自己开发的后台管理系统升级到vue3,然后自然把以前的Vue2的JavaScrip代码转换成了TyepScript。在此之前我也并未学习过TypeScript。只是大概了解了一下TS的语法,感觉其实TS还是很简单的。大体跟JS也没啥太大的区别。因为实际也是重构了后台管理系统的代码,所以决定分享一下自己在重构过程当中的一些心得,如果有兴趣学习TS的朋友或许可以在我这里得到一些经验。当然如果我们要开始学习TypeScript的话就没必要讲解它是什么了,因为起码我们得有javascript得基础然后自己需要提升自己得技能才会学习TypeScript。所以大家如果看一些TypeScript的理论知识可以自行百度一下结果。

TS与JS本质并没有太大的区别,只是TS可以对数据有严格的定义,并且内置了很多一些JS并不具备的功能。除此之外它与JS并没有什么不一样。所以介绍TS的时候通常都说TS是JS的超集这是很准确的说法。

如下代码

Let num=3 //js代码
let num=3 //TS代码
let num:number=3 //TS代码

其实我们可以看到,TS代码定义num。其实是可以写的跟JS一样的,但如果我们真的要使用的话肯定是推荐使用第三行的写法,因为第三行明确表示了num的值必须为number。实际我们了解js的话,在js里,虽然我们想想中的num是number类型。但实际应用中num=0或则是1的时候是不是可以转换为bool类型,变成true 或则 false呢?

如上图的代码在js里是没有问题的。但是如果我们把它转换为TS代码这一行就报错了。

从上面的小例子看到TS我感觉最大的好处是对数据的要求比JS是要更严格的。也就是string就是string,number就是number并不能随意的进行转换。

在没学习过面向对象的语言的时候,我曾经感觉这种强要求类型的语言很烦人,任何数据都必须明确告知数据类型,但当你习惯它后,你会发现用此种方法写出的代码,BUG比较少

因为当数据量多了以后,我们有时自己定义的一些变量的数据类型自己都忘记了,而JS在很多的时候是可以随意的转换数据类型的。比如let num="3"和let num1=2 有的时候我们无意中把num这个变量定义成string了,在不知不觉当中num+num1表面看起来没有任何问题,但实际当中这里的计算值就出错了。而我们确很难发现这样的问题。如果是使用TS如下图

当我们指定num2为number的时候,程序就会报错。当然,如果我们不指定num2为number的话它就会跟JS一样转换为string类型。

上述大家应该已了解到了TS对于数据类型虽然不强制要求给定数据类型,但也会自动转换数据类型,比如上图的num和num1一个转换为string 一个转换为number。一般来说,TS里,number可以转换为字符串,但字符串不能转化为number,所以num2如果为string时,代码也可以正常运行。

但是变量一旦确定类型,就不能在随意的更改变量类型了。如下图

但是如果是JS的话,上诉代码将完全没有任何问题,所以我们可以得知TS对数据是比较严谨的,而JS对数据是比较随意的。随意的东西虽然我们很方便,但是在代码越来越多的时候,往往会出现一些意外的BUG,我们甚至很难排查到原因。

我个人认为TS是比JS更好用的一个原因其实就是在数据类型上,因为强定义了数据类型,所以会让程序减少复杂度,更易维护,同时程序也会变得更为安全。当然,其实我们也是可以像写JS一样写TS得,如果碰到一定要定义数据类型得地方直接使用any这个特性就不需要判断数据类型了。如下图

运行代码后会在控制台打印OBJECT和number。但是如果是使用any来代替类型检查得话那有什么必要使用TS呢?所以,如果学习TS就必要养成给定数据类型得习惯。如下图,每一个变量都给定准确得数据类型

当我们有这点概念后,下面我们可以再讲解一下TS得其他东西,比如接口泛型,类,枚举等


栏目导航
相关文章
文章标签
关于我们
公司简介
企业文化
资质荣誉
服务项目
高端网站定制
微信小程序开发
SEO排名推广
新闻动态
行业新闻
技术学院
常见问题
联系我们
联系我们
人才招聘
联系方式
Q Q:24722
微信:24722
电话:13207941926
地址:江西省抚州市赣东大道融旺国际3栋
Copyright©2008-2022 抚州市奕玖科技有限公司 备案号:赣ICP备2022010182号-1