How to get typed $data with class based Vue component

Question

I have a component something like this:

interface Data {
  currentDirectory: string;
}

@Component({
})
export default class TileMemory extends Vue {

  public data(): Data {
    return {
      currentDirectory: '/',
    };
  }

  public clearDirectory() {
    this.$data.currentDirectory = '';
  }
}

This appears to work, however this.$data.currentDirectory has the type any, not string even though I annotated the return type of data(). I've tried various things - putting data() in @Component({}) instead (where should it go? nobody seems to know), using this.currentDirectory instead (does not compile).

Is there a way to get proper types for the data object?

tony19 · Accepted Answer · 2019-10-11 05:31:13Z

Note that $data is a Record<string, any>, so its property values will always be type any.

Assuming you're using vue-class-component (the default in a Vue CLI project), you don't need to declare the data() method. You could simply declare initial data as class properties like this:

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class TileMemory extends Vue {
  currentDirectory = '/'

  public clearDirectory() {
    this.currentDirectory = ''
  }
}

If for some reason you prefer using the data() method with the Data interface, you could achieve type safety with type assertions:

export default class TileMemory extends Vue {
  //...

  public clearDirectory() {
    (this.$data as Data).currentDirectory = ''
  }
}

...or using a getter (convenient if you have many usages):

export default class TileMemory extends Vue {
  //...

  get $$data() {
    return this.$data as Data
  }

  public clearDirectory() {
    this.$$data.currentDirectory = ''
  }
}

Robson Oliveira · Accepted Answer · 2019-10-10 19:52:56Z

1

Try to change the function data to a computed property, something like this:

interface Data {
  currentDirectory: string;
}

@Component({
})
export default class TileMemory extends Vue {

  get data(): Data {
    return {
      currentDirectory: '/',
    };
  }

  public clearDirectory() {
    this.data.currentDirectory = '';
  }
}

answered Oct 10, 2019 at 19:52

Robson Oliveira

5071 gold badge7 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to get typed $data with class based Vue component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related