vue3 + TS:找不到模块“@/views/xxx.vue”或其相应的类型声明,ts语法报错

本文讲述了在Vue3项目中遇到的TypeScript语法错误问题,通过在src目录下创建env.d.ts文件并引入特定导入类型,解决了代码美观性问题并提供了解决方案。

今天在项目开发中遇到一个 vue3 + Ts 的一个问题,项目运行没问题,但就是代码报ts语法错误,看着比较碍眼,如下:
在这里插入图片描述
解决办法:

  • 在src目录下创建env.d.ts文件,加入以下代码即可
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: ComponentOptions | ComponentOptions["setup"];
  export default component;
}
index.ts:14 GET http://localhost:7074/src/views/Login/index.vue?t=1760672839773 net::ERR_ABORTED 500 (Internal Server Error) component @ index.ts:14 extractComponentsGuards @ vue-router.js?v=b440da22:875 (匿名) @ vue-router.js?v=b440da22:2603 Promise.then navigate @ vue-router.js?v=b440da22:2601 pushWithRedirect @ vue-router.js?v=b440da22:2544 push @ vue-router.js?v=b440da22:2497 install @ vue-router.js?v=b440da22:2744 use @ vue.runtime.esm-bundler-SgsZfz_U.js?v=f7f02b36:4247 (匿名) @ main.ts:9 main.ts:9 [Vue Router warn]: uncaught error during route navigation: warn$1 @ vue-router.js?v=b440da22:166 triggerError @ vue-router.js?v=b440da22:2685 (匿名) @ vue-router.js?v=b440da22:2544 Promise.catch pushWithRedirect @ vue-router.js?v=b440da22:2544 push @ vue-router.js?v=b440da22:2497 install @ vue-router.js?v=b440da22:2744 use @ vue.runtime.esm-bundler-SgsZfz_U.js?v=f7f02b36:4247 (匿名) @ main.ts:9 main.ts:9 TypeError: Failed to fetch dynamically imported module: http://localhost:7074/src/views/Login/index.vue?t=1760672839773 triggerError @ vue-router.js?v=b440da22:2686 (匿名) @ vue-router.js?v=b440da22:2544 Promise.catch pushWithRedirect @ vue-router.js?v=b440da22:2544 push @ vue-router.js?v=b440da22:2497 install @ vue-router.js?v=b440da22:2744 use @ vue.runtime.esm-bundler-SgsZfz_U.js?v=f7f02b36:4247 (匿名) @ main.ts:9 main.ts:9 [Vue Router warn]: Unexpected error when starting the router: TypeError: Failed to fetch dynamically imported module: http://localhost:7074/src/views/Login/index.vue?t=1760672839773
10-18
npm run build:dev > HealthKitRunningGroupPortal@6.17.302 build:dev > vue-tsc --noEmit && vite build --mode dev && node --experimental-json-modules script/package.js development src/views/Dashboard/DataFolders/dashboardCard.vue:4:21 - error TS2304: Cannot find name &#39;PropType&#39;. 4 type: String as PropType<string>, ~~~~~~~~ src/components/FourMonthUh.vue:3:24 - error TS2307: Cannot find module &#39;@/views/components/echartsBox.vue&#39; or its corresponding type declarations. 3 import DIALOG from "@/views/components/echartsBox.vue"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:4:32 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 4 import { getI18nMsg } from &#39;@/locales/tool&#39; ~~~~~~~~~~~~~~~~ src/components/RestHeartRate.vue:4:28 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 4 import { getI18nMsg } from &#39;@/locales/tool&#39; ~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:5:24 - error TS2307: Cannot find module &#39;@/views/components/echartsBox.vue&#39; or its corresponding type declarations. 5 import DIALOG from "@/views/components/echartsBox.vue"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:4:32 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 4 import { getI18nMsg } from &#39;@/locales/tool&#39; ~~~~~~~~~~~~~~~~ src/components/RestHeartRate.vue:6:18 - error TS2307: Cannot find module &#39;@/i18n&#39; or its corresponding type declarations. 6 import i18n from &#39;@/i18n&#39;; ~~~~~~~~ src/views/Dashboard/DataFolders/achievementPrediction.vue:5:17 - error TS2339: Property &#39;km&#39; does not exist on type &#39;never&#39;. 5 {{ item.km }} ~~ src/views/Dashboard/DataFolders/achievementPrediction.vue:8:34 - error TS2339: Property &#39;time&#39; does not exist on type &#39;never&#39;. 8 <div class="hours">{{ item.time }}</div> ~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:12:24 - error TS2691: An import path cannot end with a &#39;.ts&#39; extension. Consider importing &#39;../../../../src/utils/myUseApi.js&#39; instead. 12 import { useApi } from "../../../../src/utils/myUseApi.ts"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:9:44 - error TS2339: Property &#39;date&#39; does not exist on type &#39;never&#39;. 9 <div class="dayTime">{{ record.date }}</div> ~~~~ src/views/Dashboard/DataFolders/achievementPrediction.vue:9:36 - error TS2339: Property &#39;second&#39; does not exist on type &#39;never&#39;. 9 <div class="seconds">{{ item.second }}</div> ~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:10:45 - error TS2339: Property &#39;time&#39; does not exist on type &#39;never&#39;. 10 <div class="hourTime">{{ record.time }}</div> ~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:15:29 - error TS2339: Property &#39;split&#39; does not exist on type &#39;never&#39;. 15 return dateRange.value[0].split("-").join("") - 0; ~~~~~ src/components/Tabs.vue:17:28 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 17 import { getI18nMsg } from &#39;@/locales/tool&#39; ~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:18:29 - error TS2339: Property &#39;split&#39; does not exist on type &#39;never&#39;. 18 return dateRange.value[1].split("-").join("") - 0; ~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:14:51 - error TS2339: Property &#39;distance&#39; does not exist on type &#39;never&#39;. 14 <div class="itemsData runAll">{{ record.distance }}<span class="unit">公里</span></div> ~~~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:15:52 - error TS2339: Property &#39;duration&#39; does not exist on type &#39;never&#39;. 15 <div class="itemsData useTime">{{ record.duration }}</div> ~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:26:24 - error TS2691: An import path cannot end with a &#39;.ts&#39; extension. Consider importing &#39;../../../../src/utils/myUseApi.js&#39; instead. 26 import { useApi } from "../../../../src/utils/myUseApi.ts"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:16:44 - error TS2339: Property &#39;pace&#39; does not exist on type &#39;never&#39;. 16 <div class="itemsData">{{ record.pace }}<span class="unit">/公里</span></div> ~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:34:5 - error TS2322: Type &#39;string&#39; is not assignable to type &#39;never&#39;. 34 start.toISOString().split("T")[0], ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:35:5 - error TS2322: Type &#39;string&#39; is not assignable to type &#39;never&#39;. 35 end.toISOString().split("T")[0], ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/restingHeartRateChart.vue:36:17 - error TS2503: Cannot find namespace &#39;EchartsBox&#39;. 36 const option: EchartsBox.EchartsOption = { ~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:39:29 - error TS2339: Property &#39;split&#39; does not exist on type &#39;never&#39;. 39 return dateRange.value[0].split("-").join("") - 0; ~~~~~ src/components/Tabs.vue:33:22 - error TS7006: Parameter &#39;e&#39; implicitly has an &#39;any&#39; type. 33 const handleClick = (e) => { ~ src/views/Dashboard/DataFolders/insleepChart.vue:42:29 - error TS2339: Property &#39;split&#39; does not exist on type &#39;never&#39;. 42 return dateRange.value[1].split("-").join("") - 0; ~~~~~ src/views/Dashboard/DataFolders/restingHeartRateChart.vue:47:28 - error TS7006: Parameter &#39;params&#39; implicitly has an &#39;any&#39; type. 47 formatter: function (params) { ~~~~~~ src/views/Activities/components/ActivitiesStatistics/components/sportStatistics.vue:37:30 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 37 import { getI18nMsg } from &#39;@/locales/tool&#39;; ~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:64:14 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 64 if (!stackInfo[stackName]) { ~~~~~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:65:13 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 65 stackInfo[stackName] = { ~~~~~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:70:22 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 70 const info = stackInfo[stackName]; ~~~~~~~~~~~~~~~~~~~~ src/views/Activities/components/ActivitiesSelect.vue:54:28 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 54 import { getI18nMsg } from &#39;@/locales/tool&#39; ~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:71:15 - error TS2322: Type &#39;number&#39; is not assignable to type &#39;string&#39;. 71 const data: string = series[j].data[i]; ~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:62:17 - error TS2503: Cannot find namespace &#39;EchartsBox&#39;. 62 const option: EchartsBox.EchartsOption = { ~~~~~~~~~~ src/views/login/Login.vue:68:22 - error TS2307: Cannot find module &#39;@/utils/request&#39; or its corresponding type declarations. 68 import { http } from &#39;@/utils/request&#39; ~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:70:20 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 70 if (!stackInfo[stackName]) { ~~~~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:71:19 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 71 stackInfo[stackName] = { ~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/futurePlans.vue:66:24 - error TS18047: &#39;todayInfo.value&#39; is possibly &#39;null&#39;. 66 if (item.weekday === todayInfo.value.weekday) { ~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:82:22 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 82 const info = stackInfo[series[i].stack]; ~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:76:28 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 76 const info = stackInfo[stackName]; ~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:82:17 - error TS2503: Cannot find namespace &#39;EchartsBox&#39;. 82 const option: EchartsBox.EchartsOption = { ~~~~~~~~~~ src/components/FourMonthUh.vue:88:9 - error TS2322: Type &#39;{ value: number; itemStyle: { color: string; borderRadius: number[]; }; }&#39; is not assignable to type &#39;number&#39;. 88 data[j] = { ~~~~~~~ src/components/SportRecords.vue:88:22 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{}&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;{}&#39;. 88 const info = stackInfo[series[i].stack]; ~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Activities/components/ActivitiesTable.vue:87:28 - error TS2307: Cannot find module &#39;@/locales/tool&#39; or its corresponding type declarations. 87 import { getI18nMsg } from &#39;@/locales/tool&#39; ~~~~~~~~~~~~~~~~ src/views/login/Login.vue:109:22 - error TS2339: Property &#39;getContext&#39; does not exist on type &#39;never&#39;. 109 const ctx = canvas.getContext(&#39;2d&#39;) ~~~~~~~~~~ src/views/login/Login.vue:111:30 - error TS2339: Property &#39;width&#39; does not exist on type &#39;never&#39;. 111 ctx.clearRect(0, 0, canvas.width, canvas.height) ~~~~~ src/views/login/Login.vue:111:44 - error TS2339: Property &#39;height&#39; does not exist on type &#39;never&#39;. 111 ctx.clearRect(0, 0, canvas.width, canvas.height) ~~~~~~ src/views/login/Login.vue:118:29 - error TS2339: Property &#39;width&#39; does not exist on type &#39;never&#39;. 118 ctx.fillRect(0, 0, canvas.width, canvas.height) ~~~~~ src/views/login/Login.vue:118:43 - error TS2339: Property &#39;height&#39; does not exist on type &#39;never&#39;. 118 ctx.fillRect(0, 0, canvas.width, canvas.height) ~~~~~~ src/views/login/Login.vue:124:39 - error TS2339: Property &#39;width&#39; does not exist on type &#39;never&#39;. 124 ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~ src/views/login/Login.vue:124:69 - error TS2339: Property &#39;height&#39; does not exist on type &#39;never&#39;. 124 ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~~ src/views/login/Login.vue:125:39 - error TS2339: Property &#39;width&#39; does not exist on type &#39;never&#39;. 125 ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~ src/views/login/Login.vue:125:69 - error TS2339: Property &#39;height&#39; does not exist on type &#39;never&#39;. 125 ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~~ src/views/Activities/components/ActivitiesStatistics/components/sportStatistics.vue:108:79 - error TS2366: Function lacks ending return statement and return type does not include &#39;undefined&#39;. 108 const whichRowList = (whichRow: &#39;firstRow&#39; | &#39;secondRow&#39;, dataList: any[]): any[] => { ~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:157:23 - error TS7006: Parameter &#39;date&#39; implicitly has an &#39;any&#39; type. 157 const handleChange = (date) => { ~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:158:22 - error TS2322: Type &#39;any&#39; is not assignable to type &#39;never&#39;. 158 dateRange.value = [date[0].replace(/\//g, "-"), date[1].replace(/\//g, "-")]; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:158:51 - error TS2322: Type &#39;any&#39; is not assignable to type &#39;never&#39;. 158 dateRange.value = [date[0].replace(/\//g, "-"), date[1].replace(/\//g, "-")]; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/login/Login.vue:145:44 - error TS2339: Property &#39;validate&#39; does not exist on type &#39;never&#39;. 145 const valid = await loginFormRef.value.validate() ~~~~~~~~ src/views/login/Login.vue:160:21 - error TS18046: &#39;error&#39; is of type &#39;unknown&#39;. 160 ElMessage.error(error.message || &#39;登录失败,请重试&#39;) ~~~~~ src/views/Activities/components/ActivitiesTable.vue:164:21 - error TS7006: Parameter &#39;index&#39; implicitly has an &#39;any&#39; type. 164 const deleteData = (index) => { ~~~~~ src/components/RestHeartRate.vue:151:47 - error TS7006: Parameter &#39;value&#39; implicitly has an &#39;any&#39; type. 151 valueFormatter: function (value) { ~~~~~ src/views/Activities/components/ActivitiesTable.vue:173:18 - error TS7006: Parameter &#39;index&#39; implicitly has an &#39;any&#39; type. 173 const addData = (index) => { ~~~~~ src/components/RestHeartRate.vue:173:47 - error TS7006: Parameter &#39;value&#39; implicitly has an &#39;any&#39; type. 173 valueFormatter: function (value) { ~~~~~ src/i18n.ts:1:10 - error TS2305: Module &#39;"vue-i18n"&#39; has no exported member &#39;createI18n&#39;. 1 import { createI18n } from "vue-i18n"; ~~~~~~~~~~ src/locales/en.ts:1:19 - error TS2307: Cannot find module &#39;@/resources/en/en-US.json&#39; or its corresponding type declarations. 1 import en_US from &#39;@/resources/en/en-US.json&#39; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/main.ts:10:18 - error TS2307: Cannot find module &#39;@/i18n&#39; or its corresponding type declarations. 10 import i18n from "@/i18n"; ~~~~~~~~ src/main.ts:12:31 - error TS2307: Cannot find module &#39;@/utils/el-icons&#39; or its corresponding type declarations. 12 import setupElementIcons from "@/utils/el-icons"; ~~~~~~~~~~~~~~~~~~ src/main.ts:13:17 - error TS2307: Cannot find module &#39;@/App.vue&#39; or its corresponding type declarations. 13 import App from "@/App.vue"; ~~~~~~~~~~~ src/utils/el-icons.ts:6:24 - error TS7053: Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;typeof import("C:/Users/x60102926/Desktop/jinbiao/HealthDeveloper/HealthKitRunningGroupPortal/node_modules/@element-plus/icons-vue/dist/types/index")&#39;. No index signature with a parameter of type &#39;string&#39; was found on type &#39;typeof import("C:/Users/x60102926/Desktop/jinbiao/HealthDeveloper/HealthKitRunningGroupPortal/node_modules/@element-plus/icons-vue/dist/types/index")&#39;. 6 app.component(key, Icons[key]) ~~~~~~~~~~ Found 69 errors in 19 files. Errors Files 1 src/views/Dashboard/DataFolders/dashboardCard.vue:4 8 src/components/FourMonthUh.vue:3 6 src/components/SportRecords.vue:4 4 src/components/RestHeartRate.vue:4 3 src/views/Dashboard/DataFolders/achievementPrediction.vue:5 4 src/views/Dashboard/DataFolders/trainingIndexChart.vue:12 5 src/views/Dashboard/DataFolders/personalRunningData.vue:9 2 src/components/Tabs.vue:17 9 src/views/Dashboard/DataFolders/insleepChart.vue:26 2 src/views/Dashboard/DataFolders/restingHeartRateChart.vue:36 2 src/views/Activities/components/ActivitiesStatistics/components/sportStatistics.vue:37 1 src/views/Activities/components/ActivitiesSelect.vue:54 12 src/views/login/Login.vue:68 1 src/views/Dashboard/DataFolders/futurePlans.vue:66 3 src/views/Activities/components/ActivitiesTable.vue:87 1 src/i18n.ts:1 1 src/locales/en.ts:1 3 src/main.ts:10 1 src/utils/el-icons.ts:6
最新发布
10-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值