TypeScript与JavaScript对数据处理的对比

发布时间：2025-09-21 11:40:03 阅读量： 0 来源： 互联网转载

最近由于我自己开发的后台管理系统升级到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得其他东西，比如接口，泛型，类，枚举等

TypeScript自学心得分享 TypeScript与JavaScript对数据处理的对比自学TypeScript泛型的心得 TypeScript接口，枚举，类的总结 TypeScript实战项目中使用心得

TypeScript与JavaScript对数据处理的对比

热门文章