点击上方卡片“前端司南”关注我

您的关注意义重大

e31d85d3571417715aded5eb3f7928a0.png

原创@前端司南

插播个广告:最近我在掘金社区有个专栏,主要涉及Vite,Vue3,TypeScript,业务组件库等关键词,目的是帮助读者掌握基于 Vite 构建现代组件库的核心方法。

链接:https://juejin.cn/column/7140103979697963045

最近有个新项目启动,主体内容与先前做的一个项目相似度很高,于是我准备拿这个旧项目作为模板简单改改,就可以启动新项目的开发了。

先说说现状,为了更好地拥抱云原生,部门内部的构建方案进行过升级,目前采用的是 Buildpacks 构建项目镜像,并且相关的服务器架构也做了调整,打镜像的 Runner 是部署在内网的,没有外网通道,也就是说安装 npm 依赖时必须从企业私有的 Nexus NPM 代理走

139a7758756b5243a1339e463baea33e.png

带来的问题就是:这个旧项目启动时还是采纳的旧版镜像构建方案,并不存在新版镜像构建方案带来的内网限制。而现在要基于这个旧项目开发新项目,对接的相关环境都是采纳的新方案,如果不将 npm registry 调整为私有的 Nexus NPM 代理,构建镜像这一步就没法走下去。

b222269ee057d70975cbea754cf4f186.png

所以我就必须得先把 npm registry 调整一下,重新生成 lock 文件。

.npmrc修改成如下(已去掉敏感信息):

registry=https://nexus.xxx.tech:8443/repository/npm-group/
always-auth=true
_auth=xxGxxxxxxxxxxyQ0xxlGxmc=

yarnrc也修改一下:

registry "https://nexus.xxx.tech:8443/repository/npm-group/"

npm-group 包含了 npm-proxy 和 npm-hosted,从这里既可以下载通过 npm-proxy 代理过来的公开发行的 npm 包,也可以下载通过 npm-hosted 维护的企业内部私有的 npm 包。

这个项目用的是 Yarn,所以我接着删掉 yarn.lock 重新生成 lock 文件。

此时最好参照旧的 lock 文件,将关键依赖的版本号先锁住,再重新生成新的 lock 文件,防止在 ~, ^ 这种约束不强的规则下,最终安装的依赖版本号发生变化的情况。

生成完 lock 文件后,检查一下 dev 和 build 等场景,是不是基本上没什么问题。不出意外的话,就要出意外了!

很快,我就在一段 tsx 代码上遇到了这么一个报错:

Type '() => void' is not assignable to type 'MouseEvent'.ts(2322)
runtime-dom.d.ts(1401, 3): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & AntdIconProps'

这个报错是从 runtime-dom.d.ts 中抛出来的,我第一反应就是看看@vue/runtime-dom这个包的版本是不是变了。

查了一下发现,@vue/runtime-dom确实是变了,从3.2.33变成了3.2.40

7291ad2bd6fdd34db120ed23b5a59d9f.png

而这个变化是由于vue的版本号变化引起的,这是因为我的vue版本约束是~3.2.29,重新生成 lock 文件时会检查有没有较新的版本。

7f8ee1827c6befd644f04007fee5ff10.png

好,那我就锁vue的版本号,就定为原来生成的3.2.33版本。

"vue": "3.2.33",

重新安装依赖,期待能解决问题。

9bd6c965e7bfaa7755296cb423c33c66.jpeg

但是这并没有解决问题,报错依然存在。于是我尝试去锁可能影响这个问题的一些依赖的版本号,包括typescript, @typescript-eslint/eslint-plugin, @vue/eslint-config-typescript 等等,最终都没有解决这个问题,搞了个把小时,emo了...

于是,我就尝试找问题源runtime-dom.d.ts有没有什么问题,先仔细观察下报错信息,

The expected type comes from property 'onClick' which is declared here ...

既然你说 onClick 未声明,那我把 onClick 设置为可选的行不行?

// node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts

export interface Events {
  // ...
  onClick?: MouseEvent;
  // ...
}

改了之后这个报错还真的消失了!!!

但是直接改 node_modules 里的代码肯定是不行的,离开自己的机器,就没法同步到这个修改。

借助 patch-package 可以实现修改 node_modules 后也能让其他人安装时同步到修改信息这种能力,但是我还不想这么做,能不能在项目中加一个d.ts,把这个interface修改一下呢?

考虑到interface有合并能力,我先尝试在global.d.ts中加同名的interface Events

declare interface Events {
    onClick?: MouseEvent;
}

但是发现也并没有作用,因为runtime-dom.d.ts中用了export interface Events,这意味着Events接口是模块下的,我这样直接加在全局是合并不了的,那有没有办法合并模块下的interface呢?

我简单尝试了一下declare一个同名的module,然后加入一个interface Events,也不行,这样就直接覆盖了node_modules里的类型声明。

最后实在没办法了,我想到:既然覆盖了,那就全部覆盖吧!我干脆把node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts整个文件抄了出来,就改了onClick?: MouseEvent;这一行,效果确实可以,这个问题算是临时解决了。

c8030ac204a40f93accd77b0a56efff2.png a8a8a02fc0e5467d1e204be461dedd72.png

福无双至,祸不单行,我就知道事情没这么简单!

42b67fbfc1684bc351dd0f727f59461f.jpeg

继续往下测试,我又遇到一个报错:

674f25b726813b7f7db0260e3f492bed.png

这真的是搞心态啊,@ant-design/icons-vue不报错了,div又报错了。

收拾好心情,发现 VSCode 右下角出现了一个提示信息。

69585734b43b968a5138529a6615a9be.png

打开一看,终于找到了问题原因,这是 Volar 给出的提示。

712c04805d654ef240333a0d05c71e81.png

原来是@types/node@18.8.4版本与vue@3.2.40版本不兼容,会造成模板中的 DOM event type 出错,解决的方法有两个:

  1. 降低@types/node版本至18.8.0

  2. 升级 Vue 的版本号至3.2.41,后面还备注了(如果已发行)。

于是,我去看了一下 Vue 的最新版本,发现 3.2.41 还没有发布,可能也正在解决这个问题吧!

58a6efa7df17969c5ab80a0c30aad246.png

那就选择降低@types/node的版本号吧,最终解决了这个问题,前面改的那个interface相关的代码也可以删了。

347b4369b5acc542eaf09b3ac23ab4a9.png

相关 issue 还是 2 天前提出的,说明这个问题还蛮新的。

e81d6d02c6451a057c70bfc49b748e42.png

为啥 Volar 不早点提示我呢?难道是因为我第一个报错是在.tsx中?估计是...

END

3c92dc1e64dbc6ea84470445fe08eff6.png

如果觉得这篇文章还不错

点击下面卡片关注我

来个【分享、点赞、在看】三连支持一下吧d37da4d42199c7c849b07df26b648a38.png

   “分享、点赞、在看” 支持一波 034c1d880a7bea6304124d928d617c7d.png 

Logo

前往低代码交流专区

更多推荐