【译】使用TypeScript两年后-值得吗？

弄了一个持续更新的github笔记，能够去看看，连接地址：Front-End-Basics

此篇文章的地址：使用TypeScript两年后-值得吗？

基础笔记的github地址：https://github.com/qiqihaobenben/Front-End-Basics ,能够watch,也能够star。

这是个人第一篇翻译文章，想看这篇文章的时候，发现没有中文翻译版，无奈去读了英文版，读完发现能够试试翻译出来。

本人英语水平不是通常的差，以前很排斥读英文资料，如今努力转变观念，慢慢的开始不那么惧怕读英文资料了。这篇文章在磕磕绊绊的查单词中读了第一遍，而后在不查单词的状况下顺了两遍，确定会有错误，恳请指正。固然你也能够直接读更准确的英文原文。

正文开始……

---

原文地址: https://ecom.software/en/afte...

做者：Kamil Zagrabski

差很少两年前，我在一个创业团队中开始了一个全新的项目。用到的全都是相似Microservices，docker，react，redux这些时髦的东西。

我在前端技术方面积累了一些相似的经验，由于在更早的一年前我带着20多名前端开发人员编写了一个很是大的react应用程序。这对我来讲很是具备挑战性。当时咱们遇到了不少问题：模型内聚的问题，代码库的增加，复杂且难以维护的api，接口不一致，难以跟踪运行时异常。

在开始新项目以前，我决定找到解决这些问题的方法。我想也许咱们遇到的这些问题是由于语言自己有点过于灵活和宽泛致使的。你输入的内容几乎没有限制，再加上没有编译阶段，没有约束和运行前代码验证，这可能致使你的包存在严重错误。

而后我接触到了Flowtype和TypeScript。通过短暂的评估后，我决定选择TypeScript，而且一直用到如今。在两年后的今天，我能够告诉你 - 决定使用TypeScript对项目和个人职业生涯来讲是个不错的选择。可是，若是你认为TypeScript开发人员的生活老是趁心如意的，那么你最好继续阅读。

在本文中，我不想详细说明TypeScripts的功能或深刻项目设置。互联网上有不少很好的资源（例如官方TS文档：https://www.typescriptlang.or...）。固然，这篇文章也不是初学者的入门引导。

这是一个关于在使用TypeScript平常工做中感觉到的优缺点的总结。我想描述一下我使用TypeScript的最糟糕体验，另外一方面，我也要说一下我认为最有用的功能。因此本文都是关于利弊好坏的权衡，让咱们开始吧。

首先要作的事 - 配置

正如我所提到的，我对react和redux有一些经验，因此我想利用这些优点，在新项目中使用相似的（自定义）配置。好比 - webpack，babel，npm scripts，jest，linter这些通用的东西，只须要额外作一件小事 - 支持TypeScript。

若是你如今处于一样的境遇 - 我确切的告诉你：它不只仅是在webpack配置中加一个loader。必须为TS提供一个声明，用TSLint替换ESLint，集成TypeScript的loader和babel的配置，将TS插入Jest（测试平台）。

一些操蛋的事情立刻就会发生。TS配置并很差搞，“简单的复制并测试”这种策略并非上手的最佳方法。

在将tsconfig.json放入项目以前，最好仔细阅读文档。

此外，Jest（转换，模块映射器）和css模块存在一些问题。可能你早晚会面对它们。而且不要认为，你如今能够扔掉babel - TypeScript不会提供任何polyfill来让你使用那些牛批闪闪的新语法和功能，也不会将你的新API转换为旧浏览器能够理解的代码。

因此个人建议是 - 若是能够的话，你应该使用一些入门工具或支持TS开箱即用的CLI（好比 angular cli），以免无休止的项目配置。

类库支持

另外一个很是不愉快的经历与TypeScript支持的类库数量有关。

一般，若是你是某我的npm包的做者，你能够随时使用有效的JavaScript包。有时，您还会公开包的ES6源代码。若是你准备将库用于TypeScript，你必须提供类型定义。简单来讲 - 是一个具备每一个模块，命名空间，类，方法，函数等的声明的文件，TypeScript使用者须要用到这个。TypeScript模块只能使用定义中描述的内容，而且只能以声明中指定的方式使用。遗憾的是，一般源代码和声明之间没有严格的联系。而且它们可能仍是不正确或过期的，或者根本就没有。

就我的而言，我没有找不到声明这样的问题。大多数流行的库都有本身的做者或社区准备好的类型定义。若是您使用的包没有这样的文件 - 那就换一个，相同功能的npm包多的是。不过你能够搞一个“假的”声明文件，或建立一个真实的声明文件并发布出来，以此为开源社区作出贡献。

无论怎样，还有一个更严重的问题 - 正如我以前提到的，一些声明是不正确的或过期的。若是你遇到这样的问题，没有简单的解决方案。你可使用声明能正常工做的以前的版本，本身修复并贡献出去或等待做者来解决。有时候他们会及时修复，有时候就没那么快了。

顺便说一句，我是一些简单包的做者，相信我，即便想作好，可是我仍是经常忘记将新功能与其类型定义同步。

平常工做

如今该轮到高兴点的部分了。一旦你配置了项目并选择了具备良好TS支持的库，就能够体会到类型语言的强大了。若是你没有这种语言的背景，一开始可能有点奇怪。TypeScript中有许多功能在当前的JavaScript语法中找不到。让咱们谈谈其中对我来讲最有用的那些。

类型

若是你们所想，TS最经常使用的功能是静态类型。没有使用严格类型校验也就没有使用TypeScript的意义。固然你可使用宽泛的“any”类型，这意味着“我不关心那个东西的类型，它多是一个数字，它多是一个字符串数组，只管用就好了”，严肃脸，若是你想用这样方式编码，那还不如用回旧的JavaScript。

类型将帮助你更快，更安全地编码。你能够告诉编译器“这个常量妥妥的是一个数字”，若是你尝试将其用做数组或字符串，TS编译器将始终提示你输入错误。基本上，你仍然可使用你的代码作任何你想作的事情，就像常规JavaScript同样，但如今你的操做比之前更安全，更易理解。

TypeScript中有几种基本类型和一点点跟它们相关的高级类型和技术。

下面你能够看到一些基础的但很是强大的东西，对于更高级的类型，请访问文档：https://www.typescriptlang.or...。

除了众所周知的类型，如数字或字符串，TypeScript还提供了枚举类型。

您可使用内置类型，如Date或Error。尝试代码提示，以实现更快，更安全的编程。

接口

若是你认为类型是“颠覆者”，那么你对接口有什么见解？接口能够帮助你编写更好的代码，由于它们最终容许你定义对象之间的约定好的实现方式。我建立了不少接口。他们无处不在。有时我专门为接口写一个文件，由于这样是值得的。

我主要用它来描述对象，类，函数和参数的形状。你能够在模块之间共享它们并像处理源代码中的实例同样对待，不过要记住 - 运行时接口不会出如今代码里，这一点很容易忽略。这就是为何有些状况下使用类而不是接口（如使用Angular Dependency Injection）更好。让咱们看一下接口的一些真实例子：

在左边 - 返回类型的错误实现。在右侧 - VS Code 当即通知你代码中的错误。

在左侧 - 一个类错误地实现了用户扩展的接口（参见上一个屏幕）。在右边 - 描述错误信息..

类

ES6中有类，因此你可能以前用过它。可是在TypeScript类中有一些额外的功能，可能EcmaScript的将来会实现这些功能。在TS中，您能够定义抽象类，你能够将类的属性描述为静态，私有或只读，您能够扩展类并使类实现接口（没毛病）。我不会比较TS类和ES6类之间的差别，由于最终它们都会产生相似的JavaScript代码（在编译和转换以后）。在TS类中，只是用优雅而有效的方式封装要使用的类，它们与其余语言实现（如Java）很是类似，这会产生一些影响（更多关于“代码审查”部分的内容）。看一下例子就能知道怎么用TypeScript和优秀的代码编辑器配合来让你的工做更容易。

固然，TypeScript中还有不少新东西，好比泛型（你会使用它们），枚举（对于内部事物可能会用到），命名空间，JSX支持等等。但你一开始不须要知道的面面俱到，只需使用上面提到的基本功能，你将看到，你的代码质量获得了提升。

使用TypeScript，你可使用抽象类等功能。有关抽象类的更多信息：https://www.typescriptlang.or...

TypeScript支持private，public和protected方法，只读属性。类能够实现接口或扩展其余类。

代码质量

我刚才提到代码质量了吗？固然提到了，由于咱们都关心代码质量（除此以外还有客户需求，截止日期和排期，以及...）。

那么为何应该使用TypeScript呢？（在代码质量这个层面）

• 代码中没有与参数或变量名的拼写错误相关的一些很是烦人的运行时错误
• 您能够创建清晰明了的对象之间的约定
• 不用hack的手段就能实现相似在class中使用private的事情
• 有来自编译器的即时反馈，不少错误都是在编译阶段捕获的，而不是在运行时
• 让非JS开发人员更容易阅读和理解代码
• 你可使用JavaScript将来版本中的功能
• 为单元测试编写mocks，stubs和fakes要容易得多，由于你知道他们的确切接口。

此外，因为出色的IDE支持，编写可维护代码要容易得多。老实说 - 即便你单独写一个不大的应用程序，几周后你也会忘了你必须传给服务的参数类型或新建立用户包含什么样的数据。你固然能够翻源码，过一遍代码而后找到有用的信息（假设你的代码老是简洁的），但在你喜欢的编辑器中将鼠标hover到函数名上就能看到你要的信息岂不更好？例如，它接受“age”，这是一个“number”，并返回具备“age”和“name”属性的用户实例。

代码审查是我想提到的另外一件事。当你在小团队中工做时，有时候你是惟一的前端开发人员，在作.net或Java的同事真的不喜欢看原生的JavaScript。因为语言的动态和简洁性，他们会以为可读性不好，没有类型意味着没有提示。例如 - 名称为“user”的对象具备“ID”属性，但ID是数字仍是字符串？若是是一个字符串，为何你只须要调用“toString（）”就能够了？若是是一个数字，为何你刚刚在它前面添加字符串“id_”呢？TypeScript代码看起来很像其余流行的类型语言，而且你有可能将得到更好，更准确的代码审查。更好的代码审查意味着更好的代码，这个不须要我再多说了吧。

左侧 - TypeScript中的代码。右边 - Java中的代码。如您所见，语法很是类似，这意味着比起原生的JavaScript,Java开发人员应该更容易理解你的TypeScript代码。

学习曲线

最后关于TypeScript我还要多说一点。与往常同样，当你尝试新事物时，会有一些学习曲线。放到TS下看，它不是很是陡峭，可是要避免TypeScript和新框架一块儿用，这两样加起来就会让学习曲线变得足够陡峭。特别是在大型或缺少经验的团队中。这就是为何我两年前选择了这个项目做为个人第一个TypeScript应用 - 我对react那套技术栈很是熟悉，因此这是一个学习一种有前途的新语言很好的机会。我敢保证，若是我同时选择了一个新框架（好比说Angular）和一种新语言，我会被按在地上摩擦。

总结

我会向你推荐TypeScript吗？固然会。它将帮助你在更短的时间内写出更好的代码。IDE支持如今很是棒，社区充满活力，具备TS定义的库的数量很庞大并且还在不断增加，用过的程序员都说好（来自编译器的快速反馈）。这是我所知道的用于建立现代和可扩展的Web应用程序（固然还有Node.js服务）的最佳工具。请记住上面提到的一些缺点，解决了它们就能深刻探索静态类型语言的多彩世界了。