Slack的TypeScript之路

技术文章 来源:SDK.cn 发布:2018-08-17 浏览:2204

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

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

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

大规模JavaScript代码库并不是一件容易的事情——当我们在Node.js中将对象从ChromeJavaScript传送到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的生态系统,帮助我们更好的完成代码维护工作。作为ReactNode/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

原    文:SDK.cn

免责声明:

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