Lyft的TypeScript实践(2)

这个函数接收一个数字类型的参数,如果在调用时传入了一个字符串,FlowType会对此作出警告。而TypeScript则会认为“a”是任意类型,所以可以通过编译。

这个特性看起来令人印象深刻,但我们只要对代码稍作改动,这个特性就不管用了。比如:

function foo(a) { console.log(a.b) } foo({})

这段代码可以通过FlowType的编译。

React

因为React和FlowType都是由Facebook开源的,看似FlowType比TypeScript更适合用在React中。但在Lyft的项目中,我们并没有发现把这两者用在React中有什么不同。

流行程度

虽说FlowType和TypeScript看似旗鼓相当,但出于对生态系统未来发展的考虑,我们需要关注它们的流行程度。选择流行程度较高的那一个可以帮助Lyft吸引到更多的开发人才。

要衡量一个开源项目的流行程度并非易事,不过我还是试着努力找出它们之间的对比数据。

StackOverflow上的问题数量:FlowType——900多个;TypeScript——38,000多个。

GitHub上的问题数量:FlowType——1500多个未解决,2200个已关闭;TypeScript——2400多个未解决,11,200个已关闭。

GitHub上的拉取请求:FlowType——60多个未解决,1,200个已关闭;TypeScript——100多个未解决,5000多个已关闭。

npm每月下载数量:FlowType——290多万次;TypeScript——720多万次。

外部类型定义数量:FlowType——340多个,在GitHub上有43000个“流类型”目录,有些库还提供了.flow类型定义;TypeScript——3700多个,在GitHub上有约25万个package.json里包含了类型定义,Facebook的Redux和ImmutableJS也提供了TypeScript类型定义。

我们在内部进行了一个问卷调查,与上述的数据一样,TypeScript在Lyft内部也很受欢迎。

迁移到TypeScript

我们的项目里有大量的纯JavaScript代码,要一下子把它们全部转成TypeScript并非明智的做法。

于是,我们选择了增量迁移。我们使用Webpack编译我们的前端应用,通过TypeScript-loader可以很轻松地将TypeScript引入到Webpack中。有了TypeScript-loader,我们就可以一边使用TypeScript编写新代码,一边零碎地更新旧代码。

TypeScript编译器可以对JavaScript文件进行类型检查,所以我们就利用了这一特性对已有的JavaScript代码进行类型错误检查。当然,这个只对直接被导入到TypeScript中的JavaScript文件有效。不过,最新版本(2.5)的编译器几乎可以直接用于检查独立的JavaScript文件。

推广TypeScript

网上有很多TypeScript的学习资源。TypeScript的官方网站就提供了大量的学习资料,方便开发者入门。另外,TypeScript的语法是JavaScript的超集,所以对于前端开发人员来说非常直观。

lint工具不仅有助于开发者学习TypeScript,对写出一致、流畅的代码也很有帮助。lint工具在没有类型系统的情况下有助于减少有问题的代码,而在有类型系统的情况下就更是能够起到保护代码的作用,所以我们在所有的项目里使用了TSLint。TSLint比一般的lint工具更强大,它可以捕捉到一些很意思的问题,比如awaiting-noon-promise,而这在纯JavaScript的lint工具里是做不到的。

在进行TypeScript培训和往我们的代码库引入TypeScript的过程中,我们发现我们的很多JavaScript代码无法直接使用类型。虽然我们因此感到沮丧,但这也正好说明了我们的代码写得不好,需要进行重构。

Lyft的TypeScript实践

既然引入了TypeScript,Lyft的很多新项目就是纯TypeScript的了。以下是一些使用了TypeScript的项目示例。

React为它的组件提供了基于运行时的类型系统——PropTypes。我们在Lyft的非TypeScript项目里重度使用了PropTypes。

但在TypeScript里,已经不需要运行时类型检查了,所有的类型检查都发生在编译阶段。于是,我们花了一些时间开发了React JavaScript-to-TypeScript转换器。它利用TypeScript编译器将React组件里的PropTypes转成TypeScript接口。这个工具加速了我们采用TypeScript的进程,为我们节省了大量的时间。

通用异步组件

我们尝试在服务器端动态渲染加载的组件,这个项目完全使用TypeScript开发,它也很好地展示了如何利用类型系统写出可共享的代码。

我们的CSS框架与TypeScript集成

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/ad10c5e348b114ba91bc2d52dc7eb4e4.html