大规模应用TypeScript「2019 JSConf -Brie Bunge」（上）

特别说明

这是一个由simviso团队进行的关于Airbnb大规模应用TypeScript分享的翻译文档，分享者是Airbnb的高级前端开发Brie Bunge

视频连接：大规模应用TypeScript「2019 JSConf -Brie Bunge」（上） 或点击文章底部阅读原文观看视频

视频翻译文字版权归 simviso全部，未经受权，请勿转载！！！

本次参与翻译人员

介绍

你们好，个人名字是 Bree，我在Airbnb工做。众所周知，在大公司中进行大的改革很难。这须要去说服不少人，同时又须要涉及大量的代码迁移。我想要与你们分享咱们是如何将 TypeScript 应用到 Airbnb 这个公司的平常开发中的。

我很感谢大家能在这里，我知道大家彻底能够披着时髦的毛巾在海边娱乐。

我设想这里的每一个人都会有这样一些问题，你要为你的公司进行重大的变革，同时这可能会被做为一个案例进行研究。你如今是否在公司内部积极的推进将项目开发迁移到 TypeScript，为此我将提供一些技术和工具上的帮助。若是你以前已经听过并但愿对 TypeScript 了解更多。

首先，咱们会介绍 TypeScript 是什么？规模化又意味着什么？对于将TypeScript规模化的过程又有什么建议？基于这些问题和疑问，我会给出相应的解答。咱们该经过什么样的迁移策略将 JavaScript 逐步迁移到 TypeScript？

什么是TypeScript

请你们快速举手示意一下以方便我知道大概有多少人以前使用过 TypeScript。

cool，有这么多人！

还有一部分人没有举手。那么，我会给出一个快速介绍，这样每一个人都在同一块儿跑线上了。

假如咱们有这么一个 greeter 方法。它接收一个 name 参数，而后返回 hello + name。那么，若是咱们传入的是JSConf，它会和和睦的说 Hello，JSConf！

将刚才的代码用 TypeScript 来表达就是这个样子，能够看到他们很像。惟一的区别是咱们在它的参数这里使用了类型注释。

因此若是咱们在咱们的 TypeScript 项目中使用这个函数同时咱们传入一个字符串，能够看到编译一切正常。

可是在这种状况下，若是咱们传递的参数类型不是字符串，而是一个字符串数组。那么，如图所示TypeScript 就会给咱们一个错误。即这是一个字符串数组，函数接收的参数类型是 string，不支持该分配。咱们不须要再经过点击刷新页面这一流程来从咱们的控制台中查看错误并肯定该错误所发生的位置。能够看到，在咱们输入后，当即就从编辑器中获得了这个错误。

咱们也能够表达其余对象类型。这个接口描述了一个包含名字和姓氏的 person 对象。同时，你能够定义更复杂的构造类型。

TypeScript一般带有一个编译器。当出现问题时就能够立马告诉你。它还有一个能够与编辑器挂钩的语言服务器，能够帮咱们进行自动编译，提供重构相关提示等等。在这个例子中，咱们已经在这个组件中导入了withStyles react。这样就能够自动导入它所须要的数百个CSS属性，包括内联文档。神奇吧！我不必来回浏览文档页面，我在编辑器中就能够获得这些全部。经过在咱们的代码中使用类型，咱们能够作更多的事情。咱们只是稍微接触了下TypeScript的类型限制，可是能够经过这个来帮你捕获这种类型的错误，以及支持它的工具。

什么是规模化!

关于TypeScript的内容就到此，那关于规模化应用这一部分呢？恩？这有个什么问题？感谢TypeScript帮我找出了这个错误。若是你一时疏忽，输入了一个错误的变量，那你将会获得这样的一个错误提示。那么，在 TypeScript 中真的会发生这样的事。因此，让咱们来修复下。

规模化会改变咱们的交流方式。我之前在小团队的时候，若是你想要使用TypeScript。是的，听起来很酷。那咱们就用。但当团队规模达到数百位工程师，同时代码量也愈来愈多，那么交流方式就要发生改变。

咱们须要进行一些改变，即当咱们想要在咱们的主仓库中使用TypeScript的时候（这里指Powers | airbnb.com的主仓库）。同时让TypeScript成为前端主要开发语言。这个改变影响的人越多，那么必须迁移的代码也就越多。

那咱们用数字来讲明规模化意味着什么。

airbnb（我所在的公司）拥有大量的JS代码。在咱们的主仓库中有两百万行以上的JS代码，以及100多个内部npm包。咱们有几个分离的仓库，经过打包到内部的NPM注册中心，这样就能够跨仓库共享。这真的有不少代码，我甚至能看到一些 Backbone 的代码，能够想一下JavaScript走过了多少年，它在Airbnb这里也走过了十多年。

因此咱们有大量的开发人员在维护这些代码。目前公司有超过1300名开发人员，其中有200个以上是前端。这些前端工程师大多数都参与了主仓库的贡献。这些数字给咱们展示了当时咱们提议要使用TypeScript时所面临的大环境。

使用TypeScript的提案

那么在这种规模下，咱们当时是一个什么样子呢？

每月，咱们都会将全部的前端工程师聚在一块儿开个比较有意思的会，一块儿讨论新的前端技术和选型。为了能够作到深思远虑，咱们起草了提案。它对某个新技术进行了诸如优势、权衡、替代方案、针对退出方案的思考以及长期拥有者等方面概述。你们会权衡这些提议的利弊。咱们会站在团队的角度去决定向前迈出这步是否有意义，这确保了咱们能够做为一个集思广益的团队，对所作的事情作出深思熟虑的决定。这样能够避免在没有正当技术理由的状况下就“上车”。

从2016年起，Airbnb 已经在一些小规模团队中探索使用 TypeScript。在2017年的前端调查中，静态类型系统呼声最高。基于这个信号，Joe（第二排那个Joe）和我起草了一个关于TypeScript的提案，并将它交给前端工做组。这项提案详细说明了为何在Airbnb使用TypeScript是有意义的。

让我来说讲主要的缘由。airbnb的使命是要让每个人都感觉到世界到处都是家（airbnb是一家旅游住宿的公司）。用户对咱们的产品提出的每个建议都能会让咱们向着这个目标更进一步。这对于你正在开发的产品也是如此。

1. TypeScript能够帮助咱们阻止bug的发生。

2. TypeScript还为开发人员提供大量的生产力效益和工具，像咱们以前看到，自动编译和重构。使用TypeScript，工程师能够更安全快速的迁移代码。

3. 在Airbnb咱们引入了GraphQL 和Apollo，它可使咱们经过自定义的GraphQL模板来生成TypeScript类型

这意味着咱们能够获得端到端之间的类型安全。由于前端和后端所使用的数据类型共享了同一个事实上的定义源。后端工程师可以在不影响客户端的状况下对API进行修改，而前端工程师则能够确信哪些数据将从服务器返回。类型不匹配一直是咱们的主要bug所在。因此，这种端到端的类型安全性是一个主要的卖点。