关于Typescript在前端的体验漫谈

前言最近两年，Typescript逐渐成为前端项目的标配，甚至出现了Typescript即将接管JS世界的段子。 大部分前端开发者也陆陆续续从React、Vue、Angular开发生态中接触到了TS，一时间关于Typescript的教程大量出现，不过大部分教程更关注Typescript 的类型系统。

本文将对TS进行一个简单的梳理总结，旨在让 TS开发者换个角度了解Typescript。

读完本文后，我们应当能对Typescript 有以下认识：

1. Typescript的设计初衷
2. Typescript的两大特性
3. Typescript为我们带来了什么
4. Typescript还为我们带来了什么
5. Typescript如何更利于构建大型应用
6. 关于Typescript的使用建议

Typescript的设计初衷

Javascript的段子：动态一时爽，重构地雷场。

最近这些年，随着硬件性能、前端自身快速发展等因素，前端应用程序的体量与复杂度直线上升。而在大型应用的开发过程中，Javascript动态语言与弱类型的语言特性，随着成员数量的增加、代码体量的增长、业务场景复杂度的上升，文档及单元测试的缺失等情况的出现，导致了以下问题：

1. 类型错误多，bug率居高不下。
   
   
2. 缺少文档、新成员理解应用逻辑困难。

3. 维护成本高、可扩展性差的困境。

在软件开发过程中，随着需求的变化和系统规模的增大，我们的项目不可避免地会趋于复杂，最终造成了项目中后期进度缓慢的情形 。如何对软件复杂度及其增长速率进行有效控制，便成为一个日益突出的问题。

Typescript正是在这种情况下，应运而生的。Typescript的维基百科词条

Typescript 起源于 Javascript 在微软以及客户中开发大型应用中遇到的缺点。

处理复杂 Javascript 代码带来的挑战使他们需要自定义工具来简化组件开发流程。

Typescript 开发者寻求一种不破坏现有标准兼容性和跨平台支持的解决方案。知道ECMAscript标准为未来基于类编程提供支持后, Typescript开发便基于此方案。这形成了包含一组新的语法扩展的一个Javascript编译器，一个基于此提案的超集，可将Typescript语法编译为常规的Javascript。

Typescript不仅包含Javascript的语法，而且还提供了静态类型检查以及使用看起来像基于类的面向对象编程语法操作 Prototype。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了Typescript的开发。

Typescript的两大特性维基百科上关于Typescript的介绍，提到了两个关键的词：静态类型检查、面向对象。前端在经过Flow、Typescript、Coffeescript等短暂的类型检查之争后。

Typescript在开发速度、协作成本、维护成本上的出色表现，实践过Typescript构建大型应用的团队，几乎是一边倒的从JS转向了TS。具有代表性的：Ant-design、Angular、Vue-next从最初的JS版本切换到了TS版本。有意思的是，为什么React不使用Typescript？ 静态类型检查下图即是TS的类型系统，市面上已经存在大量解读类型系统的教程，在这里我们不再赘述其中有 7 个是类型错误（TypeError），这对Typescript来说就是送分题。阅读代码能力的加持vscode中有一些非常方便的代码阅读技巧

• 查看用法 悬停： 读取interface同时显示注释

• 转到参考 Shift + F12：显示相似字符的所有参考。

• 提取变量

时序图：UML以图形符号的形式，填补了一部分的设计文档与使用文档。设计模式与设计原则在Typescript出现之前，部分面向对象的设计模式也可以用Javascript模拟出来，但因为缺少接口interface、访问限定修饰符、抽象类几个概念，面向对象中的封装与多态在Javascript中一直是一个难以理解、难以模拟的概念，而Typescript的出现恰好补上这缺失的一环。最近几年，在Typescript流行开来的同时，函数式编程也随着Redux等的流行而火热起来。在这里，我们无意争论两种编程模式孰优孰劣。

我们需要的是保证应用构建的强壮与可维护。在使用Typescript的过程中，我们决定破界，去尝试前端不熟悉的面向对象。 由于面向对象是个比较大的领域，我们在这里不详细介绍面向对象的内容，有兴趣的同学可以通过底部设计模式的链接了解一下面向对象。

Typescript更利于构建大型应用

如果问Java、C#的开发者，静态类型检查有何意义？标准答案是“静态类型更有利于构建大型应用”。

Typescript与Javascript在开发大型应用的进度对比，如下图所示：我们在前面的Typescript设计初衷中，提到在大型Javascript项目中后期，经常我们面临的3个问题：

1. 类型错误多，bug率居高不下。
2. 缺少文档、新成员理解应用逻辑困难。

3. 维护成本高、可扩展性差的困境。

Typescript是如何解决上述问题的？其静态类型检查可以尽早构建失败。一旦编写代码时发生类型不匹配，在编译阶段前、中阶段均可发现。其静态类型对阅读代码是友好的。

针对大型应用，方法众多，调用关系复杂，不可能每个函数都有人编写细致的文档，所以静态类型就是非常重要的提示和约束。其UML建模语言，弥补了部分设计文档与说明文档，同一套的设计模式，使得理解功能变得容易。其借助面向的设计思想，隐藏实现细节，加强功能的内聚性。

控制接口暴露粒度，来降低功能间的耦合度，达到容易扩展的效果。其静态类型其配合IDE的重构功能，维护困难系数直线下降。结合Tyepscript、React接触面向对象OOP与函数编程FP，我们总结了如下体验：

1. 在应用设计层面，OOP有着一套完整的设计体系，可以应对模块可扩展性、业务的复杂性的挑战。
2. 在细节实现层面，不要为了OOP而OOP，OOP不是万能的。

3. 在处理数据流时，FP有着独一无二的优势。

关于使用Typescript的建议我们的强烈建议是：Typescript是一种语言，包含两部分内容：静态类型检查、面向对象。如果你已经尝试了类型系统，并且已经熟悉了Javascript的各种特性，不妨学习下面向对象，或许能更好的掌握Typescript这门语言。

在接触面向对象之前的两点提示：

1. 设计原则、设计模式是一种编程范式，是跨语言、跨框架的。
2. 强类型的语言特性，带来了一种新思维习惯。

结语通过前文所述，我们应该知道。