Slack 的 TypeScript 之路

783 阅读6分钟
摘要:大规模JavaScript代码库并不是一件容易的事情——当我们在Node.js中将对象从Chrome的JavaScript传送到Objective-C中的时候,我们必须确保每一个对象都能够匹配。在桌面应用领域,一个微小的错误都有可能导致整个程序崩溃。为了解决这个问题,我们使用了TypeScript,之后我们立刻就爱上了它,它让我们不再需要担心,只要把一切都交给编译器就好。爱上TypeScript的不仅仅是我们,在2017 StackOverflow Developer Survey这个调查中,我们发现TypeScript已经成为了排名第三的最受开发者喜欢的技术。

 我学会了停止担心,并且信任编译器 

当Brendan Eich 仅仅有了10 天就创建了第一版JavaScript 之后,他可能没有想到Slack Desktop App 会如何使用他的这个发明:我们在Windows 、macOS 和Linux 多个平台上,都在使用一种JavaScript 代码库来打造多线程桌面应用,然它与本地代码进行交互。

大规模JavaScript 代码库并不是一件容易的事情—— 当我们在Node.js 中将对象从Chrome 的JavaScript 传送到Objective-C 中的时候,我们必须确保每一个对象都能够匹配。在桌面应用领域,一个微小的错误都有可能导致整个程序崩溃。为了解决这个问题,我们使用了TypeScript ,之后我们立刻就爱上了它,它让我们不再需要担心,只要把一切都交给编译器就好。爱上TypeScript 的不仅仅是我们,在2017 StackOverflow Developer Survey 这个调查中,我们发现TypeScript 已经成为了排名第三的最受开发者喜欢的技术。

拯救了我们的静态分析

我们曾经使用JSDoc 来记录函数签名,使用comment 将类、函数和变量的目的已经使用方法通知给code wanderer 。这种做法有很多弊端,你很难一眼就看出JavaScript 要去解决什么问题。你必须要相信和依赖写代码的人,期望他能够正确的进行记录,你还要相信之后负责维护和更新的人。在有着无数模块和依赖的大型系统中,要想做到这一点几乎是不可能的事情。

为了解决这个问题,我们决定试一试静态分析。静态类检查器并不会在运行时修改代码行为,而是会对代码进行分析,在可能的时候尝试对类别进行推理,在代码正式被运用之前对开发者进行警告。

静态类型检查器理解Math.random() 会返回一个数字,这个数字并不包含string 方法toLowerCase()

 

相信一点说,这个检查器的使用者能够手动说明类别,从而支持系统,他可以向人和机器都说明程序预期的行为。下面的代码定义了一个“user” 对象的界面,以及一个用来获取user 年龄的方法。静态类别检查器能够检测到其中的错误。

 

有意思的是,代码并不是在runtime 中被修改的。

 

智能的静态类别检查器增强了我们对代码的信心,能够帮助我们在使用代码之前发现其中的错误,而且让代码库能够更好的进行自我记录。

将TypeScript 运用在Slack 桌面端代码库中

我们最终决定使用微软的TypeScript ,它包含了静态类比分析功能,还有一个编译器。当代的JavaScript 都支持TypeScript ,这意味着你可以在不改变任何一行代码的情况下使用TypeScript 。

在实际操作中,在不改变代码的情况下打开分析和编译器,这意味着TypeScript 会立刻开始了解你的代码。它使用了内置的类别和类别定义,能够理解第三方依赖从而分析代码的flow 、指出以前被你忽略的那些小错误。当TypeScript 无法理解你的代码的时候,它会将其假设成一个名为“any” 的特殊类别,然后继续分析。

我们原本的计划,是慢慢将文件进行转移。在这个过程中,我们迎来了两个重大的发现:

首先,我们在代码中找到了大量的小错误。在和其他使用TypeScript 的开发者进行交谈时,我们了解到他们也看到了类似的情况。只要代码是人类写的,就避免不了各种小错误。

其次,我们低估了编辑整合的力量。多亏了TypeScript 的语言服务,拥有自动补全功能的编辑器能更好的支持我们的开发工作。TypeScript 能够理解哪些属性和方法可以用在哪些对象上,并且让你的编辑器也拥有这样的能力。

 

图片5.png

TypeScript 的生态系统,帮助我们更好的完成代码维护工作。作为React 和Node/npm 生态系统的重度用户,第三方库类别的说明对于我们来说是一个很好的加分项。我们使用的很多第三方库已经支持了TypeScript 。如果说明没有在模块之中,它们很有可能可以在DefinitelyTyped 中找到。以React 来举例,并没有直接提供类别说明,但是一个简单的npm install @types/react 安装指令,就可以让你找到它。

增强信心

为了提高可读性和可维护性,所有阶段的代码都可以使用TSLint 进行自动检测,而且是在你进行Git commit 修改之前,它会先检测你的变更是否符合linting 规则。我们还关闭了“implicit any” 功能,也就是说我们要求所有Slack Desktop 代码在TypeScript 无法自动理解的时候,向我们进行提示。

在进行branch push 的时候,Git 会首先将整个代码库在TypeScript 的编译器中运行,它会对代码库的结构和功能错误进行分析,并且对modern 功能进行分析,例如将async/await 转换为与ES2016 兼容的代码。在Pull Request 被打开之后,我们已经有了足够的信心。

有利有弊

对我们来说,TypeScript 的好处大于弊端。是的,TypeScript 的确有弊端,对我们来说最大的弊端就是增加了培训成本。有强类型语言经验的开发者可以在一两个小时之内掌握TypeScript 的语法,但是一个使用了所有TypeScript 功能的文件,可能会让只有JavaScript 背景的工程师感到手足无措。

解决这个问题,最好的方法就是慢慢的添加功能,一点点慢慢了解和学习。

小程序.jpg

原    文:TypeScript at Slack
译    文:SDK.cn
作    者:鲁行云(编译)

免责声明:

  1. SDK.cn遵循行业规范,所有转载文章均征得作者同意授权并明确标注来源和链接。
  2. 我们十分尊重原创作者的付出,本站禁止二次转载如需转载请与原作者取得联系。
  3. 转载SDK.cn的原创文章需注明文章作者、链接和"来源:SDK.cn"并保留文章及标题完整性未经作者同意不得擅自修改。
  4. 作者投稿可能会经SDK.cn适当编辑修改或补充。