前言近两年，Typescript逐渐成为前端项目的标配，甚至有人戏称Typescript即将接管JS世界。大多数前端开发者也是从React、Vue、Angular相继的开发生态中接触到TS的。一时间出现了大量关于Typescript的教程，但大部分教程都比较关注Typescript的类型系统。本文将对TS做一个简单的总结，旨在让TS开发者从另一个角度了解Typescript。看完这篇文章，我们应该能够对Typescript有如下认识：Typescript的设计初衷Typescript的两大特点Typescript给我们带来了什么Typescript也给我们带来了什么Typescript如何更有利于构建大型应用建议关于Typescript与React配合使用的常见问题。Typescript的初衷是JavaScript的笑话：动态爽一会，雷区再重构。近年来，随着硬件性能和前端本身的快速发展等因素，前端应用的体量和复杂度都在暴涨。在大型应用的开发过程中，JavaScript动态语言和弱类型语言的特性，随着成员数量的增加，代码量的增加，业务场景的复杂度增加，文档和文档的缺乏单元测试等，这就导致了以下问题：错误类型多，bug率居高不下。缺乏文档，新手难以理解应用逻辑。维护成本高和可扩展性差的困境。在软件开发的过程中，随着需求的变化，系统规模的增大，我们的项目必然会变得更加复杂，最终导致项目中后期进展缓慢。如何有效控制软件复杂度及其增长速度成为一个日益突出的问题。Typescript就是在这种情况下应运而生的。Typescript的维基百科词条TypeScript起源于Javascript在微软和客户开发大型应用程序时的缺点。处理复杂JavaScript代码的挑战导致需要自定义工具来简化组件开发过程。TypeScript开发人员寻求一种不会破坏现有标准兼容性和跨平台支持的解决方案。知道ECMAScript标准提供了对未来基于类编程的支持，所以Typescript开发就是基于这个方案。这形成了一个JavaScript编译器，其中包括一组新的语法扩展，一个基于此提案的超集，它将TypeScript语法编译为常规JavaScript。TypeScript不仅包含JavaScript的语法，而且还提供静态类型检查和操作原型，看起来像是基于类的面向对象的编程语法。C#首席架构师、Delphi和TurboPascal的创建者AndersHelsberg参与了TypeScript的开发。Typescript维基百科对Typescript的介绍的两大特点提到了两个关键词：静态类型检查和面向对象。在前端经历了Flow、Typescript、CoffeeScript等昙花一现的类型检查之争之后。Typescript在开发速度、协作成本和维护成本方面都有着出色的表现。在构建大型应用程序时实践过Typescript的团队几乎都从JS转向了TS。代表：Ant-design、Angular、Vue-next从原来的JS版本切换到TS版本。有趣的是，为什么React不使用Typescript？静态类型检查下图是TS的类型系统。市面上已经有大量解释类型系统的教程。面向对象这里就不重复了。2018年初，我们使用Typescript重构了React前端，很快我们就进入了短暂的蜜月期，低级错误已经大大减少。但是后来我们发现，如果以上就是Typescript的全部内容，那么Typescript对我们来说就是一个玩具，一个高级玩具。前面提到，随着代码量的增长、业务复杂度的增加、文档和单元测试的缺失、人员流动等因素的出现，功能理解、模块冲突、代码维护难等问题并没有随之而来静态类型。支票大量出现和消失。虽然容器组件、展示组件、业务逻辑与UI分离等模式已经逐步沉淀，但我们还是会遇到一改就牵一发而动全身的bug，新成员理解困难，老成员模块之间的各种冲突，渐渐地我们觉得SeeingthatTypescript似乎并没有它声称的那么强大...Typescript声称适合构建大型应用程序，我们开始反思这句话是否正确。我们在github上注意到，vscode的源码是用Typescript写的。由于Typescript可以处理像IDE编辑器这样的复杂应用，我们期望从vscode的源代码中找到解决方案。一开始，我们对vscode的这种写法很迷茫，对大量的implements、abstract、privateprotect设计很陌生。经过大量的Goole面向编程，我们逐渐注意到Typescript的第二个特点，面向对象：封装、继承、多态。封装：隐藏数据和功能实现细节，避免外部修改和误用。继承：子类拥有父类的所有属性和方法，从而实现实现代码的重用。多态性：同一行为具有多种不同表现形式或形态的能力。用一句话形容面向对象：将功能拆分成职责单一的功能，通过封装隔离功能，再通过组合构建大型应用。面向对象是一个比较大的领域。下面我们将通过一个例子来简单说说面向对象Typescript的三大特点。查找并定位低级错误。错误类型：其中有7种是类型错误（TypeError），是Typescript的一个子问题。读码能力的加持vscodeView用法中有一些非常方便的读码技巧Hover:阅读界面同时显示注释去定义Ctrl+点击，去符号定义的源代码F12。窥视定义Alt+F12：调出显示符号定义的窥视窗口。转到参考资料Shift+F12：显示相似字符的所有参考资料。智能提示自动补全IDE很早就有自动补全功能了。有了d.ts类型文件后，就可以编写自己的类型库供IDE识别了。最具代表性的是：https://www.typescriptlang.or...重构能力的增强提取函数变量的提取以上内容可以归纳为：类型错误的静态检查代码可读性的提高编写速度的加快改进可维护性Typescript还给我们带来了什么？？Typescript的静态类型分析目前正在产生广泛的影响。而Typescript的面向对象，前端开发者一般感觉不多。相对于后端的开发时间，前端的快速开发时间太短了，以至于前端作为一个整体还没有沉淀出一套完整的设计模式、设计原则和建模体系。借助Typescript的特性，我们可以借鉴其他领域。UML建模UML主要使用图形符号来表示软件项目的设计，使用UML可以帮助项目团队沟通和验证功能设计。ClassDiagram:SequenceDiagram:UserManagement-SequenceDiagramUML以图形符号的形式填充了部分设计文档和使用文档。设计模式和设计原则在Typescript出现之前，一些面向对象的设计模式也可以用JavaScript来模拟，但是由于缺少接口、访问修饰符和抽象类，面向对象中的封装和多态一直是一个很难理解和模拟的概念，Typescript的出现恰好弥补了这个缺失的环节。近年来，在Typescript大行其道的同时，函数式编程也随着Redux等的流行而大行其道。在这里，我们无意争论这两种编程模型中的哪一种更好。我们需要的是确保应用程序构建健壮且可维护。在使用Typescript的过程中，我们决定打破界限，尝试前端不熟悉的面向对象。由于面向对象是一个比较大的领域，这里就不详细介绍面向对象的内容了。有兴趣的同学可以通过底部设计模式的链接了解面向对象。Typescript更有利于构建大型应用如果你问Java和C#的开发者，静态类型检查的意义是什么？标准答案是“静态类型更有利于构建大型应用程序”。Typescript和JavaScript在大型应用开发中的进度对比如下图所示：在上面Typescript设计的初衷中，我们提到在大型JavaScript项目的中后期，我们经常会面临问题三：类型错误多，bug率高没有了。缺乏文档，新手难以理解应用逻辑。维护成本高和可扩展性差的困境。Typescript是如何解决上述问题的呢？首先，静态类型检查可以尽早建立故障。一旦在编写代码时出现类型不匹配，在编译阶段之前和期间都可以发现。其次，静态类型对阅读代码很友好。对于大型应用程序，方法繁多，调用关系复杂。不可能每个函数都写上详细的文档，所以静态类型是一个很重要的提醒和约束。第三，UML建模语言弥补了部分设计文档和描述文档，同一套设计模式更容易理解功能。第四，用面向的设计思想隐藏实现细节，加强功能的内聚性。控制接口的暴露粒度，降低功能之间的耦合度，达到易扩展的效果。第五，静态类型配合IDE的重构功能，维护难度系数直线下降。将Tyepscript、React与面向对象的OOP、函数式编程FP相结合，我们总结出以下经验：在应用设计层面，OOP拥有完备的设计体系，能够应对模块扩展性和业务复杂性的挑战。在具体实现层面，不要为了OOP而做OOP，OOP不是万能的。FP在处理数据流时具有得天独厚的优势。使用Typescript的建议我们强烈的建议是：Typescript是一门由两部分组成的语言：静态类型检查和面向对象。如果你尝试过类型系统，并且已经熟悉了JavaScript的各种特性，那么不妨学习面向对象，或许能够更好地掌握Typescript这门语言。接触面向对象前的两点提醒：设计原则和设计模式是一种编程范式，是跨语言、跨框架的。强类型语言特性带来了新的思维习惯。结语通过上述我们应该知道，Typescript最初是为了应对JavaScript在大型应用中的复杂性而设计的。Typescript的两大特点：静态类型检查和面向对象。Typescript作为一门强类型语言，不仅拥有静态类型系统，还为我们带来了一套完整的控制函数复杂度的技术体系。如果你是中高级前端，建议你在拥抱函数式编程的同时，尝试跨界学习面向对象编程。推荐阅读为什么要建模？什么是UML建模？降低软件复杂性的设计模式的一般原则和方法
