TypeScript 真香,说说它的优缺点

简介: 前端西瓜哥

大家好,我是用上 TypeScript 有一段时间的前端西瓜哥。不得不说这个 TypeScript,它是真的香,极大提高开发体验。



TypeScript 是什么?官方的说法是:TypeScript 是拥有类型语法的 JavaScript。

说得更具体点,TypeScript 是基于 JavaScript 创造的强类型编程语言,可以进行任意程度的扩展。

TypeScript 适合构建大型应用,适合团队开发。当然浏览器和 Nodejs 还是无法识别 TypeScript 的,需要编译为 JavaScript 才行。

下面我们简单盘点一下 TypeScript 的优缺点。

优点

提供可选的强静态类型

既然叫 TypeScript,那它的最大亮点自然就是提供静态类型(type)。我们可以对变量设置类型,比如你给 count 变量设置为数字类型(number),如果你从 input 元素提取 value (string 类型)赋予给 count,如果你忘记将其转换为数字,编译是不会通过的。

当然类型不是强求设置的,为了兼容 JavaScript,你也可以设置为 any 类型。所谓 any 类型是一个特殊的类型,任何类型的的值都可以赋予给它。

更早发现 BUG

TypeScript 要编译后才能使用。所以我们的类型错误会在编译过程中被编译器发现,更早发现 BUG。如果直接用 JavaScript 开发,需要在程序运行时,吭哧吭哧点来点去各种测试来判断行为是否正常,费时费力,开发体验极差。

比如原本应该是两个数字相加的,写错成两个数字形式的字符串相加,结果是差得十万八千里,且不易察觉。TypeScript 在编译时就给你找到了,你不改对别想过我编译。

代码可预测

声明的变量一旦指定类型,它的类型就再也不能修改。这样变量就具有可预测性。

JavaScript 的变量可以赋予任何类型的值。有时候,我们会看到一个变量在执行的过程中变成各种各样的类型,一会是字符串,一会是对象,非常不好预测,尤其是有复杂条件判断的时候。这其实是并不是好的开发习惯,但在 JavaScript 它就是可以这么干!

但如果你用 TypeScript,就没有这个烦恼,它直接给你一刀切了,你别想将字符串值赋予给一个数字类型变量,一旦声明就再也无法修改。

当然为了兼容,你也是可以将其设置 any 类型,但智能提升就没有了哦。

丰富的 IDE 支持

因为使用了类型,所以检测某个变量是什么类型、可以使用哪些方法就变得容易,在开发体验上就可以进行改善了。

目前在绝大多数 IDE(集成开发环境)中已经支持 TypeScript 的 智能提示、自动补全、代码导航 等功能,并能在编写时实时反馈类型错误并提供准确的建议,比如可以指出传入函数的对象缺了哪些属性。

方便重构

重构时,如果函数的参数修改了,调用它时如果不对,TypeScript 会提示你。这对重构代码提供了坚实的后盾。有了 TypeScript,就放心做重构吧,前提你不要到处用 any。

提供面向对象的写法

面向对象语言在实践中已经被证实是优秀的设计,拥有极高的可读性、可维护性。TypeScript 支持接口、抽象类、枚举等面向对象语言的特性,支持你更好地实现一些设计模式。TypeScript 还支持类型体操,有空多锻炼身体哈。

看了这么多优点,再看看 TypeScript 的缺点。

缺点

不是真正的静态类型

因为需要兼容 JavaScript 的缘故,TypeScript 的类型是可选的。你可以用 any 类型,也可以进行类型的强制转换,所以如果你在代码中写了太多这样的东西,甚至将其变成 AnyScript。那么实际运行还是可能会出现一些类型上的问题。

有一定的学习成本

学 TypeScript 其实和学习一门新语言差不多了,还是有不小的学习成本的。但因为兼容 JavaScript 的缘故,对前端开发者来说难度会低一点。

需要写更多的代码

主要是类型和接口声明的部分,但能够抵消掉你 debug 类型问题的时间,总体看还是物超所值的。另外,编译后类型和接口声明都会被移除,相比直接写 JavaScript,体积不会明显更大。

需要编译

浏览器和 Nodejs 并不支持 TypeScript,所以多了一步编译操作。对于普通项目来说通常不长,其实还好。但如果你用来写脚本的话,就需要多安装 tsc 编译工具,还要配置好 tsconfig.json 文件,还是有点麻烦。

相关文章
|
6月前
|
JavaScript 前端开发
在Vue中使用TypeScript的优缺点是什么?
在Vue中使用TypeScript的优缺点是什么?
108 0
|
JavaScript 前端开发
TypeScript 简介及优缺点
TypeScript 简介及优缺点
231 0
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
36 1
typeScript进阶(9)_type类型别名
|
2月前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
54 4
|
17天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
28 0
|
17天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
38 1
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
42 0
|
2月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
33 0
|
1天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。