CODEWITHSUNDEEP
typescriptvue.jseslint
Vadim T
Vadim T

Reputation: 528

Vue js 3 - Property 'projects' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {},

enter image description here

Issue:

Property 'projects' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, false, OptionTypesType<{}, ... 4 more ..., {}>, ... 5 more ..., {}>'

For some reason it's screaming on computed, You can see my this.project or this.message.

I have no idea how to fix it, please help. package.json

 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "fork-ts-checker-webpack-plugin": "^6.2.10",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "sass-loader": "10.1.1",
    "terser-webpack-plugin": "^4.2.3",
    "prettier": "^2.2.1",
    "typescript": "~4.1.5"
  }

The issue is coming from when i add to shims-vue.d.ts:

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // declare your own store states
  interface State {
    count: number
  }

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

Then it showing my error. If i remove the store declaration, it's screaming on the store but not on the computed.

Upvotes: 19

Views: 31451

Answers (4)

Laurens
Laurens

Reputation: 124

I had the same problem using vite, and I fixed it by replacing my typescript config files with the ones in this default vite vuejs-typescript repo:

https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue-ts

That repo is a great starting point for Vite+Vue3+Volar+Typescript. Note that you might be getting an error when running the build script, if so you can remove the vue-tsc --noEmit build script and vue-tsc dependancy, as these didn't work for me on macOS.

Edit: Especially the vite-env.d.ts file seems to do the trick:

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

Upvotes: 1

atlas_scoffed
atlas_scoffed

Reputation: 4137

I had a similar issue with Vetur errors on computed properties, and search brought this issue up.

According to this link, this is a known issue regarding Vue's Typings and Typescript.

https://vuejs.github.io/vetur/guide/FAQ.html#property-xxx-does-not-exist-on-type-combinedvueinstance

Changing computed properties to have an explicit return type seems to fix the problem.

greet (): string {
  return this.msg + ' world'
}

Some more details and examples:

https://v2.vuejs.org/v2/guide/typescript.html#Annotating-Return-Types

Upvotes: 35

pxeba
pxeba

Reputation: 1806

I lost a lot of time with this error, in my case also related to the ''data'' attributes of vue. First I had some problem with node modules, after uninstalling global, local and reinstalling packages, I noticed that blank projects (created by vue-cli) now worked, only my main project kept reporting this error.

The problem with my project now was that only the components registered globally were not correctly recognized by either vetur or volar, so I kept getting this thread's error only on them.

I ended up discovering a solution by accident, I'll keep it until I find out what's really going on. Typescript only stops returning this error when I declare "data" like this:

data: () => {

Other variations, like this one, don't work

    //data() { also not works
    data: function () {
        return {
            comida: 1,
        }
    },
    methods: {
        setupVisitsCategoryCard() {
            this.comida = 2 //Property 'comida' does not exist on type 'CreateComponentPublicInstance<...'
        }
    }
    ```

Upvotes: 13

Vadim T
Vadim T

Reputation: 528

I have added

import { ComponentCustomProperties } from "vue";
import { Store } from "vuex";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

to vuex-shim.d.ts and the issue is resolved.

Upvotes: 5

Related Questions