typescript - 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。

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

Vue 3 的建议也得到了正确的遵循。我们在这里缺少什么？

标签： typescriptvue.jsvue-componentquasar-framework

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