Vetur: Vue 3 and Typescript "Property does not exist on type" error with augmented ComponentCustomProperties and data key on component.

Created on 10 Oct 2020 · 9Comments · Source: vuejs/vetur

[x] I have searched through existing issues
[x] I have read through docs
[x] I have read FAQ

Info

Platform: macOS
Vetur version: v0.28.0
VS Code version: 1.50.0

Problem

This is my vue-shims.d.ts where I add the type for a global property I've added.

import { ComponentCustomProperties } from "vue";
import { CONSTANTS } from "@constants";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $const: typeof CONSTANTS;
  }
}

This works fine until I add a data option to my component, see screen shots of with and without:

Screenshot 2020-10-10 at 20 57 31

Screenshot 2020-10-10 at 20 57 44

When I add the data option, Vetur thinks $const does not exist on "this", as if what's in data overwrites my augmented ComponentCustomProperties.

Typescript is still getting the type inference as you can see from the cropped off bit of the image with the error so I think this is just a vetur issue.

Reproducible Case

typescript vue3 question

Source

nrgnrg

👍3

Most helpful comment

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

Error: Property '$const' does not exist on type 'void'

setup doesn't have this, use provides instead.

KaelWD on 9 Nov 2020

😄1 👍1

All 9 comments

If you can repro in typescript file?

yoyo930021 on 11 Oct 2020

Sure I'll do that asap.

I've found a workaround for now, annotating return type of the computed property removed the error but threw a line 0 "cannot read property 'map' of undefined" in eslint. Upgraded @typescript-eslint/eslint-plugin and @typescript-eslint/parser to the latest version but I had to disable the @typescript-eslint/camelcase rule. It seems to have fixed the issue.

nrgnrg on 11 Oct 2020

👍1

@yoyo930021

I have made a repro that I believe should work (but doesn't). You can find the repro here.

Relevant code:

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

interface Constants {
    test1: number;
    test2: number;
}

const CONSTANTS: Constants = {
    "test1": 1,
    "test2": 2
} 

let app = createApp(App)

app.config.globalProperties.$const = CONSTANTS;

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $const: Constants;
  }
}

app.mount('#app')

// src/components/HelloWorld.vue

import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",

  setup() {
    let constants = this.$const; // Error: Property '$const' does not exist on type 'void'
  }
});