Vue Prop не имеет инициализатора и не определен в конструкторе

Question

Я использую опоры в компонентах класса Vue.Реквизиты определены в конструкторе без значения.Это компилируется и работает нормально, но после последнего обновления VS Code / TSLint я получаю следующее предупреждение:

Свойство 'tag' не имеет инициализатора и определенно не назначено в конструкторе.

Компонент класса Vue

export default class Browser extends Vue {
  @Prop({default: '', required:false})
  tag: string

  created(){
     console.log("the tag prop is " + this.tag)
  }
}

Если я назначу его, я получу предупреждение Vue о том, что вам не следует манипулировать реквизитом в дочернем компоненте.

[Vue warn]: Избегайте прямого изменения свойства, так как значение будет перезаписываться всякий раз, когда родительский компонент повторно рендерится

Поскольку это кажется в основном проблемой с задержкой, есть ли способ отключить это?Или мой код на самом деле неправильный?

Answer 1

Вам не нужно установить strictPropertyInitialization": false, чтобы решить эту проблему.

Согласно этой ссылке в репозитории Microsoft TypeScript-Vue-Starter:

Свойства определяются префиксом переменных экземпляра с помощью декоратора @Prop () из пакета vue-property-decorator.Поскольку опция --strictPropertyInitialization включена, мы должны сообщить TypeScript, что Vue инициализирует наши свойства, добавив a!им.Это говорит TypeScript: «Эй, расслабься, кто-то другой собирается присвоить этому свойству значение».

Вам просто нужно добавить!поддержать имя:

@Prop({default: '', required:false})
  tag!: string

Answer 2

У меня была такая же проблема.Я исправил это, добавив "strictPropertyInitialization": false, в опции компилятора tsconfig.json.

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "strictPropertyInitialization": false,
        "lib": [
            "es5",
            "es2015",
            "dom",
            "ScriptHost"
        ]
    },
    "include": [
        "./src/**/*"
    ]
}