![](/img/trans.png)
[英]How to handle the @typescript-eslint/no-unsafe-member-access rule on catch(err) blocks?
[英]Vue 3 @typescript-eslint/no-unsafe-member-access
我们最近开始从 Quasar v1 升级到 Quasar v2(从 Vue 2 升级到 Vue 3)。
此代码之前运行良好:
// 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>
但是使用 Vue 3 我们会收到一个 eslint 警告:
src/pages/myComponent.vue @typescript-eslint/no-unsafe-member-access 中的警告:
any
值上的不安全成员 access.appId。
似乎props
总是被识别为 type any
即使当悬停在 vscode 中时它确实显示了正确的类型:
Vue 3 的建议也得到了正确的遵循。 我们在这里缺少什么?
找到了原因。 在我们的完整代码中,当我们注释掉底部的组件时,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>
因此,这似乎使 eslint 感到困惑。
当您使用 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.