为何TypeScript是2019年编写前端的最佳方式

有些人担忧TypeScript是前端工具链的没必要要依赖。是吗？跟着我来了解现实是彻底相反的。

一个“动态类型语言专家”的故事:

在我编程生涯的10多年中，我从未喜欢过静态类型的语言。自从2001年开始编程以来，我一直选择动态选择语言：PHP，JS，Ruby，Elixir。我处处都用C ++和Java编写了一些程序，可是我一直讨厌那些环境。（“为何我须要在各处传递类型？这太糟了。我本身能够照顾他们。”） 一切都在2年前发生了变化。那是我第一次使用TypeScript的时候。可是，从一开始我就没有爱上它。在最初的几天里，这实际上让我很烦。状况很快改变了。我在代码中输入的类型定义越多，我越常常注意到它使我免于浪费时间在控制台中手动调试愚蠢的bug。我开始欣赏这些类型。 在接下来的两年中，不管什么时候我在前端应用程序上进行协做，不管是Angular仍是React，我都注意到，不管我使用什么框架，在全部.js项目中总会遗漏一件事：TypeScript 。 如今我必须认可。我不喜欢动态类型的语言了。我仍然能够在其中高效地工做，可是当我不能只在IDE中查找类型定义或在对代码进行原型设计时信任编译器时，这使我感到不满意。（我在Elixir中惟一仍然想念的是强类型。） 幸运的是，咱们没必要等到Ecma TC39提交者将静态类型系统引入JavaScript。咱们能够改用TypeScript。特别是在新项目中，使用它的麻烦极少。

反TypeScript参数，尽管如此，仍然有人勇于争辩说将TypeScript引入您的项目将：

增长新开发人员的入职时间

维护复杂化

与React发生不少冲突，

增长开发时间，

将项目锁定到一年后将再也不存在的某些时髦技术中，

阻止招募优秀的JS人员，

使得不可能从非TS代码库中引入代码，

使得在遥远的未来很难编辑该应用。

我敢说他们都错了。TypeScript将为您解决以上全部状况，我能够为您提供具体的论据，为何会这样。 这就是为何我决定写这篇文章的缘由。也许这将有助于说服您，您的朋友，同事或CTO使用这种出色的语言。 注意：在本文中，我不会解释“ TypeScript是什么”。我仅关注“ 为何”您应该使用它。

TypeScript的优点：

1.代码更容易理解：一般，当您处理一段代码（例如功能代码）时，要彻底理解它，您须要掌握如下内容：

它接受什么论点？

它返回什么值？

须要什么外部数据？

为了产生返回值，这些参数和外部数据有什么做用？

在动态类型语言中，一般很难回答前三个问题。若是一个函数收到 article 参数，那么它究竟是什么？它是具备某些商品属性的对象吗？有哪些确切的属性？是否有一个 article.title 或 article.name ？我能够始终假设 article.title 存在吗？怎么 article.isPublished 样我可能知道此属性article在应用程序的大多数位置都已合并到对象中，可是我能够肯定，它始终也存在于此位置吗？

要回答全部这些问题，一般须要执行如下操做之一：

console.log(article)在浏览器中放置一个，运行脚本，（也许单击一下UI），而后阅读日志；

查看该函数的使用位置，并从那里跟踪将哪些数据放入全部出现的位置；

向您的同事询问最近是否正在使用此代码（但愿他们仍然健在，在线并记住该代码）；

假设它article与您所想的同样，只是但愿它能起做用。

这听起来对您熟悉吗？

对我来讲，这听起来像是任何动态类型化语言（例如JS，PHP，Ruby，Python，Elixir）中的典型Web开发工做流程。 在诸如TypeScript之类的静态类型语言中，您能够当即从IDE和编译器中得到上述全部问题的答案。您再也不须要查看整个代码库，让同事困扰于问题，也没必要冒生产中的错误的风险。

2.代码更容易实现

一般，当您必须建立新功能或新组件时，您的工做流程可能以下所示：

引导组件函数，组成其构造函数参数，编写其他代码。

若是它须要任何外部或复杂的数据（如user或articles），请猜想它的外观，将其保存在本身的内存中，并像在代码中那样使用它。

将组件放到您的应用中，而后将道具传递给它。

对其进行手动或单元测试。（您须要确保它收到了它应该拥有的道具，并确保它应该如何工做。）

若是有什么不对劲，请返回您的代码，尝试找出问题所在，进行修复，而后返回步骤no。4。

在TypeScript中，它是类似的，可是更容易，更快捷：

引导组件功能，定义其类型定义，并实现它。

若是须要任何外部或复杂数据，请查找它们的接口并重用它们（所有或部分）。

将组件放到您的应用中，而后将道具传递给它。

而已。（若是您在调用方和被调用方之间正确地匹配了typedef，则全部内容都应该能够正常工做。如今惟一须要测试的就是组件的实际业务逻辑。）

所以，每当您以TypeScript编写代码时，它不只更具可读性且不易出错，并且主要是，更易于推理。

3.代码更易于重构

您常常须要重构不少东西，可是因为它们涉及不少东西和文件，所以您太惧怕更改它们了。

在TypeScript中，一般只需在IDE中单击“ 重命名符号 ”命令便可重构这些东西。

在动态类型的语言中，能够帮助您同时重构多个文件的最佳方法是使用RegExp搜索和替换。

在静态类型语言中，再也不须要“搜索和替换”。使用诸如“查找全部事件”和“重命名符号”之类的IDE命令，您能够在应用程序中查看给定功能，类或对象接口属性的全部事件。

每当您想要稍微改善构建系统，重命名组件，更改user对象或删除不推荐使用的属性时，您都没必要担忧会再发生问题。TypeScript将帮助您查找重构位的全部用法，重命名它，并在重构后代码有任何类型不匹配的状况下向您发出编译错误警告。

4.更少的错误

在多年的前端Web开发中，我注意到，只要有一我的坐在我旁边，每当我作错字时都会对我大喊大叫，我能够节省大约50％的错误修复时间。可能为null的值，或者将对象传递到应该为数组的位置。

我很高兴地说，我终于遇到了那个伙伴：它叫作TypeScript

多亏了它，如今编写无效代码变得更加困难。若是编译成功，您可能会肯定它确实有效。

5.更少的样板测试

当您肯定将变量正确地传递到全部给定位置时，就无需再对全部变量进行测试了。 与编写简单的样板单元/集成测试不一样，您能够将更多的精力放在测试应用程序的业务逻辑上，而不是测试函数参数是否在彼此之间正确传递。 更少的测试意味着更短的时间来开发新功能，以及更小的代码库，从而减小了代码的复杂性，出错率而且易于维护。

6.代码更易于合并

您团队中的新初级开发人员刚刚发布了PR，引入了新代码。乍一看，一切都还不错：代码看起来不错，单元测试在那里，一切都经过了绿色。

您如今能够肯定它能够正常工做吗？若是没有适当的单元测试该怎么办？（是的。让咱们认识现实中的人们，咱们不少人仍然没有写足够的数量。）您会信任公关创做者吗？仍是您会花费宝贵的5分钟时间自行运行代码并进行测试？

若是您的工具链中包含TypeScript，它将为您提供另外一项保证检查：typedef编译检查。

若是代码看起来不错，就能够进行单元测试，而且整个程序均可以编译，如今您能够肯定整个程序能够正常工做。

使用TypeScript能够更轻松地信任其余开发人员。它可能会提升您查看和合并PR的速度。

（反之亦然：因为类型定义，对于新开发人员而言， 无需深刻研究或本身运行代码，就更容易看到其余人的代码部分真正在作什么。）

7.帮助开发人员拥有正确的工做流程

用静态类型的语言编写代码时，首先须要考虑将要接收的数据类型，而后考虑要生成的数据类型。一般只有在那以后，您才坐下来进行实际的实现。

许多人会赌命，这是正确的编码工做流程。

例如，不管什么时候开发算法，都应首先考虑其理论公式，而后加以实施。

或者，不管什么时候进行TDD，您首先须要考虑代码在现实中的工做方式（它将接收什么数据以及它将产生什么数据），将其编写为测试，而后实施实际代码。

一样适用于TypeScript。它鼓励您在坐下来执行代码的内部实现以前，先考虑一下代码的接口。

TypeScript缺点

1.须要编译步骤

个人一些后端Node.js朋友告诉我，为他们介绍TS只是不值得的，由于在将.ts它们运行在Node上以前，须要对全部文件进行预编译会带来不少麻烦。 虽然能够确定您能够经过良好的构建和开发设置来处理该问题，但我不能不一样意它会为您的Node.js应用程序增长一些开销。 我在前端环境中对此表示不一样。现在，每一个人都在编译JS。您须要旧版浏览器支持吗？ES7的功能？CSS-in-JS？对于全部这些，您可能已经使用了babel。 可使用Babel编译TypeScript ,就像JS的任何其余语法（包括ES7或JSX）同样。

将TypeScript带到您的前端项目中几乎不会给构建设置带来任何开销。（仅在根本不编译JS的状况下，这可能会带来开销，可是这种状况不多发生在前端。）

2.设置有点困难

我能够赞成这一点。例如，TypeScript中的Next.js应用程序和Next.js应用程序之间有什么区别？在第二种状况下，您须要使Node.js服务器，webpack和jest测试运行程序可以与TypeScript一块儿使用。另外，每当添加诸如React，Redux，Styled-Components之类的库时，还须要为其添加typedef，例如npm i @types/styled-components（除非lib中包含TS typedefs文件）。

您须要回答本身的问题是，您多久作一次这样的事情？值得放弃TypeScript的全部优点吗？

摘要

我是说咱们全部人都应该忽然切换到TypeScript吗？不。例如，在一个现有项目中切换到它确定是不少工做，而且在这样作以前，应该认真考虑一下。

可是，若是您要建立一个新的前端应用程序（必须随时间进行维护），那么状况就很清楚了。使用TypeScript。老实说，我很想听听在您的下一个前端项目中使用TS的缘由是什么。

我只想这样说：经过使用TypeScript，您将得到许多强大的优点，而一开始只需付出不多的精力。 让咱们来作TypeScript的人吧