Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No intellisense for computed props on an inherited component #1891

Open
RCVarley opened this issue May 1, 2020 · 0 comments
Open

No intellisense for computed props on an inherited component #1891

RCVarley opened this issue May 1, 2020 · 0 comments

Comments

@RCVarley
Copy link

RCVarley commented May 1, 2020

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

Info

  • Platform: Windows 10
  • Vetur version: 0.24.0
  • VS Code version: 1.44.2

Problem

Using VueJS 2 (javascript), I'm trying to add better intellisense in VSCode.

I can use JSDoc syntax to add type definitions within a component, but don't know how to access those definitions from other components.

In the simplified example below, I have a Base Component with the getIsLoaded and getSetIsLoaded computed properties.

Below that, is the Derived Component which extends: BaseComponent.

I want to make VSCode aware of getSetIsLoaded and getIsLoaded, so that another developer can just type 'this.g' to get a list of the available properties and their types.

Reproducible Case

BaseComponent.vue

...
<script>
export default {
  name: 'BaseComponent',
  props: {
    isLoading: {
      type: Boolean,
      default: false,
  },},
  data: () => ({
    _isLoading: false, // this is intended to be private
  }),
  computed:
    /** @returns {boolean} */
    getIsLoading () {
      return this.$data._isLoading;
    },
    getSetIsLoading: {
      /** @returns {boolean} */
      get () {
        return this.$data._isLoading;
      },
      /** @param {boolean} val emits update:isLoading, val */
      set (val) {
        this.$data._isLoading = val;
        this.$emit('update:isLoading', val);
  },},},
  watch: {
    isLoading: {
      immediate: true,
      handler (val) {
        this.getSetIsLoading = val;
  },},},};
</script>
...

DerivedComponent.vue

...
<script>
import BaseComponent from './BaseComponent.vue';

export default {
  name: 'DerivedComponent',
  extends: BaseComponent,
  computed: {
    valueBundle() {
      return {
        isLoading: this.getSetIsLoading
  };},},};
</script>

...

I'm not sure if this is currently supported (I notice that there's a todo relating to the extends option in the type definitions // TODO: support properly inferred 'extends'), but I would really like to know where I'm going wrong, if I am.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants