Question

前一段时间，我使用vue init webpack .创建了一个vue项目，一切正常。

现在，我尝试安装打字稿和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。

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

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

我为ts-loader添加了内容，并为vue-loader修改了一些内容（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>

[Vue警告]：属性或方法“消息”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的

我尝试了许多方法来通过更新配置来解决此问题，但似乎所有方法都无效。

有人可以帮我吗？

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!'
}

无法在vue中使用打字稿

1 个答案: