🛠 رفع “نمی توان ماژول را پیدا کرد.”

اگر در حال ساختن یک پروژه VUE 3.5 با Vite و TypeScript هستید ، ممکن است به این خطای ناامیدکننده TypeScript بپردازید:
Cannot find module '../views/ChatView.vue' or its corresponding type declarations.

این معمولاً زمانی اتفاق می افتد که TypeScript درک نمی کند .vue پرونده ها به طور پیش فرض – اما نگران نباشید ، رفع ساده است.

در این پست ، من به شما نشان می دهم چگونه می توان آن را با افزودن یک نوع اعلامیه حل کرد برای پرونده های VUE

❓ چرا این خطا را می بینم؟

TypeScript در مورد انواع دقیق است و به طور طبیعی نمی داند که چگونه تفسیر کنید .vue اجزای تک پرونده ای. در حالی که Vite و Vue بیشتر کارها را انجام می دهند ، شما هنوز هم نیاز دارید صریحاً به Typescript بگویید نحوه رسیدگی .vue واردات

✅ FIX: اعلامیه ماژول VUE ایجاد کنید

برای حل این مسئله ، یک پرونده ویژه برای اعلام چگونگی اضافه کردن اضافه خواهید کرد .vue پرونده ها باید درمان شوند.

📄 مرحله 1: ایجاد کنید vue.d.ts پرونده

در شما src/ پوشه یا ریشه پروژه ، پرونده ای به نام: ایجاد کنید:
src/vue.d.ts

✍ مرحله 2: این کد را بچسبانید

declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}

این به TypeScript می گوید:

“هر وقت من یک پرونده .vue را وارد می کنم ، با استفاده از نوع DefineComponent ، آن را به عنوان یک مؤلفه VUE درمان کنید.”

🔁 مرحله 3: ابزارهای DEV خود را مجدداً راه اندازی کنید

🔄 سرور Vite Dev خود را مجدداً راه اندازی کنید: npm run dev

توجه: .d.ts چیست؟
.d.ts به معنای “پرونده اعلامیه” است. این شامل هیچ کد اجرایی نیست – فقط تعاریف را تایپ کنید. این به TypeScript کمک می کند تا انواع فایل مانند .vue ، .json ، .css و غیره را درک کنند که به طور پیش فرض ماژول های جاوا اسکریپت نیستند.