TypeScript学习之旅:一、为什么要用 TypeScript

一、JavaScript 的痛点

  • 虽然 JavaScript 这门语言现在非常优秀。但是由于各种历史因素,JavaScript 语言本身存在很多的缺点
  • 比如 ES5 以及之前的使用的 var 关键字关于作用域的问题;
  • 比如最初 JavaScript 设计的数组类型并不是连续的内存空间;
  • 比如直到今天 JavaScript 也没有加入类型检测这一机制;

类型带来的问题

  • 首先我们要知道,编程开发中我们有一个同样的需求:错误出现的越早越好
  • 就是能在编写阶段发现的问题,不要在编译时发现:希望开发工具能为我们进行提示
  • 就是能在编译阶段发现的问题,不要在运行时发现:希望拥有类型检测机制
  • 能在本地环境发现的问题,不要在线上发现:测试加油
  • 没有类型检测的弊端:比如一个方法,javaScript 并没有对我们传入什么进行规定,很可能本来一个方法需要的是 string 的参数, 但是传入的确是 number 或者是 Array ,JavaScript 并没有进行参数类型的校验,从而导致代码报错。为了避免报错我们只能手动的进行判断,往往这是不现实的。手动进行判断会大大的增加我们的开发时间,降低我们的开发效率。

25996406-c2aec1c27c9623aa.jpeg

二、TypeScript

2012年10月,微软发布了首个公开版本的 TypeScript 。起初我们并不知道什么是 TypeScript ,也并不知道他能做什么事情。但随着时间的推移 TypeScript 被更多的人使用。直至今日 TypeScript 已经成为大型项目的标配,其提供的静态类型系统,大大增强了代码的可读性以及可维护性;同时,它提供最新和不断发展的 JavaScript 特性,能让我们建立更健壮的组件。

什么是 TypeScript

  • TypeScript 就是 JavaScript 的超集。也就是说 TypeScript 一定程度的升级了 JavaScript 这门语言,使这门语言拥有了一些之前没有的功能。
  • TypeScript 类型的规范让 JavaScript 更加安全,开发者不必在担心传过来的是否是我所需要的类型。
  • 类型是可选的,类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为;

TypeScript是怎么样工作的

  • 我们来通过这张图片来了解一下 TypeScript 是怎么样工作的。

2021-11-23_619c4acc40cbe.png

  1. 由我们程序猿来根据 TypeScript 的特定语法格式来进行编码。
  2. 编写好的 TypeScript 文件可以通过 tsc 来进行编译成 JavaScript 文件。
  3. 编译过程: 开始 -> 预处理器(Pre-processor)-> 语法分析器(Parser)-> 联合器(Binder)-> 类型解析器与检查器(Type resolver / Checker)-> 生成器(Emitter)-> 结束
  4. 生成的 JavaScript 文件通过渲染引擎与 JavaScript引擎被浏览器解析执行(JavaSCript的执行机制看这里)。

如何使用 TypeScript

我们可以通过 NodeJS 的 npm(包管理工具)来安装 TypeScript

$ npm install -g typescript

全局安装完成后我们就可以使用 TypeScript 编译器,名称叫 tsc,可将编译结果生成 js 文件。

$ tsc index.ts

编译成功后可生成对应的 js 文件。

2021-11-18_619620bc739a2.png

现在我们已经成功的生成了 js 文件,不过现在我们每次都需要先生成 js 文件在执行,太过于麻烦。第三方库 ts-node 可以帮助我们解决这个问题。

$ npm install -g ts-node

全局安装后就可以直接通过 ts-node index.ts 来运行 TypeScript 文件。

2021-11-23_619c48a19023a.png

写在最后

  • TypeScript 并不是所以人都喜欢,毕竟他会一定程度的增加我们的学习成本。代码都是由我们程序猿编写的,项目中是否使用TypeScript 还是由我们自己决定的。

  • 我是很喜欢 TypeScript 的,也在项目中进行使用,并且一直在学习 TypeScript, TypeScript 无疑让我的代码变得很安全可靠,但是高阶的 TypeScript 知识还是很薄弱。

  • 就让我们一起学习,后续还会推出 TypeScript 的基本类型、复杂类型、类型检测机制、类型缩小机制等等。。。

猜你喜欢

转载自juejin.im/post/7033697814395748389