Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Question

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Recently, we initiated the process of upgrading from Quasar v1 to Quasar v2 (moving from Vue 2 to Vue 3).

In the past, this code functioned without any issues:

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

However, when transitioning to Vue 3, we encountered an eslint warning:

WARNING in src/pages/myComponent.vue @typescript-eslint/no-unsafe-member-access: Unsafe member access .appId on an any value.

It appears that props is consistently identified as type any, despite vscode showing the correct types upon hovering:

We have also adhered to the Vue 3 recommendations. Can anyone point out what we might be overlooking?

typescript vue.js vue-component quasar-framework

Answer 1

Answer №1

Identified the root cause of the issue. Within our extensive codebase, we noticed that commenting out the component located at the bottom resolved the eslint warning:

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

This situation appears to perplex eslint.

Answer 2

Identified the root cause of the issue. Within our extensive codebase, we noticed that commenting out the component located at the bottom resolved the eslint warning:

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

This situation appears to perplex eslint.

Answer 3

Answer №2

If you want to make the error go away, try utilizing Webpack's code-splitting capability:

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

Answer 4

If you want to make the error go away, try utilizing Webpack's code-splitting capability:

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

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Answer №1

Answer №2

Similar questions

I am looking for information on how to properly handle HTTP errors in Axios when utilizing a blob responseType in VueJs

EventManager gathering of various subscriptions

Whoops! Looks like there was a hiccup with the Vercel Deployment Edge Function, causing an

Show the attribute of an element in a pop-up window

Changing the color of a Chart.js chart in Angular: A step-by-step guide

Creating a link using curly braces {{ }} in VUE js

Assigning a Value to a Dropdown Menu in Angular

Providing Node-server with Vue.js Server Side Rendering

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Decide on the return type of a generic function depending on the parameters of the function

Investigating SCSS Issues: The Problem with Absolute Imports

A warning message from Laravel: "Template compilation error in Vue"

Implementing Icons in Custom Headers of AG Grid Using vue js

Discover the power of Shopware 6 with the sw-inherit-wrapper feature for the sw-snippet-field and sw-media-field components in Vue.js

Top-notch approach for consolidating Typescript Declaration files into a single comprehensive file

What is the process for incorporating vue-cli into a different webpack configuration within the same project?

Enhancing Web Service Calls with Angular 2 - The Power of Chaining

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Encountering difficulties with integrating map controls into the Nuxt3/Vue3 mapbox feature for zooming

Why is it that the Jasmine test is unsuccessful even though the 'expected' and 'toBe' strings appear to be identical?