typescript - 如何修復「Expression produces a union type that is too complex to represent. ts(2590)」?

我正在嘗試使用來自 @chakra-ui/react npm 庫的 Button，但 Button 元素產生了這個錯誤：

TypeScript：表達式產生的聯合類型過於複雜而無法表示。ts(2590) 範例：

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

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

答案＃1

VSCode TypeScript 擴充功能

確保你正在使用正確的 TypeScript 版本。TypeScript 擴展可以使用它自己的版本，而不是使用你在 package.json 中設置的專案 TypeScript 版本。

解決方案

圖形使用者介面解決方案

在 VS Code 中打開 JavaScript 或 TypeScript 檔案。
在 VS Code 的命令面板中（默認快捷鍵是 F1 或 Ctrl+P），執行 TypeScript: 選擇 TypeScript 版本命令。
確保你已選擇 使用工作區版本

如果沒有 Use workspace version 選項，請確保您的 package.json 依賴中有 typescript，並且已使用 npm install 或 npm clean-install 安裝您的依賴。
如果您仍然沒有此選項，請在 .vscode/settings.json 中添加 typescript.enablePromptUseWorkspaceTsdk: true，或找到設定 Enable Prompt Use Workspace Tsdk 並啟用它

JSON 解決方案

在 ./.vscode/settings.json 更新你的 vscode 配置（如果沒有，請創建它）

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

其他可能的解決方案

更新 npm 版本
如果你使用 nvm - nvm install --latest-npm
更新 nodejs 版本
如果您目前無法將 nodejs 更新到最新版本，您至少可以將其更新到最新的次要版本和修補版本（x.latest.latest），以避免出現破壞性更改
刪除 node_modules 並執行 npm install
如果你的專案是按資料夾分隔，並且位於這些資料夾內，你將無法在 VSCode 中選擇 TypeScript 版本。在這種情況下，打開新的 VSCode 並直接進入包含 package.json 的資料夾。(https://stackoverflow.com/users/5246617/pavol-travnik)

答案＃2

我自己在使用 chakra-ui 元件於 next js 13 時也遇到相同的問題。

下一個 Next.js 版本 13 會搭配 TypeScript 版本 5.0.2。我已經在 package.json 文件中將 TypeScript 版本改為 4.9.5，並在刪除 package-lock.json 文件後重新安裝了 npm 套件。這個問題已經解決，我使用 TypeScript 編譯器指令進行了測試。

npx tsc --noEmit

答案＃3

我相信問題與 NX 環境設置有關。我猜您在設置 NX 應用程式時選擇了「emotion」選項（我也是這樣做的）。

我可以確認，通過從 tsconfig.json 中移除 "jsxImportSource": "@emotion/react" 已經解決了該問題。不需要額外步驟。

使用 "typescript": "5.0.4" 和 "@chakra-ui/react": "2.6.0"。一切正常。

編輯：如果你在程式碼中使用 Emotion.js，你仍然應該從 tsconfig.json 文件中移除 jsxImportSource，但直接添加其類型：

{
  "compilerOptions": {
    ...,
    "types": ["@emotion/react/types/css-prop"]
  }
}

你可能需要清除快取（刪除 node-modules、yarn.lock、建置目錄等）才能讓更改生效。

答案＃4

將 package.json 中的 typescript 版本更改為 "typescript": "^4.9.5" 並運行 yarn/npm install 幫助我解決了這個問題。

答案＃5

前往 VSCode 底部工具列，選擇符合你 package.json 的 TypeScript 版本：

VS 代碼

如果 VSCode 使用的 TS 版本高於你專案中目前的命名空間版本會更好