typescript - Làm thế nào để sửa "Biểu thức tạo ra một kiểu hợp nhất quá phức tạp để đại diện. ts(2590)"?

Tôi đang cố gắng sử dụng Button từ thư viện npm @chakra-ui/react nhưng phần tử Button lại gây ra lỗi này:

TypeScript: Biểu thức tạo ra một kiểu hợp nhất quá phức tạp để biểu diễn. ts(2590) Ví dụ:

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

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

Câu trả lời #1

Phần mở rộng Typescript cho VSCode

Hãy chắc chắn rằng bạn đang sử dụng phiên bản TypeScript đúng. Phần mở rộng TypeScript có thể sử dụng phiên bản của riêng nó thay vì sử dụng phiên bản TypeScript của dự án của bạn được đặt trong package.json

Giải pháp

Giải pháp giao diện người dùng

Mở một tệp JavaScript hoặc TypeScript trong VS Code.
Trong bảng điều khiển lệnh của VS Code (F1 hoặc Ctrl+P là phím tắt mặc định), chạy lệnh TypeScript: Chọn phiên bản TypeScript.
Đảm bảo bạn đã chọn Sử dụng phiên bản của không gian làm việc

Nếu không có tùy chọn Use workspace version Hãy chắc chắn rằng bạn đã có typescript trong phần dependencies của package.json và bạn đã cài đặt các dependencies bằng cách sử dụng npm install hoặc npm clean-install
Nếu bạn vẫn chưa có, hãy thêm typescript.enablePromptUseWorkspaceTsdk: true vào .vscode/settings.json hoặc tìm cài đặt Enable Prompt Use Workspace Tsdk và bật nó lên

Giải pháp JSON

Cập nhật cấu hình vscode của bạn tại ./.vscode/settings.json (tạo nó nếu bạn chưa có)

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

Khuyến nghị

Cài đặt tiện ích mở rộng TypeScript để nhắc bạn có muốn sử dụng phiên bản workspace không
Tìm cài đặt 'TypeScript: Bật Nhắc Sử Dụng Tsdk Workspace' trong cài đặt VsCode và bật nó lên

Lần tới khi bạn mở không gian làm việc của mình trong VsCode, bạn sẽ thấy thông báo này: Bạn muốn nhấn "Cho phép" :)

Các giải pháp khác có thể

Cập nhật phiên bản npm
Nếu bạn sử dụng nvm - nvm install --latest-npm
Cập nhật phiên bản nodejs
Nếu bạn không thể cập nhật nodejs lên phiên bản mới nhất ngay bây giờ, bạn có thể cập nhật ít nhất lên phiên bản minor+path mới nhất (x.latest.latest) để tránh các thay đổi phá vỡ
Xóa node_modules và npm install
nếu bạn có dự án được tách thành các thư mục và nó nằm bên trong những thư mục đó, bạn sẽ không thể chọn phiên bản typescript trong vscode. Trong trường hợp đó, hãy mở một vscode mới và đi thẳng vào thư mục của bạn có file package.json. (https://stackoverflow.com/users/5246617/pavol-travnik)

Câu trả lời #2

Bản thân tôi cũng gặp vấn đề tương tự khi sử dụng các thành phần chakra-ui trong next js 13.

Phiên bản next js 13 đi kèm với phiên bản typescript 5.0.2. Tôi đã thay đổi phiên bản typescript thành 4.9.5 trong tệp package.json và cài đặt lại các gói npm sau khi xóa tệp package-lock.json. Vấn đề này đã được giải quyết và tôi đã thử nghiệm với lệnh biên dịch typescript

npx tsc --noEmit

Câu trả lời #3

Tôi tin rằng vấn đề liên quan đến việc thiết lập môi trường NX. Tôi đoán bạn đã chọn tùy chọn "emotion" khi thiết lập ứng dụng NX (tôi cũng đã làm tương tự).

Tôi có thể xác nhận rằng vấn đề đã được giải quyết bằng cách gỡ bỏ "jsxImportSource": "@emotion/react" khỏi tsconfig.json. Không cần thêm bước nào khác.

Sử dụng "typescript": "5.0.4" và "@chakra-ui/react": "2.6.0". Mọi thứ đều ổn.

Chỉnh sửa: Nếu bạn đang sử dụng Emotion.js trong mã của mình, bạn vẫn nên xóa jsxImportSource khỏi tệp tsconfig.json, nhưng thêm trực tiếp kiểu của nó:

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

Bạn có thể cần phải xóa bộ nhớ đệm (gỡ bỏ node-modules, yarn.lock, thư mục build ...) để các thay đổi có hiệu lực.

Câu trả lời #4

thay đổi phiên bản của typescript thành "typescript": "^4.9.5" trong package.json và chạy yarn/npm install đã giúp tôi giải quyết vấn đề.

Câu trả lời #5

Đi tới thanh dưới cùng trong VSCode và chọn phiên bản TS phù hợp với package.json của bạn :

VS Code

Sẽ tốt hơn nếu phiên bản TS mà vscode đang sử dụng cao hơn phiên bản namespace hiện tại (trong dự án của bạn)