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 —

作者: 许晓燕

点个赞再走么

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

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