V2EX 09月16日
TypeScript 5.9 提升代码提示体验并缓解性能挑战
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

TypeScript 5.9 带来了多项重要更新,显著提升了开发体验。其中,“可扩展悬停”功能让内联类型预览更加直观,无需跳转查看定义,大幅减少了在复杂类型中的导航成本。此外,新的悬停长度配置项允许用户自定义显示内容长度,避免了信息截断。对于类型安全框架(如zod+tRPC)带来的性能负担,TypeScript 5.9的“缓存实例”机制也提供了有效缓解,将大型项目的类型推断时间从数秒甚至数十秒缩短至可接受的范围,使得开发者能够更流畅地进行大型TypeScript项目开发。

🌟 **可扩展悬停功能优化类型预览**:TypeScript 5.9 推出的可扩展悬停功能,使得开发者在鼠标悬停在函数或变量上时,能够直接在当前界面展开并查看复杂的内联类型定义,无需再跳转到类型定义文件,极大地提高了开发效率,尤其是在处理多层嵌套或复杂的类型别名时,这种原地展开的体验比以往“滚到定义处”或“速览定义”更加便捷高效。

📏 **悬停长度配置提升信息完整性**:以往TypeScript默认的悬停提示长度限制(如160字符)常常导致大型或复杂的类型信息被截断,用户需要额外操作才能查看完整内容。TypeScript 5.9 引入了可配置的悬停最大长度(默认500,推荐用户自行设置为1000甚至更高),这使得悬停提示框能够显示更多信息,确保开发者能够一览无余地获取所需的类型细节,从而减少信息获取的障碍。

🚀 **缓存实例大幅缓解性能瓶颈**:对于集成了zod、tRPC等框架的大型TypeScript项目,类型实例化开销巨大,导致tsserver响应缓慢,严重影响开发体验。TypeScript 5.9 的“缓存实例(Cache Instantiations on Mappers)”特性,通过缓存重复的类型实例化过程,显著降低了类型推断的计算量。实测表明,这能将原本耗时数秒甚至数十秒的类型推断时间缩短至可接受的2秒左右,让开发者在大型项目开发中摆脱“时间暂停”的困扰,恢复代码补全、错误检查等核心功能。

TypeScript5.9 刚出就关注了,令我惊喜的是这三个变化:可扩展悬停+悬停最大长度配置+缓存实例

不过当时在 vscode 上摸了半天没法开启,而且 eslint 当时暂时还不支持 5.9 ,于是就回退 5.8 。

今天有时间尝试了一下,vscode 版本大于 1.103 且 TypeScript 版本大于 5.9 ,默认开启可扩展悬停,之前用过实验性配置的可以删掉这个无用配置了 "typescript.experimental.expandableHover": true

需要注意的是部分插件会阻止这个功能,vue/svelte/astro 等插件要么升到最新版要么禁用

假设有这么一个函数,指定了三个参数

function test1(option: { a: string; b: number; c: boolean }) {  console.log(option)}

悬浮在函数名上,得到的是

function test1(option: {    a: string;    b: number;    c: boolean;}): void

如果这个参数类型需要在其他地方使用,只能把内联类型转成接口或者类型别名

type Option = { a: string; b: number; c: boolean }function test2(option: Option) {  console.log(option)}

此时预览结果变成了这样

function test2(option: Option): void

想要看类型?

    请滚到定义的地方自己去看。Alt + F12 速览定义

都非常不方便,而且类型如果经过多次封装,人工去展开类型简直是地狱般的体验。

而 5.9 的可扩展悬停就是还原了内联类型预览,不需要跑到类型定义查看里面到底有啥类型,原地就能展开。虽然有些类型我试了下并不能展开,但相比原来的四处横跳体验好了几百倍。

另外也增加了悬停长度配置项,原本出于性能考虑,typescript 给的默认值是 160 ,这导致了类型只要稍大一点悬浮框就会截断或者省略内容,并且无法调整,5.9 将这个值设置成 500 ,但我建议在 vscode 中配置更大的值以便完全展开大型复杂类型。

"js/ts.hover.maximumLength": 1000 // 个人建议至少 1000 ,我自己设置了 5000

对关注类型安全的 TypeScript 开发人员来说,zod 等类型校验框架是必不可少的,它解决了统一运行时与编译时类型的难题,将运行时检查与静态类型统一为单一可信源,可以通过校验行为生成安全的入参类型,再配合 tRPC 等远程调用,编写接口实现的本身就是在严格定义其入参与返回类型,前端只需调用接口并通过泛型复用入参与返回值类型,不需要额外定义类型却能整个链路都受到类型的制约,实现了真正有实际意义的类型安全,实现了类型即文档。但这类框架带给 typescript 的性能负担是毁灭性的,这是当前 TypeScript 项目面临的最大挑战,zod+tRPC 等框架不仅带来了类型安全,还带来了指数增长的类型实例化开销。

以我当前维护的 honojs 全栈项目举例,使用 zod+hono 自带的 RPC ,接口数量在 100 个左右,后端代码随便一改 tsserver 就得暂停 10 秒,这意味着 10 秒内我失去了代码补全、签名帮助、错误检查、悬停提示、智能补全等等 typescript 带来的益处,退化成 js 原始人,编写大型 ts 项目的人应该会深有体会。

为什么这么慢?因为 RPC 是导出整个路由类型,每个接口都有由 zod 生成的实例参数类型与 return 的返回类型,所有接口全部链接在一起,组成一个巨大无比的类型交给前端项目使用。

可惜 z.infer 实在太慢了,每一次简单的代码改动,无数个 zod 类型都要全部重新推断一遍,导致 RPC+zod 项目到了一定规模每个开发人员会被迫自动学会时间暂停。

到了这时候,就需要考虑不再由 tsserver 去实时推断类型,而是先编译后端项目,前端仅使用静态类型,但编译很难做到无痛无感,总归会对开发有影响。

typescript5.9 的 Cache Instantiations on Mappers 很大程度缓解了这个难题,以我当前项目来说,the world 从十秒变成两秒,完全能接受,切换成 ts-go 更快,可惜不稳定。

TypeScript 很好,而且在越变越好。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

TypeScript 5.9 可扩展悬停 悬停长度配置 缓存实例 性能优化 类型安全 zod tRPC 开发体验 Expandable Hover Hover Length Configuration Cache Instantiations Performance Optimization Type Safety Developer Experience
相关文章