从 JavaScript 到 TypeScript:上手试试才知道答案
itomcoil 2025-03-24 17:20 13 浏览
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 的项目都有深刻的理解。
相关推荐
- 最强聚类模型,层次聚类 !!_层次聚类的优缺点
-
哈喽,我是小白~咱们今天聊聊层次聚类,这种聚类方法在后面的使用,也是非常频繁的~首先,聚类很好理解,聚类(Clustering)就是把一堆“东西”自动分组。这些“东西”可以是人、...
- python决策树用于分类和回归问题实际应用案例
-
决策树(DecisionTrees)通过树状结构进行决策,在每个节点上根据特征进行分支。用于分类和回归问题。实际应用案例:预测一个顾客是否会流失。决策树是一种基于树状结构的机器学习算法,用于解决分类...
- Python教程(四十五):推荐系统-个性化推荐算法
-
今日目标o理解推荐系统的基本概念和类型o掌握协同过滤算法(用户和物品)o学会基于内容的推荐方法o了解矩阵分解和深度学习推荐o掌握推荐系统评估和优化技术推荐系统概述推荐系统是信息过滤系统,用于...
- 简单学Python——NumPy库7——排序和去重
-
NumPy数组排序主要用sort方法,sort方法只能将数值按升充排列(可以用[::-1]的切片方式实现降序排序),并且不改变原数组。例如:importnumpyasnpa=np.array(...
- PyTorch实战:TorchVision目标检测模型微调完
-
PyTorch实战:TorchVision目标检测模型微调完整教程一、什么是微调(Finetuning)?微调(Finetuning)是指在已经预训练好的模型基础上,使用自己的数据对模型进行进一步训练...
- C4.5算法解释_简述c4.5算法的基本思想
-
C4.5算法是ID3算法的改进版,它在特征选择上采用了信息增益比来解决ID3算法对取值较多的特征有偏好的问题。C4.5算法也是一种用于决策树构建的算法,它同样基于信息熵的概念。C4.5算法的步骤如下:...
- Python中的数据聚类及可视化分析实践
-
探索如何通过聚类分析揭露糖尿病预测数据集的特征!我们将运用Python的强力工具,深入挖掘数据,以直观的可视化揭示不同特征间的关系。一同探索聚类分析在糖尿病预测中的实践!所有这些可视化都可以通过数据操...
- 用Python来统计大乐透号码的概率分布
-
用Python来统计大乐透号码的概率分布,可以按照以下步骤进行:导入所需的库:使用Python中的numpy库生成数字序列,使用matplotlib库生成概率分布图。读取大乐透历史数据:从网络上找到大...
- python:支持向量机监督学习算法用于二分类和多分类问题示例
-
监督学习-支持向量机(SVM)支持向量机(SupportVectorMachine,简称SVM)是一种常用的监督学习算法,用于解决分类和回归问题。SVM的目标是找到一个最优的超平面,将不同类别的...
- 25个例子学会Pandas Groupby 操作
-
groupby是Pandas在数据分析中最常用的函数之一。它用于根据给定列中的不同值对数据点(即行)进行分组,分组后的数据可以计算生成组的聚合值。如果我们有一个包含汽车品牌和价格信息的数据集,那么可以...
- 数据挖掘流程_数据挖掘流程主要有哪些步骤
-
数据挖掘流程1.了解需求,确认目标说一下几点思考方法:做什么?目的是什么?目标是什么?为什么要做?有什么价值和意义?如何去做?完整解决方案是什么?2.获取数据pandas读取数据pd.read.c...
- 使用Python寻找图像最常见的颜色_python 以图找图
-
如果我们知道图像或对象最常见的是哪种颜色,那么可以解决图像处理中的几个用例,例如在农业领域,我们可能需要确定水果的成熟度。我们可以简单地检查一下水果的颜色是否在预定的范围内,看看它是成熟的,腐烂的,还...
- 财务预算分析全网最佳实践:从每月分析到每天分析
-
原文链接如下:「链接」掌握本文的方法,你就掌握了企业预算精细化分析的能力,全网首发。数据模拟稍微有点问题,不要在意数据细节,先看下最终效果。在编制财务预算或业务预算的过程中,通常预算的所有数据都是按月...
- 常用数据工具去重方法_数据去重公式
-
在数据处理中,去除重复数据是确保数据质量和分析准确性的关键步骤。特别是在处理多列数据时,保留唯一值组合能够有效清理数据集,避免冗余信息对分析结果的干扰。不同的工具和编程语言提供了多种方法来实现多列去重...
- Python教程(四十):PyTorch深度学习-动态计算图
-
今日目标o理解PyTorch的基本概念和动态计算图o掌握PyTorch张量操作和自动求导o学会构建神经网络模型o了解PyTorch的高级特性o掌握模型训练和部署PyTorch概述PyTorc...
- 一周热门
- 最近发表
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)