如何修复“表达式生成的联合类型过于复杂而无法表示。ts(2590)”？

Question

如何修复“表达式生成的联合类型过于复杂而无法表示。ts(2590)”？

我正在尝试使用@chakra-ui/reactnpm 库中的 Button，但 Button 元素会产生此错误：

TypeScript：表达式生成的联合类型过于复杂而无法表示。ts(2590) 示例：

import {Button} from "@chakra-ui/react"

function Page() {
  return <Button onClick={(event) => {}}>Text</Button>
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fre*_*888 296

VSCode Typescript 扩展

确保您使用正确的打字稿版本。Typescript 扩展可以使用自己的版本，而不是使用在 package.json 中设置的项目的 Typescript 版本

解决方案

图形化解决方案

在 VS Code 中打开 JavaScript 或 TypeScript 文件。
在 VS Code 命令面板（默认快捷键是 F1 或 Ctrl+P）中，运行 TypeScript: 选择 TypeScript 版本命令。
确保您已Use workspace version选择

如果没有Use workspace version选项请确保typescript您的依赖项中有package.json并且您已使用npm install或安装了依赖项npm clean-install
如果您仍然没有它 - 添加typescript.enablePromptUseWorkspaceTsdk: true到.vscode/settings.json或查找设置Enable Prompt Use Workspace Tsdk并启用它

JSON解决方案

更新您的 vscode 配置./.vscode/settings.json（如果没有，请创建它）

{
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

Run Code Online (Sandbox Code Playgroud)

其他可能的解决方案

更新 npm 版本
如果您使用 nvm -nvm install --latest-npm
更新nodejs版本
如果您目前无法将nodejs更新到最新版本，您可以将其至少更新到最新的次要+路径版本（x.latest.latest）以免发生重大更改
删除node_modules并npm install
如果您的项目由文件夹分隔并且位于其中，您将无法在 vscode 中选择 typescript 版本。在这种情况下，打开新的 vscode 并直接进入包含 package.json 的文件夹。（/sf/users/367263221/）

非常好，但只有当 package.json 位于 vscode 中的顶层时，这才有效 - 如果您的项目由文件夹分隔并且位于其中，您将无法在 vscode 中选择打字稿版本。在这种情况下，打开新的 vscode 并直接进入包含 package.json 的文件夹 (2认同)

Answer 2

小智 18

我自己在next js 13中使用chakra-ui组件时也遇到了同样的问题。

下一个 js 版本13附带 typescript 版本5.0.2。我已将文件中的 typescript 版本更改为 4.9.5 package.json，并在删除文件后重新安装了 npm 包package-lock.json。这个问题得到了解决，我用打字稿编译器命令进行了测试

npx tsc --noEmit
Run Code Online (Sandbox Code Playgroud)