Gulp构建时TS版本不符引发Testing-Library报错求助

问题根源 #

你升级了项目里的TypeScript到4.0.3，但gulp build时还是显示用3.3.4000，核心原因是你的项目依赖了@microsoft/rush-stack-compiler-3.3——这是SharePoint Framework（SPFx）构建工具链的核心依赖，它会强制绑定特定版本的TypeScript（3.3.x），完全忽略你在package.json里指定的TS版本。而@testing-library/dom依赖的pretty-format用了TS4.x才支持的语法，旧版本TS解析不了这些类型定义，所以抛出了一堆TS1005错误。

具体解决步骤 #

1. 替换适配TS4.0的rush-stack-compiler版本 #

SPFx的构建工具链是通过rush-stack-compiler来绑定TS版本的，你需要把旧的@microsoft/rush-stack-compiler-3.3替换成支持TS4.0的版本。针对你的SPFx 1.11.0版本，推荐安装@microsoft/rush-stack-compiler-4.0：

• 打开package.json，找到devDependencies里的@microsoft/rush-stack-compiler-3.3，替换成：

  "@microsoft/rush-stack-compiler-4.0": "0.4.0"
  

2. 彻底清理依赖并重新安装 #

因为旧的依赖缓存可能还残留着旧版本的TS，必须彻底清理：

• 删除项目根目录的node_modules文件夹
• 删除package-lock.json（如果你用npm）或者yarn.lock（如果你用yarn）
• 执行npm install或yarn install重新安装所有依赖

3. 验证TypeScript版本 #

安装完成后，在项目根目录执行：

npx tsc -v

如果输出是Version 4.0.3，说明版本已经生效了，再运行gulp build应该就能解决那些TS1005错误了。

额外兜底方案（如果还是有冲突） #

如果嵌套依赖里还有版本不一致的问题，可以在package.json里添加resolutions字段，强制所有依赖统一使用指定版本的TS和pretty-format：

"resolutions": {
  "typescript": "^4.0.3",
  "pretty-format": "^26.5.0"
}

添加后重新执行依赖安装即可（npm需要先安装npm-force-resolutions工具，yarn可以直接用）。

内容的提问来源于stack exchange，提问作者Burre Ifort