关于javascript:关于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 的应用倡议
7. 常见的 Typescript 与 React 的配合问题

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 的类型零碎，市面上曾经存在大量解读类型零碎的教程，在这里咱们不再赘述

面向对象

在 2018 年年初，咱们应用 Typescript 重构 React 前端，很快咱们与 TS 进入了短暂的蜜月期，低级的谬误大幅缩小。但随后咱们就发现，如果上述内容就是 Typescript 的全部内容，Typescript对咱们来说就是一个玩具，一个高级玩具。

后面说过，随着代码体量的增长、业务复杂度的回升，文档及单元测试的缺失，人员流动等因素的呈现，性能了解、模块抵触、代码难以保护的问题，并没有随着动态类型查看的呈现而大幅隐没。

尽管逐步积淀出容器组件、展现组件、业务逻辑与 UI 拆散等等模式，咱们还是会遇到改一发而动全身的 bug，新成员了解艰难、老成员的模块各种抵触问题，逐步咱们感觉到Typescript 仿佛并没有它声称的那样强….

Typescript 号称适宜构建大型利用，咱们开始反思这句话是否正确。在 github 上咱们留神到，vscode 的源码便是通过 Typecript 编写的。既然 Typescript 能搞定 IDE 编辑器这种简单的利用，咱们冀望从 vscode 的源码中，找到解决方案。

刚开始咱们对 vscode 中的这种写法很困惑，并且对大量的 implements、abstract、private protect 设计感到生疏。通过大量的面向 Goole 编程，咱们逐步留神到 Typescript 的第二个特点，面向对象：封装、继承、多态。

• 封装：暗藏数据和性能实现细节，防止被内部批改，而导致误用。
• 继承：子类领有父类的所有属性和办法，从而实现了实现代码的复用。
• 多态：同一个行为具备多个不同表现形式或状态的能力。

用一句话形容面向对象：将性能拆分为职责繁多的性能、通过封装将性能隔离开来，再通过组合的形式去构建大型利用。

面向对象是个比拟大的畛域，咱们将通过下文中的的一个例子，简略的讲下对面向对象的三大个性

Typescript 为咱们带了什么

低级谬误的查找定位

rollbar 于 2018 年统计了前端我的项目中 Top10 的谬误类型：

其中有 7 个是类型谬误（TypeError），这对 Typescript 来说就是送分题。

浏览代码能力的加持

vscode 中有一些十分不便的代码浏览技巧

• 查看用法 悬停：读取 interface 同时显示正文

• 转到定义 Ctrl + 单击、转到符号定义的源代码 F12。
• 窥视定义 Alt + F12：调出一个窥视窗口，显示符号的定义。

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

智能提醒主动补全

IDE 很早就有了主动补全性能，在有 d.ts 类型文件后，能够自行编写类型库，供 IDE 辨认，最具代表性的便是：https://www.typescriptlang.or…

重构能力的加强

• 提取函数

• 提取变量

以上内容，咱们能够总结为：

• 类型谬误的动态查看
• 代码可浏览性的进步
• 编写速度的放慢
• 可维护性的进步

Typescript 还为咱们带来了什么？

Typescript 的动态类型剖析，目前是影响甚广。而 Typescript 的面向对象，前端开发者广泛没太大感触。与后端倒退的工夫相比，前端疾速倒退的工夫太短，以至于前端整体并没有积淀出残缺体系的 设计模式、设计准则 与建模。借助 Typescript 的个性，刚好使咱们能够借鉴其它畛域。

UML 建模

UML 次要应用图形符号来示意软件我的项目的设计，应用 UML 能够帮忙我的项目团队沟通、验证性能的设计。

类图：

时序图：

用户治理 - 时序图

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. 强类型的语言个性，带来了一种新思维习惯。

结语

通过前文所述，咱们应该晓得：

• Typescript 的设计初衷是为了应答大型利用中 JavaScript 的复杂性而设计的。
• Typescript 的两大个性：动态类型查看、面向对象。
• Typescript 作为一种强类型语言，不仅有动态类型零碎，更咱们带来了一套残缺的管制性能复杂度的技术体系。
• 如果你是一名中高级前端，倡议在拥抱函数式编程的同时，尝试跨界学习下面向对象编程。

举荐浏览

• 为什么要建模？
• UML 建模是什么？
• 设计模式
• 升高软件复杂性的个别准则和办法