花椒前端TypeScript实践总结

此篇文章适用于没接触过TypeScript的人、仅读过文档但无实际项目操作的人,笔者希望借此文章可以给大家提供一个思路,便于以上两种类型的读者做出选择。如果你是TypeScript老鸟,这篇文章可能并不适用于你,但是欢迎阅读并一起讨论。

什么是TypeScript?

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。

TypeScript添加了可选的静态类型系统和很多尚未正式发布的ECMAScript新特性。

TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。

先列优缺点:

优点:

  • 静态类型
  • 方便阅读
  • 减少bug
  • 社区活跃

缺点:

  • 学习成本
  • 开发效率的降低
  • 部分三方库的兼容
  • 需要编译

静态类型

我们都知道,JavaScript是一个弱类型,且是动态类型的脚本语言。笔者大学期间第一次接触JavaScript时简直惊呆了,这也太幸福了吧!什么变量都可以var一下,变量还可以随便赋值,函数的返回值类型?我再也不用关心这些乱七八糟的东西了,这才是语言应该有的样子啊!

但是随着做过的项目越来越多,这里要加一个类型判断,那里也要进行一次类型转换,我渐渐意识到,这个问题不是看到的那样简单,想到这里,我不禁把目光投向了“幸福的罪魁祸首”:“静态类型”。

你是否经常要写这种类似的代码?

const data = typeof params === 'object' 
 ? params.data 
 : JSON.parse(params).data;

if (typeof unix === 'string') {
 unix = parseInt(unix);
}

试想一下:

你花了一下午的时间,搞出来一个自认为完美的函数。

然后小明1号拿去调用一下,程序崩溃了。

你查了一下原因:啊,原来是参数的类型传错了,赶紧补文档补注释说明一下。

然后小明2号拿去调用了一下,程序崩溃了。

你查了一下原因:啊,原来是参数的类型传错了,你赶紧叮嘱大家使用时看文档。

然后小明3号拿去调用了一下,程序崩溃了。

你查了一下原因:啊,参数类型没错,但是参数对象里面的值的类型传错了,你???@#&!!!...只能写上一堆判断和转换,让自己的程序更“健壮”。

上面的例子比较极端,但是我们确确实实在经常遇到,那如果js是静态类型的会是什么样子呢?

你花了一下午的时间,搞出来一个自认为完美的函数。

然后小明1号拿去调用一下。

小明1号发现参数类型传错,自己去修改了一下,没来烦你,你甚至注释都懒得写,就开心的下班了。

方便阅读、维护

类型系统实际上也是一个非常实用的文档,大部分的函数通过查看类型的定义就可以知道如何使用,并且在vscode(此处使用vscode来代表所有代码编辑器)里面去编写TypeScript时,vscode会根据你当前的上下文,把你能用的类、变量、方法和关键字都提示出来,一目了然。不仅如此,TypeScript的特性还增强了vscode的功能,包括代码补全、接口提示和点击跳转等等

如下图,我们可以很清晰的通过index.d.ts这个文件了解到cors这个函数的参数类型:

代码提示:

那如果我不用TypeScript只使用d.ts不就好了么?

当然也可以,只要你不嫌麻烦的话,因为d.ts文件在TypeScript里面一般都是用tsc自动生成的。

减少bug

在最上面的例子中,我们已经看到了vscode等IDE都会做出类型检查,可以将很多类型错误直接提示出来,这一点在多人开发,和维护大型项目时尤为重要,项目复杂,函数和变量繁多时经常出现一个人改了一点点东西,导致项目崩溃的情况,在TypeScript上面这种情况会大大减少。

但是值得注意的是,使用TypeScript也只能避免一部分错误,不能一劳永逸,平时遵守严格的编码规范,配置eslint,代码review,以及编写单元测试等环节依然很重要!

社区活跃

继Angular之后,React,Vue都相继开始支持TypeScript,尤其是2019年更是TypeScript爆发性增长的一年,大部分第三方库都开始有提供给TypeScript的类型定义文件。

学习成本

TypeScript因为是在JavaScript的基础上扩展,所以真正的学习成本并不大,但毕竟是静态类型,而且需要理解接口、泛型、类、枚举类型新的概念,对于习惯了JavaScript语言的人来说很难习惯,导致了很多前端工程师听见TypeScript的第一反应都是拒绝,尤其是在看了用TypeScript编写的项目后。

而且如果你想要在现有项目中充分体验TypeScript,你又将面临异常高昂的切换成本。

开发效率的降低

虽然类型系统自带文档,可以省去很多编写注释的时间,但是笔者亲身经历,为所有值填上类型真的痛苦,笔者在参与同事编写的h264播放器时,分分钟想切腹自尽。

你以为要写的:

你实际要写的:

人世间最痛苦的事情莫过于此,我5分钟写个方法,1小时才配齐文档。

虽然TypeScript提供了Any类型,但是使用它的同时也失去了TypeScript的优势,建议不要使用。

部分三方库的兼容

随着TypeScript的愈加火爆,很多依赖包都支持了TypeScript,但是依然有一部分还没有支持,如果你的项目刚好依赖了它们而你还想使用TypeScript的话,那你就需要为他添加一个d.ts文件才可以使用,添加的过程有多麻烦,我只想说祝你好运。

需要编译

JavaScript是标准,是可以直接在浏览器运行的,这一点对于需要编译的TypeScript来说,是一个很大的优点。

我们对于TypeScript的使用

我们团队目前使用TypeScript编写的项目:1、h264播放器 2、错误日志后台

未来一段时间准备使用TypeScript编写的项目:1、pc官网服务端重构 2、内部组件库

综合考虑

在开始播放器项目之前我们主要是基于以下几点考虑:

  • 对新技术的尝试。组内人员对新技术的热忱度都很高,希望通过一个项目来实践TypeScript。
  • 播放器是一对多类型的项目。使用播放器的人多且杂,难以保证都能按照文档规范使用,我们希望过滤掉一些低级问题反馈。
  • 多人协作。播放器项目庞大,且音视频信息在各个函数中多是引用类型传递和修改,对于类型系统的需求大,每个人来编写时都可以避免类型错误,并且方便获取参数类型进行操作。
  • 代码规范化。开源项目,所以代码越规范越好,TypeScript便于理解,并配有详细的文档。
  • 新项目。从头开发,没有重构老代码的成本。

项目地址:https://github.com/huajiaofrontend/HJPlayer

pc官网服务端重构我们主要是基于以下几点考虑:

  • 接口返回值固定类型。虽然有接口文档,但是之前的接口交互时还是会经常出现php端需要进行类型强制转换,或者js端进行类型强制转换,很麻烦,用TypeScript可以很好的解决这个问题
  • 持续维护。pc官网的服务端部分都是需要持续维护的代码,使用TypeScript可以方便大家阅读和后续扩展、重构。
  • 不同系统之间类型获取。开发人员不太可能清楚每个系统的数据结构,如果去阅读又会浪费大量时间,TypeScript可以直接查询到需要的数据结构并在编写时代码提示。

有很多人会问,TypeScript会不会像CoffeeScript一样,在JavaScript引入标准后逐渐被抛弃,那我们还有学习的必要么?

这一点笔者认为,有很大可能是这样的,但是我们没办法确定这个等待期有多长,即便是后续会被JavaScript引入标准,在这之前你就可以享受到上面我们所说的便利,这不香么?

结论

是否使用TypeScript,笔者认为在做出选择之前,你需要认真的衡量一下投入产出比,TypeScript带来的优势是否对当前的项目有很大提升,是否值得花费大量的时间去对现有项目进行重构,值得注意的一点是,不管TypeScript最终会不会被应用到项目中,你都应该学会掌握它了,不要人云亦云。

最后,对于取舍问题,笔者的建议是:如果你的项目是大型项目,第三方库,或者其他需要持续维护的项目,上TypeScript吧;如果你的项目是活动,分享页面,等短周期并且不需要持续维护的项目,想用哪个用哪个,这里我想说,动态类型的爽还是真的爽。


https://mp.weixin.qq.com/s/C8JXI4O3tMzg6_HvDtUQ4Q

高仿 Eyepetizer | 开眼短视频

基于 Kotlin 语言仿写「开眼 Eyepetizer」的一个短视频 Android 客户端项目,采用 Jetpack + 协程实现的 MVVM 架构。

发布于:6月以前  |  986次阅读  |  详细内容 »

DialogFragment引起的内存泄露

发布于:8月以前  |  1227次阅读  |  详细内容 »

太经典了!雷军 1994 年写的代码,像诗一样优雅!

发布于:8月以前  |  380次阅读  |  详细内容 »

图解 | 线程的麻烦事儿,Actor能解决吗?

发布于:8月以前  |  329次阅读  |  详细内容 »

日志规范多重要,这篇文章告诉你!

发布于:8月以前  |  316次阅读  |  详细内容 »

最经典的两种软件架构模式

发布于:9月以前  |  264次阅读  |  详细内容 »

VSCode源码分析 - 主要窗口

workbench.ts中startup里面Workbench负责创建主界面,其文件路径为:`src/vs/workbench/browser/workbench.ts`

发布于:9月以前  |  511次阅读  |  详细内容 »

docker 访问宿主机网络

docker容器访问宿主的方法

发布于:9月以前  |  612次阅读  |  详细内容 »

源码浅析 SDWebImage 5.5.2

本文基于 SDWebImage 5.5.2。重读的原因也是由于发现它的 API 在不断迭代,许多结构已经不同与早期版本,同时也是为了做一个记录。阅读顺序也会依据 API 执行顺序进行,不会太拘泥于细节,更多是了解整个框架是如何运行的。

发布于:10月以前  |  596次阅读  |  详细内容 »

go-micro 到底是个啥?

go-micro 到底是个啥?这是很多初接触微服务的技术人员想要弄清楚的,但是大多数文章都只告诉你 go-micro 是一个微服务框架,国内大多数作者写出来的文章都只是 go-micro 官网上的示例代码,这样的代码还被随意转载。这让很多初接触微服务和 go-micro 有点摸不到头脑。本文试图说清楚这些事。

发布于:11月以前  |  440次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  8049次阅读
Node.js下通过配置host访问URL 1年以前  |  3121次阅读
js动态创建类和实例化 1年以前  |  2594次阅读
初探 React 组件 1年以前  |  2571次阅读
wordpress标签页的制作 1年以前  |  2499次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  2442次阅读
22个HTML5的初级技巧 1年以前  |  2354次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  2299次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  2290次阅读
CSS清除浮动 1年以前  |  2278次阅读
第三版主题上线 1年以前  |  2273次阅读
利用服务器返回header来传输数据 1年以前  |  2235次阅读
获取元素的计算的样式 1年以前  |  2224次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  2220次阅读
2014年度总结 1年以前  |  2179次阅读