Vue 3 @typescript-eslint/no-unsafe-member-access

Posted 2023-02-23

【中文标题】Vue 3 @typescript-eslint/no-unsafe-member-access

【英文标题】：

【发布时间】：2021-08-10 10:09:43

【问题描述】：

我们最近开始从 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 值上的不安全成员访问 .appId。

似乎props 总是被识别为any 类型，即使在 vscode 中悬停时它确实显示了正确的类型：

Vue 3 recommendations 也已正确遵循。我们在这里缺少什么？

【参考方案1】：

找到原因。在我们的完整代码中，当我们注释掉底部的组件时，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 感到困惑。

【参考方案2】：

当你使用 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>

【讨论】：

您能否详细说明您所做的更改？

当然，我已经异步包含了组件。看下面的组件定义：samTruckRoster:defineAsyncComponent(() => import('src/components/truckRoster.vue')),