vue3入门18 - typescript 介绍

286 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第25天,点击查看活动详情

前言

对于vue3的基础使用基本已经介绍完了,在开始进阶学习之前,我们可以先把typescript简单的学习一下。方便我们后面开发使用。

TypeScript 介绍

  • 目前为止,typeScript几乎已经成了前端上必会的一项技能,如果在招聘简历中有这一条,是可以加很多分的(加钱!)。所以,无论你是否在团队中使用它,我们都要掌握这项技能。
  • 它是 javaScript 的超集,最终编译之后,它还是要变成 JavaScript 的。
  • 它拥有静态类型风格的类型系统,这就有点后端面向对象的味道了,可以对我们的代码做类型检查,帮助我们避免一些低级错误。
  • 从 es6 到 es10 甚至是 esnext 的语法都有很好的支持,我们不需要担心无法使用 es6新特性。
  • 兼容各种浏览器、各种系统、各种服务器,并且是完全开源的。typeScript对于前端来说,算的上是具有划时代的意义了。
  • 我们可以通过 官方文档 了解更多的内容。

为什么要学习 TypeScript ?

1. 程序更容易理解

  • 比如在以前的话,我们想要判断函数或者方法输入输出参数、外部条件等,
  • 需要使用JavaScript需要打印console.log 在控制台查看。或者跳转到函数位置查看相关代码,但多数情况是没有注释,也看不出需要传入的参数类型,返回的参数类型等等问题,如果出现错误,只能一步步调试来解决问题。
  • 有了typeScript,通过类型校验,代码本身就可以解决这些问题,不需要跳转函数,也能在调用的地方看到函数的一些类型信息,并且如果我们传错了参数,或者使用参数有问题,直接就会报错提示我们。

2. 效率更高

  • 方便我们再不同的代码块和定义中进行跳转。
  • 代码自动补全更智能化
  • 增强了编辑器和 IDE 的功能,有丰富的接口提示。

3. 杜绝一些基础错误

  • 我们可以在编译阶段杜绝大部分错误
  • 比如为空、null、undefined、获取不到值的情况

4. 非常好的包容性

  • 完全兼容 Javascript
  • 第三方库可以单独编写类型文件
  • 大多数项目都支持 Typescript

5. 也有一些缺点

  • 有一定的学习成本。初期我们要学习接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念。
  • 项目前期,会增加一些开发成本,当然后期维护的时候,因为有了类型检查,维护就爽了。
  • 编译需要时间,项目大了以后,对于开发编译和打包编译速度是一个考验。

总结

vue3底层使用typeScript作为支持,相比vue2兼容性更好。如果不使用typeScript开发项目也是可以的,但是为了能够更好地使用vue3开发项目,我建议还是要学会使用typeScript进行开发。 卷起来,骚年们!