Web3Modal与TypeScript 5集成问题及适配方案咨询

问题背景 #

在React+TypeScript环境中试用Web3Modal（WalletConnect）时，按官方指南操作遭遇依赖冲突：

• 执行npx create-react-app web3modal --template typescript创建项目（默认TypeScript版本为4.x）
• 运行npm install @web3modal/ethereum @web3modal/react wagmi viem时出现依赖错误
• 升级TypeScript到^5后产生警告，再次执行安装命令出现更多错误
• 降级Web3Modal到2.3.0版本后，仍发现其依赖TypeScript 5.0.4

问题解答 #

1. 最新版Web3Modal的React/TypeScript示例 #

官方JS示例可快速转为TypeScript版本，更推荐用Vite初始化React+TS项目替代CRA：

• 执行npm create vite@latest web3modal-ts -- --template react-ts创建项目，Vite默认TypeScript版本适配最新Web3Modal的要求，安装依赖后可正常配置
• 若基于现有CRA项目，可手动为官方JS示例补充TypeScript类型：比如导入@web3modal/react的Web3ModalProps类型，为wagmi配置、viem链信息等添加类型标注

2. 适配TypeScript 4.9.5的版本组合 #

以下版本组合完全兼容TypeScript 4.9.5，可直接执行安装：

npm install @web3modal/ethereum@^2.2.10 @web3modal/react@^2.2.10 wagmi@^0.12.12 viem@^0.3.19

上述版本的peerDependencies对TypeScript的要求为>=4.7，不会与TypeScript 4.9.5产生依赖冲突。

内容的提问来源于stack exchange，提问作者Radek Domański