CRA 项目 create-react-app 请谨慎升级 TypeScript

本文解决了 create-react-app 或 react-scripts 项目在升级 TypeScript v4 到 v5 遇到的问题,还讲解了 TypeScript v5 新的 const 类型参数 语法。

问题

一个使用官方 create-react-app 的项目,某次为了引入 ts-pattern 将 TypeScript 从 v4 升级到 v5,随后在安装或移除其他依赖的时候报错:

vbnet 复制代码
❯ npm uninstall markdown-it-katex 
npm error code ERESOLVE
npm error ERESOLVE could not resolve
...
npm error
npm error Conflicting peer dependency: typescript@4.9.5
npm error node_modules/typescript
npm error   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1

重点:peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1

翻译一下就是 react-scripts 写死了 TypeScript 的范围,但是 CRA (create-react-app) 或 react-scripts 已经不维护和更新了,没法给其提 PR,社区也已有 issue,我们只能自己想办法。

CRA 不维护:

Upgrade TypeScript to v5 in React-scripts #13283

github.com/facebook/cr...

CRA is pretty much dead. I advise switching to vite. I have done this for a few projects, and it is really straight forward.

方案 1:vite

方案 1 迁移到 vite,但是我们项目步子还不想跨的这么大。

方案 2:--legacy-peer-deps

报错之后 npm 紧接着给了一个解决方案,但是我觉得不是很好,因为其针对的范围太大而不仅仅是 TypeScript 的版本不匹配问题:

vbnet 复制代码
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.  

也就是在每次 npm install/uninstall 的时候增加 flag --force or --legacy-peer-deps,或者在 .npmrc 中新增就无需每次安装或卸载都加。

方案 3:overrides

项目 package.json 增加 overrides(如果你是其他包管理也有相应的字段,比如 yarn 的 resolution):

perl 复制代码
  "dependencies": {
    "typescript": "^5.8.3",
  }
  "// 为了升级 typescript 到 v5(ts-pattern 以及趋势) 但 react-scripts 限定了 v4 导致下面的报错": "",
  "// fix Could not resolve dependency: npm error peerOptional typescript@\"^3.2.1 || ^4\" from react-scripts@5.0.1": "",
  "// overrides 比 --force 或 --legacy-peer-deps 更安全因为可以精确锁定某个依赖的版本": "",
  "overrides": {
    "typescript": "$typescript"
  },

注意 "$typescript" 这是一种引用写法,当然你可以写成 ^5.8.3,但引用是一种更好的方式,以后更新 TypeScript 版本此处无需随着变化。注意不能写死版本号 "5.8.3",否则报错 EOVERRIDE

vbnet 复制代码
❯ npm uninstall markdown-it-katex
npm error code EOVERRIDE
npm error Override for typescript@^5.8.3 conflicts with direct dependency

更多阅读

json 复制代码
{
  "pnpm": {
    "overrides": {
      "foo": "^1.0.0",
      "quux": "npm:@myorg/quux@^1.0.0",
      "bar@^2.1.0": "3.0.0",
      "qar@1>zoo": "2"
    }
  }
}

pnpm 同样支持引用 "bar": "$foo",还支持删除某个依赖 "foo@1.0.0>heavy-dep": "-",比如某个大的依赖没有用到,从而减少安装时间。

为何安装 ts-pattern 需要升级 TypeScript

最后回答一个问题,为什么 ts-pattern 需要升级到 ts v5。ts-pattern 引入了一个新的语法:"const 类型参数"const type parameters)。

ts 复制代码
export declare function match<const input, output = symbols.unset>(value: input): Match<input, output>;

即此处的 const input,如果不升级将报错:match doesnt work (Expected 0 arguments, but got 1)

详见我的另一篇文章:TypeScript v5 一个非常有用的新语法:"const 类型参数"

相关推荐
2501_9209317021 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
摘星编程1 天前
React Native鸿蒙版:Drawer抽屉导航实现
react native·react.js·harmonyos
2501_920931701 天前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
摘星编程1 天前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767371 天前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88211 天前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
2601_949593651 天前
基础入门 React Native 鸿蒙跨平台开发:卡片组件
react native·react.js·harmonyos
qq_177767371 天前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767371 天前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
烬头88211 天前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos