Qwertie
Qwertie

Reputation: 6523

Property 'XXX' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

I created a vue component with TypeScript, and I'm getting this error in data() and in methods():

Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>'.

For example:

33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.
    31 |         methods: {
    32 |             toggle: function () {
  > 33 |                 this.open = !this.open
       |                  ^
    34 |                 if (this.open) {
    35 |                     // Add click listener to whole page to close dropdown
    36 |                     document.addEventListener('click', this.close)

This error also shows any time this.close() is used.

This is the component:

<script lang='ts'>
    import Vue from 'vue';
    import axios from 'axios'
    export default Vue.extend({
        data: function () {
            return {
                open: false
            }
        },
        computed: {
            profilePath: function () {
                return "/user/" + this.$store.state.profile.profile.user.id
            }
        },
        methods: {
            toggle: function () {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close: function () {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }
    })
</script>

What is causing this error? It seems to still build in development with the errors, but they are causing issues when I deploy to production.

Upvotes: 50

Views: 58987

Answers (12)

IoannaKapod
IoannaKapod

Reputation: 1

I inserted these vetur-settings in the general vs code settings and it worked

"vetur.useWorkspaceDependencies": true,
"vetur.validation.templateProps": true,
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},

"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
         "printWidth": 100,
         "singleQuote": false,
         "wrapAttributes": false,
         "sortAttributes": false
     }
 },

Upvotes: 0

Fl0r3
Fl0r3

Reputation: 64

Same issue is described here: https://github.com/vuejs/vue/issues/9873

https://www.gitmemory.com/issue/vuejs/vue/9873/485481541

As its a problem with TS 3.4.x, 3.9.6 works very well for me now

Upvotes: 1

Jan, 2022 Update:

Change vetur.experimental.templateInterpolationService to false.

For VSCode, you can find it with the the search icon🔎:

enter image description here

Then, it's true by default:

enter image description here

Then, change it to false:

enter image description here

Finally, the error is solved.

Upvotes: 9

Tiago
Tiago

Reputation: 765

As mentioned in the Typescript Support section of the Vue documentation:

Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like render and those in computed.

In your case, you should change profilePath: function () { to profilePath: function (): string {

You might come across the same error if you have a render() method that returns a value, without a : VNode annotation.

Upvotes: 63

Moritur
Moritur

Reputation: 1758

For me, the solution was to explicitly define the return value for all computed properties, methods, etc.

So instead of:

myComputedProperty() {
  return this.foo;
},

I had to do

myComputedProperty(): boolean {
  return this.foo;
},

Even though I would expect, that by type inference this shouldn't be necessary

Upvotes: 22

Sludgedog
Sludgedog

Reputation: 391

I have seen this issue creep up a few times when using typescript. I'm not sure if it's an issue with vue-tsc or something else, but this is the solution to get around the linter warnings/errors. (It could occur outside of Vue, but that is where I have seen it. I am sure the solution would be the same for any other lib/framework.)

Normally the issue would look something like this...

TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

The solution is to define some types so that Vue is aware of what is trying to be defined in the component.

Example:

interface IData {
  title: string;
}
interface IProps {

}
interface IComputed {

}
interface IMethods {
 
}

Define the component

export default Vue.extend<IData, IMethods, IComputed, IProps>({
   data() {
      title: "Some title"
   }
});

Please also note that the order in which you pass your type parameters is important. The order follows DMCP (Data, Methods, Computed, Props).

Upvotes: 6

ahmed minhaj
ahmed minhaj

Reputation: 379

The temporary solution is to downgrade to the previous version until this is fixed. Downgraded the vuter version to 0.26.0 and it works.

Upvotes: 1

Alberto Manuel
Alberto Manuel

Reputation: 193

Try this:

(this as any).open

This also works with injected properties:

(this as any).injectedProp

And $refs:

(this as any).$refs.myElement

The compiler can show warnings, but work

Important: this is a temporary solution, is more elegant to use class components

Upvotes: 12

Piece
Piece

Reputation: 828

I faced this error when I'm using VS Code editor.

I've installed Vetur plugin on vs code, Vetur handles vue file as typescript file, so I've fixed it to edit settings.json file

Please find this file on your VS editor, then set change like the below

.vscode/settings.json

"vetur.experimental.templateInterpolationService": false

Upvotes: 6

Serkan KONAKCI
Serkan KONAKCI

Reputation: 1360

I get below error: Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

And also doThisClickgave same error.

Solution: i have added declaration to component.

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

  // Add below code sample to your component
  declare module 'vue/types/vue' {
    interface Vue {
      fields: Field[];
      doThisClick: () => void;
      doThisInput: () => void;
    }
  }

  export default Vue.extend({
    name: 'form-builder',
    data() {
      return {
        fields: [
          {
            name: 'name',
            events: { click: this.doThisClick, input: this.doThisInput },
          },
        ],
      };
    },
    methods: {
      doThisClick(field: Field): void {
        console.log('click', field, event);
      },
      doThisInput(field: Field): void {
        console.log('Input', field, event);
      },
    },
  });
</script>

Upvotes: 15

tony19
tony19

Reputation: 138436

This seems to be inexplicably caused by using this.$store to compute the return value of profilePath, combined with the unspecified return type on its declaration.

One workaround is to specify the return type as string:

profilePath: function(): string {

verified with npm run serve and npm run build, using Vue CLI 3.7.0 on macOS Mojave

GitHub demo

Upvotes: 11

void
void

Reputation: 36703

You need to use function in the correct way to preserve the reference of this.

methods: {
            toggle() {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close() {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }

Upvotes: 0

Related Questions