TypeScript/TS 错误:用 class 定义对象时 Property ‘***‘ does not exist on type ‘***‘.

我们在使用 class 定一个类时,直接给类实例添加属性会报一个 TS 的错误:

class RegExpPiece {
  constructor() {
    this.email = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  }
}

比如上面,this.email 会报错:

💥 Property 'email' does not exist on type 'RegExpPiece'.

因此,我们需要加上类型定义:

class RegExpPiece {
  email: RegExp; // 添加类型定义
  
  constructor() {
    this.email = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  }
}

这样就避免了报错。

Reference

[1] https://stackoverflow.com/questions/41315930/class-declaration-property-does-not-exist-on-type-in-typescript

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 'PropType'. 4 type: String as PropType<string>, ~~~~~~~~ src/components/FourMonthUh.vue:3:24 - error TS2307: Cannot find module '@/views/components/echartsBox.vue' or its corresponding type declarations. 3 import DIALOG from "@/views/components/echartsBox.vue"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:4:32 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 4 import { getI18nMsg } from '@/locales/tool' ~~~~~~~~~~~~~~~~ src/components/RestHeartRate.vue:4:28 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 4 import { getI18nMsg } from '@/locales/tool' ~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:5:24 - error TS2307: Cannot find module '@/views/components/echartsBox.vue' or its corresponding type declarations. 5 import DIALOG from "@/views/components/echartsBox.vue"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:4:32 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 4 import { getI18nMsg } from '@/locales/tool' ~~~~~~~~~~~~~~~~ src/components/RestHeartRate.vue:6:18 - error TS2307: Cannot find module '@/i18n' or its corresponding type declarations. 6 import i18n from '@/i18n'; ~~~~~~~~ src/views/Dashboard/DataFolders/achievementPrediction.vue:5:17 - error TS2339: Property 'km' does not exist on type 'never'. 5 {{ item.km }} ~~ src/views/Dashboard/DataFolders/achievementPrediction.vue:8:34 - error TS2339: Property 'time' does not exist on type 'never'. 8 <div class="hours">{{ item.time }}</div> ~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:12:24 - error TS2691: An import path cannot end with a '.ts' extension. Consider importing '../../../../src/utils/myUseApi.js' instead. 12 import { useApi } from "../../../../src/utils/myUseApi.ts"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:9:44 - error TS2339: Property 'date' does not exist on type 'never'. 9 <div class="dayTime">{{ record.date }}</div> ~~~~ src/views/Dashboard/DataFolders/achievementPrediction.vue:9:36 - error TS2339: Property 'second' does not exist on type 'never'. 9 <div class="seconds">{{ item.second }}</div> ~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:10:45 - error TS2339: Property 'time' does not exist on type 'never'. 10 <div class="hourTime">{{ record.time }}</div> ~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:15:29 - error TS2339: Property 'split' does not exist on type 'never'. 15 return dateRange.value[0].split("-").join("") - 0; ~~~~~ src/components/Tabs.vue:17:28 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 17 import { getI18nMsg } from '@/locales/tool' ~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:18:29 - error TS2339: Property 'split' does not exist on type 'never'. 18 return dateRange.value[1].split("-").join("") - 0; ~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:14:51 - error TS2339: Property 'distance' does not exist on type 'never'. 14 <div class="itemsData runAll">{{ record.distance }}<span class="unit">公里</span></div> ~~~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:15:52 - error TS2339: Property 'duration' does not exist on type 'never'. 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 '.ts' extension. Consider importing '../../../../src/utils/myUseApi.js' instead. 26 import { useApi } from "../../../../src/utils/myUseApi.ts"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/personalRunningData.vue:16:44 - error TS2339: Property 'pace' does not exist on type 'never'. 16 <div class="itemsData">{{ record.pace }}<span class="unit">/公里</span></div> ~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:34:5 - error TS2322: Type 'string' is not assignable to type 'never'. 34 start.toISOString().split("T")[0], ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:35:5 - error TS2322: Type 'string' is not assignable to type 'never'. 35 end.toISOString().split("T")[0], ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/restingHeartRateChart.vue:36:17 - error TS2503: Cannot find namespace 'EchartsBox'. 36 const option: EchartsBox.EchartsOption = { ~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:39:29 - error TS2339: Property 'split' does not exist on type 'never'. 39 return dateRange.value[0].split("-").join("") - 0; ~~~~~ src/components/Tabs.vue:33:22 - error TS7006: Parameter 'e' implicitly has an 'any' type. 33 const handleClick = (e) => { ~ src/views/Dashboard/DataFolders/insleepChart.vue:42:29 - error TS2339: Property 'split' does not exist on type 'never'. 42 return dateRange.value[1].split("-").join("") - 0; ~~~~~ src/views/Dashboard/DataFolders/restingHeartRateChart.vue:47:28 - error TS7006: Parameter 'params' implicitly has an 'any' type. 47 formatter: function (params) { ~~~~~~ src/views/Activities/components/ActivitiesStatistics/components/sportStatistics.vue:37:30 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 37 import { getI18nMsg } from '@/locales/tool'; ~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:64:14 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 64 if (!stackInfo[stackName]) { ~~~~~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:65:13 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 65 stackInfo[stackName] = { ~~~~~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:70:22 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 70 const info = stackInfo[stackName]; ~~~~~~~~~~~~~~~~~~~~ src/views/Activities/components/ActivitiesSelect.vue:54:28 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 54 import { getI18nMsg } from '@/locales/tool' ~~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:71:15 - error TS2322: Type 'number' is not assignable to type 'string'. 71 const data: string = series[j].data[i]; ~~~~ src/views/Dashboard/DataFolders/trainingIndexChart.vue:62:17 - error TS2503: Cannot find namespace 'EchartsBox'. 62 const option: EchartsBox.EchartsOption = { ~~~~~~~~~~ src/views/login/Login.vue:68:22 - error TS2307: Cannot find module '@/utils/request' or its corresponding type declarations. 68 import { http } from '@/utils/request' ~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:70:20 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 70 if (!stackInfo[stackName]) { ~~~~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:71:19 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 71 stackInfo[stackName] = { ~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/futurePlans.vue:66:24 - error TS18047: 'todayInfo.value' is possibly 'null'. 66 if (item.weekday === todayInfo.value.weekday) { ~~~~~~~~~~~~~~~ src/components/FourMonthUh.vue:82:22 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 82 const info = stackInfo[series[i].stack]; ~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/SportRecords.vue:76:28 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 76 const info = stackInfo[stackName]; ~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:82:17 - error TS2503: Cannot find namespace 'EchartsBox'. 82 const option: EchartsBox.EchartsOption = { ~~~~~~~~~~ src/components/FourMonthUh.vue:88:9 - error TS2322: Type '{ value: number; itemStyle: { color: string; borderRadius: number[]; }; }' is not assignable to type 'number'. 88 data[j] = { ~~~~~~~ src/components/SportRecords.vue:88:22 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. 88 const info = stackInfo[series[i].stack]; ~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Activities/components/ActivitiesTable.vue:87:28 - error TS2307: Cannot find module '@/locales/tool' or its corresponding type declarations. 87 import { getI18nMsg } from '@/locales/tool' ~~~~~~~~~~~~~~~~ src/views/login/Login.vue:109:22 - error TS2339: Property 'getContext' does not exist on type 'never'. 109 const ctx = canvas.getContext('2d') ~~~~~~~~~~ src/views/login/Login.vue:111:30 - error TS2339: Property 'width' does not exist on type 'never'. 111 ctx.clearRect(0, 0, canvas.width, canvas.height) ~~~~~ src/views/login/Login.vue:111:44 - error TS2339: Property 'height' does not exist on type 'never'. 111 ctx.clearRect(0, 0, canvas.width, canvas.height) ~~~~~~ src/views/login/Login.vue:118:29 - error TS2339: Property 'width' does not exist on type 'never'. 118 ctx.fillRect(0, 0, canvas.width, canvas.height) ~~~~~ src/views/login/Login.vue:118:43 - error TS2339: Property 'height' does not exist on type 'never'. 118 ctx.fillRect(0, 0, canvas.width, canvas.height) ~~~~~~ src/views/login/Login.vue:124:39 - error TS2339: Property 'width' does not exist on type 'never'. 124 ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~ src/views/login/Login.vue:124:69 - error TS2339: Property 'height' does not exist on type 'never'. 124 ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~~ src/views/login/Login.vue:125:39 - error TS2339: Property 'width' does not exist on type 'never'. 125 ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height) ~~~~~ src/views/login/Login.vue:125:69 - error TS2339: Property 'height' does not exist on type 'never'. 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 'undefined'. 108 const whichRowList = (whichRow: 'firstRow' | 'secondRow', dataList: any[]): any[] => { ~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:157:23 - error TS7006: Parameter 'date' implicitly has an 'any' type. 157 const handleChange = (date) => { ~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:158:22 - error TS2322: Type 'any' is not assignable to type 'never'. 158 dateRange.value = [date[0].replace(/\//g, "-"), date[1].replace(/\//g, "-")]; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/Dashboard/DataFolders/insleepChart.vue:158:51 - error TS2322: Type 'any' is not assignable to type 'never'. 158 dateRange.value = [date[0].replace(/\//g, "-"), date[1].replace(/\//g, "-")]; ~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/views/login/Login.vue:145:44 - error TS2339: Property 'validate' does not exist on type 'never'. 145 const valid = await loginFormRef.value.validate() ~~~~~~~~ src/views/login/Login.vue:160:21 - error TS18046: 'error' is of type 'unknown'. 160 ElMessage.error(error.message || '登录失败,请重试') ~~~~~ src/views/Activities/components/ActivitiesTable.vue:164:21 - error TS7006: Parameter 'index' implicitly has an 'any' type. 164 const deleteData = (index) => { ~~~~~ src/components/RestHeartRate.vue:151:47 - error TS7006: Parameter 'value' implicitly has an 'any' type. 151 valueFormatter: function (value) { ~~~~~ src/views/Activities/components/ActivitiesTable.vue:173:18 - error TS7006: Parameter 'index' implicitly has an 'any' type. 173 const addData = (index) => { ~~~~~ src/components/RestHeartRate.vue:173:47 - error TS7006: Parameter 'value' implicitly has an 'any' type. 173 valueFormatter: function (value) { ~~~~~ src/i18n.ts:1:10 - error TS2305: Module '"vue-i18n"' has no exported member 'createI18n'. 1 import { createI18n } from "vue-i18n"; ~~~~~~~~~~ src/locales/en.ts:1:19 - error TS2307: Cannot find module '@/resources/en/en-US.json' or its corresponding type declarations. 1 import en_US from '@/resources/en/en-US.json' ~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/main.ts:10:18 - error TS2307: Cannot find module '@/i18n' or its corresponding type declarations. 10 import i18n from "@/i18n"; ~~~~~~~~ src/main.ts:12:31 - error TS2307: Cannot find module '@/utils/el-icons' or its corresponding type declarations. 12 import setupElementIcons from "@/utils/el-icons"; ~~~~~~~~~~~~~~~~~~ src/main.ts:13:17 - error TS2307: Cannot find module '@/App.vue' or its corresponding type declarations. 13 import App from "@/App.vue"; ~~~~~~~~~~~ src/utils/el-icons.ts:6:24 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("C:/Users/x60102926/Desktop/jinbiao/HealthDeveloper/HealthKitRunningGroupPortal/node_modules/@element-plus/icons-vue/dist/types/index")'. No index signature with a parameter of type 'string' was found on type 'typeof import("C:/Users/x60102926/Desktop/jinbiao/HealthDeveloper/HealthKitRunningGroupPortal/node_modules/@element-plus/icons-vue/dist/types/index")'. 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、付费专栏及课程。

余额充值