TypeScript 深度解读

TypeScript 是由微软开发的编程语言,是 JavaScript 的超集,自12年首个公开版本发布后,发展迅速,特别是近几年,随着 VSCode(TypeScript 推荐 IDE)的诞生及前端框架巨头 Angular2.0 版本敲定选用 TypeScript 作为基础语言后,更是一路狂奔,较新的 Google 趋势报告、StackOverflow 开发者调研等业界权威排行显示,TypeScript 热度超过了 ES6。

那么 TypeScript 究竟为何物,为开发者提供了哪些便利,本文将围绕其重要特性展开介绍,希望对你有所帮助。

与 JavaScript 的关系

TypeScript 是 JavaScript 类型的超集

它可通过编译成纯 JavaScript 在浏览器端运行

它完全支持 JavaScript 语法,并向其语言添加了可选的静态类型和基于类的面向对象编程等特性

ES6 提供了哪些重要特性

说到 TypeScript,就不得不提 ES6,ES6 是 JavaScript 语言的下一代标准,已在15年正式发布。

TypeScript 最初就是基于 ES6 开发的,因此,在介绍 TypeScript 特性之前,我们先介绍一下 ES6 提供了哪些重要特性,我们在这里介绍的 ES6 特性 TypeScript 是完全支持的。

模块

ES6 引入了模块特性,这为前端开发带来了很大的便利:

1)简化代码:不需要引入 requireJS/seaJS 等第三方模块管理器进行模块处理了,只需使用 import 与 export 即可进行模块管理;

2)提升效率:浏览器原生模块与 HTTP2 的结合,速度将变得非常快,是一种更优的按需加载形式。

类是面向对象语言的基础,它提供的三个重要特性:封装性、继承性、多样性,提升了代码可维护性和可复用性,为开发者带来了福音。

虽然 ES6 提供的类功能并不完备,但是对于 JavaScript 语言本身来说,已是一个很大的进步。

变量定义

ES5 被吐槽较多的是其混乱的变量定义机制,这个问题为开发者带来困扰,如:循环变量泄露为全局变量、变量提升、变量重复声明。而 ES6 在兼容老式变量定义的前提下,提供了 let 和 const 关键字,在变量定义方面华丽转身。

箭头函数

箭头函数存在的意义在于:

1)简化代码:让开发者简便的使用符号 “=>” 代替 function 定义函数,同时也提供了其它语法简化函数的定义,比如简单函数不用写 return 等;

2)拯救 this:我们知道 ES5 函数中的 this 取决于调用对象,在业务关系不明确情况下,很容易出现问题,而箭头函数默认能保存函数创建时的 this 值(继承于父级作用域),解决了 ES5 this 指向可变性带来的问题(当然,ES6 也提供了 API 支持 this 对象的定义)。

这部分可能不是很好理解,代码举例说明一下:

如下所示:在 deck 对象中定义 createCardPicker 函数,该函数在后续业务代码中调用,如果使用 function 方式定义函数,则 this 的指向是被调用对象,即 window 对象,最终代码执行报错;而箭头函数指向一直为 deck 对象,不会存在该问题,代码段如下:

字符串模板

ES6 支持字符串格式(如换行符、空格)保持、字符串插值功能,功能支持后,开发再也不用维护一大堆可读性很差的拼接字符串了。

TypeScript 带来了哪些特性

虽然随着 ES6 的发布,JavaScript 已经发展的非常强悍了,但是,依然有很多企业选择使用 TypeScript,这是为什么呢?接下来,让我们看看哪些酷炫特性让 TypeScript 如此具有吸引力。

强类型

JavaScript 是弱类型语言,TypeScript 是 JavaScript 的超集,可以理解为是Type+JavaScript,即强类型的 JavaScript。那么,强类型为开发者带来了哪些好处呢?

- 类型约束提升了代码可读性和可维护性;

- 类型允许在开发时使用高效的开发工具和常用操作(比如静态检查和代码重构)。

类的增强

ES6 提供的类特性功能并不完备,它只是基于原型继承的一部分扩展,使用上无法达到真正面向对象编程所带来的编程快感。而 TypeScript 做到了真正的面向对象。

接口

接口特性用来约束一组对象或函数的类型,也是面向对象编程的一个重要概念,它确保了对象赋值或函数使用时,变量的形式及类型与接口形状保持一致。该特性的支持增强了语言的抽象性和编程的灵活性,同时也提升了代码可维护性。

装饰器

装饰器是 Java、Python 等语言的一个重要特性,它可以让其它函数在不需要做任何代码变动的前提下增加额外功能,它适用于有切面需求的场景,如:插入日志、权限校验等场景。

该特性的支持为我们提供了两方面好处:

- 代码可复用性提升;

- 为我们的接口定义提供了一种更优雅的选择方式,如 Angular2+ 中 @Component 等大量装饰器的使用。

强大的工具支持

TypeScript 最大的卖点之一是它的附带工具所带来的开发体验。这些工具支撑了 TypeScript 强大的 IDE 智能提示、静态检查、重构功能,可以说是大型项目的标配。

写在最后

每个语言都有它的优缺点,TypeScript 也不例外:

工具编译带来的问题

需要编译为 JavaScript 后才能正常运行,编译后的代码质量取决于工具,虽然 Typescript 生成的代码质量已经很高,但它毕竟是工具编译的。

学习成本

相比于 JavaScript,由于 TypeScript 强类型等特性的支持会带来附加的学习成本,因此团队在技术选型时需要衡量投资回报率。

然而,瑕不掩瑜,对大部分项目,尤其是大型项目或需要长期维护的项目,TypeScript 仍然是个很好的选择。TypeScript 把不错的静态语言(Java)的 95% 的有用场景带到了 JavaScript,为前端开发者带来了从未有过的编程体验,在代码质量、可读性和可维护性方面提升显著,而这些正是我们做项目时所期望的。

— END —

作者: 许晓燕

点个赞再走么

各位同学,欢迎留言交流~

免责声明:以上图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180118A0PYBF00?refer=cp_1026

扫码关注云+社区