Невозможно использовать машинопись в VUE

Question

Некоторое время назад я создал проект VUE с помощью vue init webpack . и все работало нормально.

Теперь я попытался установить машинопись и ts-loader, Я создал файл в src который содержит:

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

я добавил tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
},
"include": [
 "src/**/*.ts",
 "src/**/*.vue"
],
"exclude": [
 "node_modules"
]
}

И я переименовал main.js подать в main.ts а также router/index.js в router/index.ts,

Для конфигурации веб-пакета я добавил / изменил несколько строк:

 {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        ts: [
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [/\.vue$/]
            }                
          }
        ]
      }         
    }        
  },
  {
    test: /\.ts$/,
    loader: 'ts-loader'
  },

Я добавил для ts-loader и я изменил некоторые вещи для vue-loader (путь для веб-пакета build/webpack.base.conf.js)

Там нет ошибок во время работы npm run dev но есть несколько предупреждений, хотя.

Проблема здесь есть в файле src/components/HelloWorld.vue

<template>
 <div class="hello">
   <h2>Essential Links</h2>
   {{message}}
 </div>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default class AppTest extends Vue {
   message: string = 'Hello!'
  }
</script>

[Vue warn]: свойство или метод "message" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство

Я пробовал так много способов исправить это, обновив конфигурацию, и все, но ничего, кажется, не работает.

Кто-нибудь может мне помочь с этим?

Answer 1

Если вы хотите использовать компонент стиля класса, вам также необходимо добавить @Component декоратор для класса (при условии, что вы используете vue-class-component):

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class AppTest extends Vue {
   message: string = 'Hello!'
}