Tag: Vue

How to reach props via this using Typescript with Vue 2x

This article only describes this specific case, if you want to know how to set up Typescript for Vue this is a good source.

On a recent client project I had wanted to reach prop values of my component and needed to use this, but that causes errors:

// example
mounted(): void {
  this.interval = setInterval(() => {
    doSomething()
  }, 1000)
},

// error
Property 'interval' does not exist on type 'CombinedVueInstance<vue, {}, unknown, Readonly<{poll: Poll; radius: string;}>>'

This caused quite a bit of annoyance before I realised the simply fix.

The solution is just to add a placeholder in data so the Vue instance has this value on initialisation. This allows Typescript to know that the value does indeed exist on the instance.

export default Vue.extend({
  name: 'PollingComponent',
  data() {
    return {
      interval: 0 as any,
    }
  },
  mounted(): void {
    this.interval = setInterval(() => {
      doSomething()
    }, 1000)
  },
})

Now there’s some interesting browser compatibility problems regarding the type of an Interval. I found that it could be both a Timer or a Number depending on the browser. So in the end I just ended up using any. I can’t see any hard in that since it’s a Javascript function.

Happy coding!

How to use Typescript with props in Vue 2x

This article only describes this specific case, if you want to know how to set up Typescript for Vue this is a good source.

I recently had this issue in a client project. I wanted to use component properties with a shared Interface model, but using it directly as a type results in the error:

'Poll' only refers to a type, but is being used as a value here.

So how do you use a Typescript interface with your Vue component?

You make your type a function that returns the interface. Why this works I’m not quite sure of. But it does work.

Interface Poll {
  question: String,
}

export default Vue.extend({
  name: 'PollCard',
  props: {
    poll: {
      type: Object as () => Poll,
      default: {} as Poll
    }
  }
});

Happy coding!