تايب سكريبت - لا يمكن العثور على الوحدة ... أو إعلانات النوع المقابلة لها

لقد أنشأت مشروعًا جديدًا باستخدام create-react-app و yarn 2 في VS Code. يرمِّ المحرر أخطاءً أثناء استيراد كل مكتبة مثبتة على هذا النحو:

لا يمكن العثور على الوحدة 'react' أو إعلانات النوع المقابلة لها.

المشروع يتم تجميعه وتشغيله بنجاح ولكن الأخطاء ما زالت موجودة. عندما أغير امتداد الملف إلى .js و .jsx من .ts و .tsx، تختفي الأخطاء. كيف يجب أن أحل هذه المشكلة لملفات TypeScript؟

الإجابة رقم 1

ربما مجرد إعادة تشغيل خادم TS يمكن أن تنجح.

استخدام VsCode:

ويندوز:

النوع: ctrl+Shift + P أو ctrl+Shift + F5

اختر: > TypeScript: إعادة تشغيل خادم TS

ماك بوك:

اكتب: ⇧ + ⌘ + P أو F1

اختر: > TypeScript: إعادة تشغيل خادم TS

ربما يكون مجرد خطأ في الملف، تحقق مما إذا كنت قد غيرت الملف عن طريق الخطأ من .ts إلى .tsx أو من .tsx إلى .ts

الإجابة رقم 2

تحتاج إلى تثبيت أنماط للمكتبات التي تقوم بتثبيتها. بشكل عام، يجب أن تفعل ما يلي:

npm install @types/libName // e.g. npm install @types/react-leaflet

أحيانًا لا تكون هناك أنواع متوفرة في مستودع DefinitelyTyped وتواجه npm ERR! 404 Not Found: @types/my-untyped-module@latest. يمكنك القيام بعدة أشياء في هذه الحالة:

1- أنشئ ملف decs.d.ts في جذر مشروعك واكتب فيه:

    declare module "libName" // e.g declare module 'react-leaflet'

2- أو ببساطة تجاهل الخطأ باستخدام @ts-ignore:

// @ts-ignore  
import Map from 'react-leaflet'

3- أو يمكنك أن تقدم لنفسك وللآخرين خدمة وتضيف أنواع المكتبة في مستودع DefinitelyTyped.

إذا لم ينجح ذلك بعد، أوصي أولاً بأن تستخدم نسخة حديثة من Typescript. إذا فعلت ذلك، فقم بإغلاق محرر الأكواد الخاص بك، احذف مجلد node_modules وأعد تثبيت التبعيات مرة أخرى (npm install أو yarn install) وتحقق مرة أخرى.

الإجابة رقم 3

لقد حصلت على نفس رسالة الخطأ، وتعلق أيضًا بالاستيرادات.

في حالتي، تسبب المشكلة في استيراد ملف PNG لاستخدامه في ملف SVG:

import logo from 'url:../../public/img/logo.png';

الرسالة التي تلقيتها كانت:

Cannot find module 'url:../..public/img/logo.png' or its corresponding type declarations.

الحل:

في جذر المشروع يوجد ملف css.d.ts. يجب إعلان وحدة للنماذج المختلفة للرسومات (الأنواع) التي يتم استيرادها. (ملاحظة: ليس لأنواع الرسومات التي تُستخدم أو يُشار إليها في المشروع، ولكن لتلك التي يتم استيرادها )

إليك ملف css.d.ts الكامل لهذا المشروع:

declare module '*.scss' {
  const css: { [key: string]: string };
  export default css;
}
declare module '*.sass' {
  const css: { [key: string]: string };
  export default css;
}
declare module 'react-markup';
declare module '*.webp';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';

الإجابة رقم 4

حالي:

myFolder موجودة تحت مجلد src

أرى نفس الخطأ في هذا السطر:

import { GlobalStyle } from "myFolder";

الإجابات الأخرى لا تعمل.

أنا ببساطة أضيف baseUrl إلى tsconfig.json بعد compilerOptions:

{
  "compilerOptions": {
    "baseUrl": "src/",
//other config...
  },
  "include": [
    "src"
  ]
}

تم حل المشكلة!

مرجع: https://www.typescriptlang.org/tsconfig#baseUrl