CODEWITHSUNDEEP
typescriptvue.js
Jon Sud
Jon Sud

Reputation: 11641

How to do overload to vue component decorator in typescript?

I use vue with typescript decorators: 

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

@Component({
  components: { .. },
  ...
}) ...

I want to add a property to pass to the decorator like this:

@Component({
  components: { .. },
  myprop: ...
  ...
}) ...

But typescript doesn't know about my new property. (the javascript does), can I do overloading for @Component decorator?

Upvotes: 1

Views: 955

Answers (1)

Shaun Luttin
Shaun Luttin

Reputation: 141512

How to do overload to vue component decorator in typescript?

You wrote that JavaScript already knows about your new property. As a result, all you need to do is to tell TypeScript that the property exists. Then the compiler will stop complaining.

You can tell TypeScript that the property exists by using declaration merging. Declaration merging tells TypeScript to combine the properties of two or more type declarations.

In the following example, we use module augmentation (a kind of declaration merging) to tell the compiler about the new property.

import { Component } from "vue-property-decorator";

// Augment the vue module
declare module "vue" {
  // Add myprop to the ComponentOptions type
  interface ComponentOptions<V> {
    myprop: string;
  }
}

@Component({
  data: {},
  myprop: ""
})
export default class MyComponent extends Vue {}

Voila! TypeScript no longer complains.

To keep the code more organized, module augmentation can go into its own file like this:

enter image description here

Upvotes: 1

Related Questions