50

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.

0

12 Answers 12

63

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.

0
22

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

2
  • This was the correct answer for me
    – OfekA
    Commented Dec 23, 2021 at 17:12
  • Also correct answer for me. Commented Sep 26, 2022 at 13:04
15

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>

1
  • 1
    The problem I've found with this solution is that it updates the Vue prototype globally, so if you have multiple components, the component definitions may compete
    – Daniel
    Commented Jun 27, 2022 at 5:44
12

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

11

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

1
  • 1
    This worked for me, I had to specify the return type of my computed properties.
    – Jonno_FTW
    Commented Oct 28, 2021 at 0:01
9

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.

6

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
6

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

1
  • I'm using TypeScript 4.5.5, and this is the only solution that actually worked for me. I was able to use some other solutions like (this as Vue). and using declare module 'vue/types/vue' in the component, but in the end those were just causing issues somewhere else.
    – Daniel
    Commented Jun 27, 2022 at 5:48
1

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.

1

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

0

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)
            }
        }
1
  • 6
    This does not seem to have changed anything, Still getting the same errors.
    – Qwertie
    Commented May 6, 2019 at 9:49
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.