无法在 vue 中使用打字稿答案

【问题标题】：unable to use typescript in vue无法在 vue 中使用打字稿
【发布时间】：2019-01-21 00:12:08
【问题描述】：

不久前，我使用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 配置，我添加/修改了几行：

 {
    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 警告]：属性或方法“消息”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

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

谁能帮我解决这个问题？

【问题讨论】：

您说您没有对HelloWorld.vue 文件进行任何更改？在你添加打字稿后它才停止工作？
是的，我修改了 HelloWorld.vue，添加了 lang="ts"，创建了类，分配了变量并在模板中使用它。是的，修改后只是它不起作用。
正常的 vue 语法工作正常。 <script lang="ts"> export default { data (){ return { message: 'test' } } } </script>

标签： javascript typescript vue.js ts-loader vue-class-components

【解决方案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!'
}

【讨论】：

是的，我添加了它，但它在 vscode 中显示错误，所以我认为这是一个错误，但它正在构建良好。谢谢。您知道为什么会在 vscode 中出现此错误，对装饰器的实验性支持是一项可能会在未来版本中更改的功能。设置“experimentalDecorators”选项以删除此警告。
是的，vue-class-component 使用 ECMAScript 阶段 1 装饰器，您必须通过将 "experimentalDecorators": true 添加到您的 tsconfig.json（在 compilerOptions 部分中）在 TypeScript 编译器中启用它
是的，我已经添加了它，实际上在添加该行之前存在构建失败，并且我在上面的评论中提到了相同的错误，但是在 tsconfig 中添加该行并添加 @component 装饰器后显示错误仅在 vscode 中悬停 AppTest 类。但它实际上并没有在构建时产生影响。
您可以使用 Vue Cli 3 生成 typescript-vue 项目。它几乎创建了您需要使用 typescript 和 vue 来查看它应该是什么样子的一切。