HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

从 JavaScript 到 TypeScript:上手试试才知道答案

  • 2022-07-26
  • 本文字数:2278 字

    阅读完需:约 7 分钟

从 JavaScript 到 TypeScript:上手试试才知道答案

嘉宾 |陈芸

编辑 |贾亚宁


TypeScript 在这几年的需求呈现指数级增长的趋势,越来越多的开源项目开始使用 TypeScript 进行重构。那 TypeScript 究竟好不好,好在哪里?什么样的重构方法和流程最高效?出于对这些问题的好奇,我们找到了陈芸老师。她是 FreeWheel 核心研发团队的高级软件工程师,负责前端开发工作。


同时陈芸老师也是已经上线的 QCon+ 案例研习社TypeScript 在中大型项目中的落地实践」专题的讲师,因此我们带着对 TypeScript 相关的疑惑和好奇对陈芸老师进行了采访,让我们一起来看看老师的思考吧。

InfoQ:你最近在负责什么样的工作呢?


陈芸:我在组内主要负责前端相关的一些工作,包括产品的开发、前端技术探索、公共组件的开发等等。最近在做几个项目,有公司产品的前端大改版,也有公司内部的前端流程优化工具开发,还参与一些工程师自我驱动的项目。

InfoQ:你在使用 TypeScript 的过程中,有遇到什么印象深刻的困难吗?


陈芸:使用 TypeScript 的过程总体来说还是挺顺利的,得到的效果要比预想好得多。当然,困难肯定还是有的。


比如在对已有 JavaScript 项目 TypeScript 化的过程中,当我们发现有编译错误时,需要判断是逻辑本身的 bug 还是类型定义有问题,这样的 bug 往往是不会使页面直接出错的,而是数据展示不符合预期,需要对业务逻辑有足够的了解以及对类型定义有足够的自信才能快速定位问题。


再比如,我们做 JavaScript 迁移的项目是一个多团队参与的大项目,无法一步到位,且每个模块的迁移标准和方式都不同,代码检查的标准也不相同,所以我们给各个模块都配置了 tsconfig,各自 include 各自的模块路径,公共库则需要符合各个配置要求。于此同时,还未完成迁移的 JavaScript 代码也不能受到影响,这个配置体系是非常复杂的。


还有关于提升编译效率的问题,我们知道 TypeScript compile 的耗时比较大,一方面我们把 TypeScript compile 作为单独的进程进行类型检查,不阻塞主进程的打包过程;另一方面为了保证类型检查的效果,我们在把 TypeScript compile 作为 lint 的一部分,也就是说每一次代码提交都会跑一遍 tsc, 当项目已经发展到非常大型时,如果每次都对全部文件进行 compile,则会使得 lint 的时长越来越长,所以我们在这里做了一个优化,把每次修改的文件用脚本放到 tsconfig 的 include 中,动态生成一个临时的 tsconfig,这样 compile 的过程只会针对提交的有修改的文件,这就加速了 lint 的过程。

InfoQ:你们团队在选择 TypeScript 时,是基于什么考虑呢?


陈芸:我们的出发点其实很简单,就是为了提高代码质量,从而提高产品质量,像我们 ToB 的公司,一个小的前端 bug 就可能会影响到很多客户,从而给公司造成巨大的损失,所以产品的质量是重中之重。除此之外,由于我们的产品业务逻辑非常复杂,我们也希望代码能够有更好的可读性以及更易于维护。

InfoQ:你认为从 JavaScript 迁移到 TypeScript 有哪些更加高效的方法?


陈芸:说到效率,首先选择一个合适的编辑器绝对会大大提高效率,比如对 TypeScript 原生支持的 VS Code。然后,可以参考一些成熟的 TypeScript 项目的配置方案,类型定义公约等,站在巨人的肩膀上。


我们的项目由于是一个开发中的项目,为了兼顾产品的原有开发进度,我们选择了对项目进行逐个文件迁移的方式,这里值得说的一点是文件迁移的顺序。当时我们对项目做迁移时是从底层公共库入手,再到数据交互模块,最后是上层业务组件,这样的迁移顺序理论上是一个比较好的顺序,但也会有一些问题,比如如果负责迁移的人对原来的项目实现不是特别熟悉的话,对底层公共库的类型定义往往会有偏差,当我们做上层业务组件的迁移时,经常需要反复修改底层公共库的类型定义,这造成了许多额外的花销。如果条件允许,比较好的方式是由最熟悉某块代码的人(比如原作者本人)来做那部分的代码迁移。


最后一点,从项目决定 TypeScript 化开始,所有新提交的代码要求都是 TypeScript 的,否则项目将很难彻底完成 TypeScript 化的过程。

InfoQ:TypeScript 已然成为前端新宠,那你认为什么情况下不适合使用 TypeScript 呢?


陈芸:如果从项目规模上出发,我其实觉得都是适合的,即使是个人的小型项目,有类型约束也会使代码更加健壮。当然如果存在这样的客观情况,项目时间紧且团队成员中的大多数还没有对 TypeScript 有足够了解,我认为这个时候使用 TypeScript 是有风险的。另一种情况,目前的 JavaScript 项目非常成熟,且可预计的将来不会有大量的功能迭代,个人觉得也没有必要非要重写来做 TypeScript 化,这相当于把一个大型项目重新开发一遍,当然这不是最大的难题,最大的难题是还必须和原项目的所有业务逻辑保持一致。

InfoQ:最后,你想对其他正在使用或者想要使用 TypeScript 的小伙伴说些什么呢?


陈芸:首先,我肯定是支持小伙伴们使用 TypeScript 的,尤其是新项目,无论大小,都可以尝试一下,没有试过是很难感受到它带来的好处的,当它实实在在地帮助大家提升了开发效率,提前发现了隐藏的 bug 时,我相信就很难再回到 JavaScript 了。


前端的新技术日新月异,一方面我们需要及时了解前端资讯,比如定期看看 JS Weekly、CSS Weekly 这样的订阅;另一方面,我们最好能对自己感兴趣的技术做一些尝试,看看有没有一些日常工作中的痛点是这些新技术能帮助解决的,这样既可以得到自我提升,又可以帮助到实际的工作。

嘉宾简介


陈芸 FreeWheel 核心业务团队高级软件工程师


就职于 FreeWheel 核心业务团队,主要负责前端开发工作,对前端前沿技术非常热衷,致力于提升产品质量,优化用户体验。前豆瓣全栈开发工程师,对 ToB,ToC 的项目都有深刻的理解。

2022-07-26 14:477785

评论

发布
暂无评论
发现更多内容

dart系列之:还在为编码解码而烦恼吗?用dart试试

程序那些事

flutter dart flutter 面向切面 aop 程序那些事 12月日更

vCenter管理软件用什么牌子好?有哪些用处?

行云管家

虚拟化 vcenter

等保工作中常见导致测评结论为差的高风险项

行云管家

网络安全 等级保护 等保测评 等保结论

使用工具Source Monitor测量您Java代码的环复杂度

汪子熙

Java 软件工程 28天写作 12月日更 代码复杂度

Cordova插件中JavaScript代码与Java的交互细节介绍

汪子熙

Java JavaScript 移动应用 28天写作 12月日更

12 月亚马逊云科技培训与认证课程,精彩不容错过!

亚马逊云科技 (Amazon Web Services)

架构师 培训 认证

如何在Flutter应用程序中创建不同的渐变 【Flutter专题14】

坚果

flutter 28天写作 12月日更

PackML从会到不会——命令标签(4)

陈的错题集

标准化 PackML

小程序与H5适合的场景应用都有哪些

Speedoooo

ios开发 APP开发 容器安全 Andriod开发 容器应用

短视频平台的风控系统设计

Bill Zhang

分享一个从源码快速构建应用的小工具

Draven Gorden

开发者工具 开发工具 开源项目

嚯,这款AI建模工具实在太强大了,快来pick!

百度开发者中心

AI python编辑器

☕【并发技术系列】「多线程并发编程」技术体系和并发模型的基础探究(夯实基础)

洛神灬殇

Java 并发编程 多线程 多进程 12月日更

基于星环科技大数据平台 辽宁城市建设职业技术学院打造智慧校园

星环科技

大数据

Camtasia视频剪辑功能详解

淋雨

Camtasia

一场关于元宇宙公司之死的剧本杀

白洞计划

架构实战营 - 模块五作业

随风King

「架构实战营」

【福利】腾讯WeTest专有云解决方案,限时开放招募体验官

WeTest

恒源云(GPUSHARE)_CIFAR-10数据集实战:构建ResNet18神经网络

恒源云

深度学习 算法

云智慧正式开源运维管理平台(OMP),加速AIOps社区生态建设

云智慧AIOps社区

运维 运维监控 开源软件 运维体系 运维系统

Selenium之css怎么实现元素定位?

六十七点五

大前端 软件测试 自动化测试 接口测试 selenium

Linux一学就会之Centos8用户管理

学神来啦

Linux centos 运维 linux云计算

MySQL探秘(二):SQL语句执行过程详解

程序员历小冰

MySQL 28天写作 12月日更

模块五作业

危险游戏

架构实战营

Sinfonia: a new paradigm for building scalable distributed systems--翻译理解【1】

Krysta

分布式 transaction Sinfonia DSM 两阶段提交改进

Java和ABAP中的几种引用类型的分析和比较

汪子熙

Java 引用 28天写作 abap 12月日更

周边生态|RoP 重磅发布 0.2.0 版本: 架构全新升级,消息准确性达 100%

Apache Pulsar

Java 开源 架构 云原生 Apache Pulsar

初识JVM的内存结构

Ayue、

技术专题合集

我不用“996”,更不用“007”,可我赚的就是比你多

六十七点五

软件测试 自动化测试 接口测试 测试工程师 功能测试

当我们谈论“远程开发”时,我们在谈论什么

Draven Gorden

云原生 开发者工具 开发工具 远程协作 开发环境

模块5作业

覃飞

从 JavaScript 到 TypeScript:上手试试才知道答案_语言 & 开发_Alice_InfoQ精选文章