无法在vue中使用打字稿

unable to use typescript in vue

不久前我使用 vue init webpack . 创建了一个 vue 项目, 一切正常。

现在我尝试安装 typescript 和 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的配置,我added/modified几行:

 {
    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 warn]: 属性 或方法 "message" 未在实例上定义,但在渲染期间被引用。通过初始化 属性

确保此 属性 是反应性的,无论是在数据选项中,还是对于基于 class 的组件

我尝试了很多方法来通过更新配置来解决这个问题,但似乎没有任何效果。

谁能帮我解决这个问题?

如果你想使用 class 风格的组件,你还需要将 @Component 装饰器添加到 class (假设你正在使用 vue-class-component ):

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

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