Javascript 无法在vue中使用typescript

不久前，我使用

vue init webpack创建了一个vue项目。

， 一切都很顺利

现在我尝试安装typescript和

ts加载器

。我在

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

对于webpack配置，我添加/修改了几行：

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

我为

ts加载程序添加了
，并为vue加载程序修改了一些内容（webpack的路径是
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>


基本环节
{{message}}
从“Vue”导入Vue
导出默认类AppTest扩展Vue{
消息：string='Hello！'
}

[Vue warn]：属性或方法“message”未在实例上定义，但在呈现期间被引用。通过初始化属性，确保此属性在数据选项中或在基于类的组件中是被动的

我尝试了很多方法通过更新配置来解决这个问题，但似乎什么都没用

有人能帮我解决这个问题吗？
如果您想使用类样式组件，还需要将
@component
装饰器添加到类中（假设您使用的是
vue类组件
）：

你说你没有对
HelloWorld.vue
文件做任何更改？只有在您添加了typescript之后，它才停止工作？是的，我修改了HelloWorld.vue，添加了
lang=“ts”
，创建了类，分配了变量并在模板中使用它。是修改后，只有它不工作。正常的vue语法工作正常<代码>导出默认值{data（）{return{message:'test'}}}}
是的，我添加了它，但它在vscode中显示错误，所以我认为这是一个错误，但它正在构建中。谢谢您知道为什么这个错误会出现在vscode中吗？对装饰器的实验性支持是一个特性，在将来的版本中可能会发生更改。设置“experimentalDecorators”选项以删除此警告。是的，
vue类组件
使用ECMAScript阶段1修饰符，您必须在TypeScript编译器中启用该修饰符，方法是将
“experimentalDecorators”：true
添加到
tsconfig.json
（在
编译器选项
部分）是的，我已经添加了它，实际上在添加该行之前，有一个构建失败，错误与我在上面的注释中提到的相同，但是在tsconfig中添加该行并添加@component decorator之后，仅在vscode中的AppTest类悬停时显示错误。但它实际上不会在构建时产生影响。您可以使用Vue Cli 3生成typescript Vue项目。它几乎创建了将typescript与vue一起使用所需的一切，以查看它的外观。
import Vue from 'vue'
import Component from 'vue-class-component'

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