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值上的不安全成員 access.appId。

似乎props總是被識別為 type any即使當懸停在 vscode 中時它確實顯示了正確的類型：

Vue 3 的建議也得到了正確的遵循。 我們在這里缺少什么？

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>