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

Question

我们最近开始从 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 也已正确遵循。我们在这里缺少什么？

Answer 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 感到困惑。

Answer 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>