大规模应用TypeScript「2019 JSConf -Brie Bunge」(上)

757 阅读7分钟

特别说明

这是一个由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所在。所以,这种端到端的类型安全性是一个主要的卖点。