typescript - Bagaimana cara memperbaiki "Expression produces a union type that is too complex to represent. ts(2590)"?

Saya mencoba menggunakan Button dari @chakra-ui/react npm library tetapi elemen Button menghasilkan kesalahan ini:

TypeScript: Ekspresi menghasilkan tipe gabungan yang terlalu kompleks untuk direpresentasikan. ts(2590) Contoh:

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

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

Jawaban #1

Ekstensi Typescript VSCode

Pastikan Anda menggunakan versi TypeScript yang benar. Ekstensi TypeScript dapat menggunakan versinya sendiri alih-alih menggunakan versi TypeScript proyek Anda yang disetel di package.json

Solusi

Solusi GUI

  1. Buka file JavaScript atau TypeScript di VS Code.
  2. Di palet perintah VS Code (F1 atau Ctrl+P adalah pintasan default), jalankan perintah TypeScript: Pilih versi TypeScript.
  3. Pastikan Anda telah memilih Gunakan versi workspace

Jika tidak ada opsi Use workspace version, pastikan Anda memiliki typescript di dependencies Anda di package.json dan Anda telah menginstal dependencies Anda menggunakan npm install atau npm clean-install
Jika Anda masih tidak memilikinya - tambahkan typescript.enablePromptUseWorkspaceTsdk: true ke .vscode/settings.json atau temukan pengaturan Enable Prompt Use Workspace Tsdk dan aktifkan

Solusi JSON

Perbarui konfigurasi vscode Anda di ./.vscode/settings.json (buat jika Anda belum memilikinya)

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

Rekomendasi

Atur ekstensi typescript untuk menanyakan apakah ingin menggunakan versi workspace
Temukan pengaturan 'Typescript: Enable Prompt Use Workspace Tsdk' di pengaturan VsCode dan aktifkan

Pada saat berikutnya Anda membuka ruang kerja Anda di VsCode, Anda akan melihat notifikasi ini: Anda ingin mengklik "Izinkan" :)

Solusi Lain yang Mungkin

  1. Perbarui versi npm
    Jika Anda menggunakan nvm - nvm install --latest-npm
  2. Perbarui versi nodejs
    Jika Anda tidak dapat memperbarui nodejs ke versi terbaru saat ini, Anda dapat memperbaruinya setidaknya ke versi minor+path terbaru (x.latest.latest) agar tidak ada perubahan yang merusak
  3. Hapus node_modules dan npm install
  4. jika Anda memiliki proyek yang dipisahkan berdasarkan folder dan berada di dalamnya, Anda tidak dapat memilih versi typescript di vscode. Dalam hal ini, buka vscode baru dan pergi langsung ke folder Anda yang berisi package.json. (https://stackoverflow.com/users/5246617/pavol-travnik)

Jawaban #2

Saya juga mengalami masalah yang sama saat menggunakan komponen chakra-ui di next js 13.

Versi next js 13 datang dengan versi typescript 5.0.2. Saya telah mengubah versi typescript menjadi 4.9.5 pada file package.json dan menginstal ulang paket npm setelah menghapus file package-lock.json. Masalah ini teratasi dan saya menguji dengan perintah compiler typescript

npx tsc --noEmit

Jawaban #3

Saya percaya masalah ini terkait dengan pengaturan lingkungan NX. Saya kira Anda telah memilih opsi "emotion" saat menyiapkan aplikasi NX (saya juga melakukan hal yang sama).

Saya dapat mengonfirmasi bahwa masalah telah diselesaikan dengan menghapus "jsxImportSource": "@emotion/react" dari tsconfig.json. Tidak diperlukan langkah tambahan.

Menggunakan "typescript": "5.0.4" dan "@chakra-ui/react": "2.6.0". Semua baik.

Edit: Jika Anda menggunakan Emotion.js dalam kode Anda, Anda tetap harus menghapus jsxImportSource dari file tsconfig.json, tetapi tambahkan tipenya langsung:

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

Anda mungkin perlu menghapus cache (menghapus node-modules, yarn.lock, direktori build ...) agar perubahan berlaku.

Jawaban #4

mengubah versi typescript menjadi "typescript": "^4.9.5" di package.json dan menjalankan yarn/npm install membantu saya menyelesaikan masalah tersebut.

Jawaban #5

Pergi ke bilah bawah di VSCode dan pilih versi TS yang sesuai dengan package.json Anda :

vs kode

Akan lebih baik jika versi TS yang digunakan oleh vscode lebih tinggi daripada versi namespace saat ini (di proyek Anda)

Artikel terkait