تايب سكريبت - كيف تصلح "التعبير ينتج نوع اتحاد معقد جدًا ليتم تمثيله. ts(2590)"؟

أحاول استخدام الزر من مكتبة @chakra-ui/react npm لكن عنصر الزر يسبب هذا الخطأ:

TypeScript: التعبير ينتج نوع اتحاد معقد جدًا لتمثيله. ts(2590) مثال:

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

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

الإجابة رقم 1

امتداد TypeScript لـ VSCode

تأكد من أنك تستخدم إصدار تايب سكريبت الصحيح. يمكن لمُلحق تايب سكريبت استخدام إصداره الخاص بدلاً من استخدام إصدار تايب سكريبت لمشروعك الموجود في package.json

حلول

حل واجهة المستخدم الرسومية

1. افتح ملف جافا سكريبت أو تايب سكريبت في في إس كود.
2. في قائمة أوامر VS Code (F1 أو Ctrl+P هو الاختصار الافتراضي)، قم بتشغيل الأمر TypeScript: Select TypeScript version.
3. تأكد من أنك قد اخترت استخدام نسخة مساحة العمل

إذا لم يكن هناك خيار 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"
}

توصية

إعداد امتداد تايب سكريبت ليطلب منك ما إذا كنت تريد استخدام إصدار مساحة العمل
ابحث عن الإعداد 'Typescript: Enable Prompt Use Workspace Tsdk' في إعدادات VsCode وقم بتمكينه

في المرة القادمة التي تفتح فيها مساحة عملك في VsCode سترى هذا الإشعار: أنت تريد النقر على "سماح" :)

حلول أخرى محتملة

1. تحديث إصدار npm
   إذا كنت تستخدم nvm - nvm install --latest-npm
2. تحديث إصدار Node.js
   إذا لم تتمكن من تحديث Node.js في الوقت الحالي إلى الإصدار الأحدث، يمكنك تحديثه على الأقل إلى أحدث إصدار فرعي + مسار (x.latest.latest) لتجنب تغييرات قد تكسر التوافق
3. احذف node_modules و npm install
4. إذا كان لديك مشروع مفصول في مجلدات وكان موجودًا داخلها، فلن تتمكن من اختيار إصدار TypeScript في VSCode. في هذه الحالة، افتح VSCode جديد واذهب مباشرة إلى مجلدك الذي يحتوي على package.json. (https://stackoverflow.com/users/5246617/pavol-travnik)

الإجابة رقم 2

واجهت نفس المشكلة أيضًا عند استخدام مكونات chakra-ui في next js 13.

كانت نسخة Next js القادمة 13 تأتي مع نسخة TypeScript 5.0.2. لقد قمت بتغيير نسخة TypeScript إلى 4.9.5 في ملف package.json وأعدت تثبيت حزم npm بعد حذف ملف package-lock.json. تم حل هذه المشكلة وقمت بالاختبار باستخدام أمر مترجم TypeScript

npx tsc --noEmit

الإجابة رقم 3

أعتقد أن المشكلة تتعلق بإعداد بيئة NX. أظن أنك اخترت خيار "العاطفة" عند إعداد تطبيق NX (لقد فعلت نفس الشيء أيضًا).

يمكنني تأكيد أن المشكلة قد تم حلها عن طريق إزالة "jsxImportSource": "@emotion/react" من tsconfig.json. لا حاجة لأي خطوات إضافية.

استخدام "typescript": "5.0.4" و "@chakra-ui/react": "2.6.0". كل شيء على ما يرام.

تعديل: إذا كنت تستخدم Emotion.js في كودك، يجب عليك مع ذلك إزالة jsxImportSource من ملف tsconfig.json، ولكن أضف أنواعها مباشرة:

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

قد تحتاج إلى مسح الكاش (إزالة node-modules و yarn.lock ومجلد البناء ...) لتصبح التغييرات فعّالة.

الإجابة رقم 4

تغيير إصدار TypeScript إلى "typescript": "^4.9.5" في package.json وتشغيل yarn/npm install ساعدني على حل المشكلة.

الإجابة رقم 5

انتقل إلى الشريط السفلي في VSCode واختر إصدار TypeScript الذي يتطابق مع ملف package.json الخاص بك:

في إس كود

سيكون من الأفضل إذا كانت نسخة TS التي يستخدمها vscode أعلى من نسخة الـ namespace الحالية (في مشروعك)