Typescript и Vue. js - свойство используется до его инициализации

Question

Вот мой код

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
}

Я получаю ошибку TypeScript Property 'themeStyle' is used before its initialization. Что это значит и как мне это исправить? Спасибо за все ответы.

Answer 1

Свойства / поля класса являются синтаксическими c сахар для кода тела конструктора и оцениваются в том же порядке, в котором они определены:

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

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

Этот порядок также применяется к свойствам TypeScript, которые не инициализированы и не ' не существует во время выполнения. themeStyle должен go до style.

Проблема с этим фрагментом состоит в том, что он не соответствует Vue жизненному циклу. Значения реквизита недоступны при создании экземпляра класса времени, ожидается, что значение themeStyle будет неопределенным.

style должно быть либо вычисляемым свойством, чтобы реагировать на themeStyle изменения:

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

Или назначаться при наличии themeStyle:

style!: object;

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

Answer 2

это просто означает, что вы использовали themeStyle перед его инициализацией.

по сути примерно так:

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

Решение состоит в том, чтобы определить themeStyle перед его использованием.

В качестве альтернативы, вы можете использовать ...this['themeStyle'], что позволит TypeScript, но только если вы не можете решить его "правильно".