Typescript and Vue.js - property is used before its initialization

Question

Here is my code

export default class PrimitiveLink extends Vue {
  style = {
    // Reset
    display: 'inline-block',
    textDecoration: 'none',
    outline: 'none',
    // Theme
    ...this.themeStyle,
  };

  @Prop(String) readonly href!: string
  @Prop(String) readonly title: string | undefined
  @Prop(Object) readonly themeStyle!: object
}

I am getting TypeScript error Property 'themeStyle' is used before its initialization. What does that mean and how should I fix it? Thank you for all the answers.

I used the default value for a prop, but still getting this error. @Prop({ default: () => "" }) body; httpBody: string = this.body Error: "Property 'body' is used before its initialization.Vetur(2729)" — Himanshu Shekhar
– Himanshu Shekhar, Commented Oct 5, 2020 at 9:27

Estus Flask · Accepted Answer · 2020-04-29 20:41:10Z

4

Class properties/fields are syntactic sugar for constructor body code and evaluated in the same order they are defined:

constructor() {    
  this.style = {
    /* ... */
    ...this.themeStyle, // not defined
  };

  this.themeStyle /* = ... */;
}

This order also applies to TypeScript properties that are not initialized and doesn't exist at runtime. themeStyle should go before style.

The problem with this snippet is that it doesn't conform to Vue lifecycle. Prop values aren't available at the time class instance is created, themeStyle is expected to be undefined.

style should be either computed property to react to themeStyle changes:

get style() {
  return {
    // Reset
    display: 'inline-block',
    textDecoration: 'none',
    outline: 'none',
    // Theme
    ...this.themeStyle,
  };
}

Or be assigned at the time themeStyle is available:

style!: object;

mounted() {
  this.style = {
    display: 'inline-block',
    textDecoration: 'none',
    outline: 'none',
    ...this.themeStyle,
  };
}

answered Apr 29, 2020 at 20:41

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

be-codified Over a year ago

Thank you for the full explanation. I like the usage of computed methods.

Daniel · Accepted Answer · 2020-04-29 19:12:01Z

0

it just means that you have used themeStyle before initializing it.

essentially something like this:

var a = themeStyle;
var themeStyle = "something";

The solution is to define themeStyle before you use it.

Alternatively, you can use ...this['themeStyle'] which TypeScript would allow, but only if you can't solve it "properly".

answered Apr 29, 2020 at 19:12

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Collectives™ on Stack Overflow

Typescript and Vue.js - property is used before its initialization

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related