百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

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

itomcoil 2025-03-24 17:20 20 浏览

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 的项目都有深刻的理解。

相关推荐

python创建文件夹,轻松搞定,喝咖啡去了

最近经常在录视频课程,一个课程下面往往有许多小课,需要分多个文件夹来放视频、PPT和案例,这下可好了,一个一个手工创建,手酸了都做不完。别急,来段PYTHON代码,轻松搞定,喝咖啡去了!import...

如何编写第一个Python程序_pycharm写第一个python程序

一、第一个python程序[掌握]python:python解释器,将python代码解释成计算机认识的语言pycharm:IDE(集成开发环境),写代码的一个软件,集成了写代码,...

Python文件怎么打包为exe程序?_python3.8打包成exe文件

PyInstaller是一个Python应用程序打包工具,它可以将Python程序打包为单个独立可执行文件。要使用PyInstaller打包Python程序,需要在命令行中使用py...

官方的Python环境_python环境版本

Python是一种解释型编程开发语言,根据Python语法编写出来的程序,需要经过Python解释器来进行执行。打开Python官网(https://www.python.org),找到下载页面,选择...

[编程基础] Python配置文件读取库ConfigParser总结

PythonConfigParser教程显示了如何使用ConfigParser在Python中使用配置文件。文章目录1介绍1.1PythonConfigParser读取文件1.2Python...

Python打包exe软件,用这个库真的很容易

初学Python的人会觉得开发一个exe软件非常复杂,其实不然,从.py到.exe文件的过程很简单。你甚至可以在一天之内用Python开发一个能正常运行的exe软件,因为Python有专门exe打包库...

2025 PyInstaller 打包说明(中文指南),python 打包成exe 都在这里

点赞标记,明天就能用上这几个技巧!linux运维、shell、python、网络爬虫、数据采集等定定做,请私信。。。PyInstaller打包说明(中文指南)下面按准备→基本使用→常用...

Python自动化办公应用学习笔记40—文件路径2

4.特殊路径操作用户主目录·获取当前用户的主目录路径非常常用:frompathlibimportPathhome_dir=Path.home()#返回当前用户主目录的Path对象...

Python内置tempfile模块: 生成临时文件和目录详解

1.引言在Python开发中,临时文件和目录的创建和管理是一个常见的需求。Python提供了内置模块tempfile,用于生成临时文件和目录。本文将详细介绍tempfile模块的使用方法、原理及相关...

python代码实现读取文件并生成韦恩图

00、背景今天战略解码,有同学用韦恩图展示各个产品线的占比,效果不错。韦恩图(Venndiagram),是在集合论数学分支中,在不太严格的意义下用以表示集合的一种图解。它们用于展示在不同的事物群组之...

Python技术解放双手,一键搞定海量文件重命名,一周工作量秒搞定

摘要:想象一下,周五傍晚,办公室的同事们纷纷准备享受周末,而你,面对着堆积如山的文件,需要将它们的文件名从美国日期格式改为欧洲日期格式,这似乎注定了你将与加班为伍。但别担心,Python自动化办公来...

Python路径操作的一些基础方法_python路径文件

带你走进@机器人时代Discover点击上面蓝色文字,关注我们Python自动化操作文件避开不了路径操作方法,今天我们来学习一下路径操作的一些基础。Pathlib库模块提供的路径操作包括路径的...

Python爬取下载m3u8加密视频,原来这么简单

1.前言爬取视频的时候发现,现在的视频都是经过加密(m3u8),不再是mp4或者avi链接直接在网页显示,都是经过加密形成ts文件分段进行播放。今天就教大家如果通过python爬取下载m3u8加密视频...

探秘 shutil:Python 高级文件操作的得力助手

在Python的标准库中,shutil模块犹如一位技艺精湛的工匠,为我们处理文件和目录提供了一系列高级操作功能。无论是文件的复制、移动、删除,还是归档与解压缩,shutil都能以简洁高效的方式完成...

怎么把 Python + Flet 开发的程序,打包为 exe ?这个方法很简单!

前面用Python+Flet开发的“我的计算器v3”,怎么打包为exe文件呢?这样才能分发给他人,直接“双击”运行使用啊!今天我给大家分享一个简单的、可用的,把Flet开发的程序打包为...