TypeScript和依赖版本不兼容问题

TypeScript目前还在不停地迭代中,每个版本都会出现一些新的特性和变动,当我们使用一些用ts开发的依赖时,可能会出现版本不兼容问题

例如,下面的例子,我在进行vue项目打包时出现了element-plus组件库下lodash依赖的报错

部分报错如下:

TS1005: '?' expected.
    1024 |     type GetFieldTypeOfArrayLikeByKey<T extends unknown[], K> =
    1025 |         K extends number ? T[K]
  > 1026 |         : K extends `${infer N extends number}` ? T[N]
         |                                              ^
    1027 |         : K extends keyof T ? T[K] : undefined;
    1028 |
    1029 |     type GetFieldTypeOfStringByKey<T extends string, K> =

出现这种情况,判断是element-plus依赖中lodash依赖的代码中使用了新的ts语法

: K extends `${infer N extends number}` ? T[N]

最简单的解决方法: 更新typescript到最新版本

命令行输入: npm install  typescript@latest -D

但是更新到最新版本也可能导致ts不兼容其它依赖(如果ts版本太高,可能会删除一些废弃的语法,导致某些使用了废弃语法的依赖报错,这时候我们要么更新某些依赖,要么降低ts到合适版本)

如下,安装过高版本的ts会出现警告

但是,这貌似不会影响打包,我执行npm run build进行打包时发现是可以的

问题或许解决了,但是这种方式过于简单粗暴,我们也可以尝试把ts升级到合适版本

还是那个问题:

        出现这种情况,判断是element-plus依赖中lodash依赖的代码中使用了新的ts语法

于是,询问了GPT这是哪个版本的语法,给出的答案是4.1 

但在package.json中发现typescript的版本已经是4.5.4了,情况不太对.但也很正常,GPT给出的回答只能作为参考.

于是,尝试去element-plus的lodash依赖上看看能不能找到其需要的typescript依赖

根据报错的内容,找到依赖的位置

找到package.json,真的找到了一个typeScriptVersion字段,并指定ts的版本为4.8

查了一下,webpack好像没有提供typeScriptVersion这个字段,这个莫非是element-plus自定义的?

我们打开typescript官网TypeScript: Documentation - TypeScript 4.8,查看4.8的新特性

发现确实新增了一个语法: Improved Inference for infer Types in Template String Types (改进了模板字符串类型的类型判断)

我用的是npm包管理器,去npm官网(npm | Home)搜索typescript依赖查看它的所有版本,会进入到这个页面: typescript - npm

并找到4.8相关版本, 我找到一个下载量较高的4.8.4版本

安装这个版本 

再执行打包,同样可以成功打包

以上是我遇到该问题的解决方案,有更好的解决方法欢迎在评论区补充~