[英]Vue 3 @typescript-eslint/no-unsafe-member-access
We recently started to upgrade from Quasar v1 to Quasar v2 (from Vue 2 to Vue 3).我们最近开始从 Quasar v1 升级到 Quasar v2(从 Vue 2 升级到 Vue 3)。
This code worked fine before:此代码之前运行良好:
// src/pages/myComponent.vue
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
props: {
appId: {
type: String,
required: true,
},
},
setup(props) {
if (!props.appId) {
console.error('No application ID provided to load the correct form')
}
},
})
</script>
But with Vue 3 we get an eslint warning:但是使用 Vue 3 我们会收到一个 eslint 警告:
WARNING in src/pages/myComponent.vue @typescript-eslint/no-unsafe-member-access: Unsafe member access.appId on an
any
value.src/pages/myComponent.vue @typescript-eslint/no-unsafe-member-access 中的警告:
any
值上的不安全成员 access.appId。
It seems like props
is always recognized as type any
even though when hovering within vscode it does show the correct types:似乎
props
总是被识别为 type any
即使当悬停在 vscode 中时它确实显示了正确的类型:
The Vue 3 recommendations have also been followed correctly. Vue 3 的建议也得到了正确的遵循。 What are we missing here?
我们在这里缺少什么?
Found the cause.找到了原因。 In our full code, when we comment out the component at the bottom, the eslint warning is gone:
在我们的完整代码中,当我们注释掉底部的组件时,eslint 警告就消失了:
<template>
<div v-if="$props.appId" class="q-pa-md">
<div class="text-h6 q-pb-md">
{{ application.name }}
</div>
<component
v-if="application.formComponentName"
:is="application.formComponentName"
/>
<h3 v-else>No form available for application id {{ $props.appId }}</h3>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useApplications } from 'src/composables/useApplications'
import { useRouter } from 'vue-router'
// import samTruckRoster from 'src/components/truckRoster.vue'
export default defineComponent({
props: {
appId: {
type: String,
required: false,
},
},
setup(props) {
const router = useRouter()
if (!props.appId) {
console.error('No application ID provided to load the correct form')
void router.push({ path: 'applications' })
return
}
const { getApplication } = useApplications()
const application = getApplication(props.appId)
return { application }
},
components: {
// samTruckRoster,
},
})
</script>
So it seems like this confuses eslint.因此,这似乎使 eslint 感到困惑。
The error disappears when you use Webpack's code-splitting feature:当您使用 Webpack 的代码拆分功能时,错误消失了:
<template>
<div v-if="$props.appId" class="q-pa-md">
<div class="text-h6 q-pb-md">
{{ application.name }}
</div>
<component
v-if="application.formComponentName"
:is="application.formComponentName"
/>
<h3 v-else>No form available for application id {{ $props.appId }}</h3>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'
import { useApplications } from 'src/composables/useApplications'
import { useRouter } from 'vue-router'
export default defineComponent({
props: {
appId: {
type: String,
required: false,
},
},
setup(props) {
const router = useRouter()
if (!props.appId) {
console.error('No application ID provided to load the correct form')
void router.push({ path: 'applications' })
return
}
const { getApplication } = useApplications()
const application = getApplication(props.appId)
return { application }
},
components: {
samTruckRoster: defineAsyncComponent(() => import('src/components/truckRoster.vue')),
},
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.