在Vite+TypeScript项目中导入组件时会报找不到模块的声明文件

在使用Vite创建Vue3项目时,遇到找不到模块"@/components/***.vue"的错误。解决方法包括在src下的vite-env.d.ts文件中添加特定代码,或者如果文件不存在,则在根目录创建env.d.ts或者vite-env.d.ts文件并追加相应代码,从而完美解决此类模块导入问题。

TypeScript 复制代码
/// <reference types="vite/client" />

declare module "*.vue" {
	import type { DefineComponent } from "vue";
	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
	const component: DefineComponent<{}, {}, any>;
	export default component;
}
  • declare module "*.vue":

    • 这表示 TypeScript 将处理所有以 .vue 结尾的文件。
    • 这种声明告诉 TypeScript 如何处理 Vue 组件文件,确保这些文件在导入时具有适当的类型信息。
  • import type { DefineComponent } from "vue";:

    • vue 包中导入 DefineComponent 类型。这是 Vue 3 的一个类型,用于定义 Vue 组件的类型。
  • const component: DefineComponent<{}, {}, any>;:

    • 声明一个名为 component 的常量,它是一个 DefineComponent 类型。
    • DefineComponent<{}, {}, any> 表示组件的类型:
      • 第一个 {} 表示组件的 props 类型。
      • 第二个 {} 表示组件的 data 类型。
      • any 表示组件的 methodscomputed 类型。
    • 这可以适用于大多数简单的 Vue 组件,但对于更复杂的组件,可能需要更详细的类型定义。
  • export default component;:

    • 导出 component 作为默认导出。这使得 TypeScript 知道你可以从 Vue 组件文件中默认导出一个组件。

这段代码的主要作用是:

  • 类型安全:在 TypeScript 项目中,通过声明 Vue 组件模块的类型,使得在导入 Vue 组件时可以获得类型提示和类型检查。
  • 自动推断 :当你在 TypeScript 中使用 .vue 文件时,TypeScript 会自动知道这些文件是 Vue 组件,并应用适当的类型定义。
相关推荐
小桥风满袖12 小时前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
城中的雾12 小时前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
Mintopia12 小时前
Next 全栈之 API 测试:Supertest 与 MSW 双雄记 🥷⚔️
前端·javascript·next.js
鹏多多13 小时前
纯前端人脸识别利器:face-api.js手把手深入解析教学
前端·javascript·人工智能
江城开朗的豌豆13 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆14 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing14 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js