Vue CLI 3 typescript - Property 'x' does not exist on type 'Vue'

Question

I have this weird error that makes no sense. It's saying that isGenre does not exist on the type Vue, but ìsGenreis actually a computed property

<script lang="ts">
import Vue from 'vue'

import { WIDTH_TWO_ICONS } from '@/const/tables-style'

export default Vue.extend({
    props: {
        list: Array,
        listType: String
    },
    data: () => ({ WIDTH_TWO_ICONS }),
    computed: {
        isGenre(): boolean {
            return this.listType === 'genre'
        },
        isMood(): boolean {
            return this.listType === 'mood'
        }
    },
    methods: {
        routerLink(paramsId: number): object {
            return { name: 'GenreOrMoodEdit', params: { id: paramsId }, query: { type: this.isGenre ? 'genre' : 'mood' } }
        }
    }
})
</script>

Error

59:93 Property 'isGenre' does not exist on type 'Vue'.
    57 |     methods: {
    58 |         routerLink(paramsId: number): object {
  > 59 |             return { name: 'GenreOrMoodEdit', params: { id: paramsId }, query: { type: this.isGenre ? 'genre' : 'mood' } }
       |                                                                                             ^
    60 |         }
    61 |     }
    62 | })

Main.ts

declare module 'vue/types/vue' {
    // Global properties can be declared
    // on the `VueConstructor` interface
    interface VueConstructor {
        $axios: any
        router: any
    }
    interface Vue {
        $axios: any
        router: any
    }
}

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'
import './registerServiceWorker'
import '@/plugins'
import '@/directives'

import '@/sass/main.sass'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

Tsconfig.js

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "strictNullChecks": false,
        "baseUrl": ".",
        "types": ["node", "mocha", "chai"],
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
    "exclude": ["node_modules"],
    "files": ["src/interfaces/*"]
}

Tslint.js

{
    "defaultSeverity": "warning",
    "extends": ["tslint:recommended"],
    "linterOptions": {
        "exclude": ["node_modules/**", "./src/assets/icons/*"]
    },
    "rules": {
        "quotemark": [true, "single", "avoid-escape"],
        "arrow-parens": false,
        "semicolon": false,
        "object-literal-sort-keys": false,
        "max-line-length": [true, 160],
        "ordered-imports": false,
        "interface-name": false,
        "trailing-comma": false,
        "no-unused-expression": true,
        "object-literal-shorthand": false,
        "curly": false,
        "no-console": false
    }
}

Your method return type / signature look different than in this example stackoverflow.com/a/44350932/3254405 and also first example uses function keyword may be try this way.. — boateng
– boateng, Commented Oct 2, 2018 at 13:55
You could define an interface: github.com/vuejs/vue/issues/8406#issuecomment-419605178 — Bennett Dams
– Bennett Dams, Commented Oct 2, 2018 at 13:57
I find it very unnecessary, I should be able to access computed properties without having to define interfaces for each of them.. In fact I can access computed properties without problems elsewhere in the code — Giacomo
– Giacomo, Commented Oct 2, 2018 at 14:01

Ricky Ruiz · Accepted Answer · 2018-10-02 17:09:56Z

1

The problem is that you are defining your list prop as an Array.

Array is an alias for ArrayConstructor type.

The constructor of ArrayConstructor returns Array<any>, which is different from ArrayConstructor.

Workaround:

Create an interface for the list property.

ie.

list will be an array of Item.

interface Item { ... }

Cast the Array to a function that returns the interface.

props: {
  list: Array as () => Item[],
}

answered Oct 2, 2018 at 17:09

Ricky Ruiz

27k7 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giacomo Over a year ago

I fixed it with itemsList: { type: Array } as PropOptions<IGenre[] | IMood[]> and it seems to have fixed the problem although I still don't understand it, since the computed was referencing the other props, and not "list" (or not itemsList)

Ricky Ruiz Over a year ago

Sadly, even though the computed property is not using the list prop it breaks. Just make sure to cast any prop which type is an Array. If I am not mistaken, there is a PR that exposes Prop instead of PropOptions to fix this issue, but it has not been merged. Hopefully with Vue 3, which will be fully written in TypeScript, these kind of things will get more attention.

Collectives™ on Stack Overflow

Vue CLI 3 typescript - Property 'x' does not exist on type 'Vue'

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related