TypeScript、Vue 和实验性装饰器

Question

我已经通过 Vue-CLI v3.0.0-beta.15 创建了一个 Vue 项目，现在，一切正常，我的意思是，当我执行 npm run serve 时，它编译并运行良好，但 TypeScript 抛出以下错误消息和仅在编辑器内部！

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

我尝试过但没有奏效的方法：

1. 我在我的tsconfig.json 文件中仔细检查了experimentalDecorators 是否设置为true，Vue 默认会这样做。

2. 我尝试使用以下选项创建jsconfig.json 文件：

   {
       "compilerOptions": {
           "experimentalDecorators": true
       }
   }
   

3. 我尝试在VSCode中更改以下选项"javascript.implicitProjectConfig.experimentalDecorators": true

现在，我正在使用带有 VSCode 的 Vetur 扩展，我已经在他们的仓库中发布了 issue但是我没有使用 Visual Studio for Vue 的任何扩展，但我得到了同样的错误 所以我不知道是什么触发了它，但我认为有些东西没有选择tsconfig.json 文件。

以下是我为生成项目所采取的步骤：

1. mkdir 实验 && cd $_
2. npm 初始化
3. npm install -D @vue/cli
4. ./node_modules/.bin/vue 创建仪表盘

5. 我使用了以下选项：

   • 检查项目所需的功能：Babel、TS、PWA、Router、Vuex、CSS Pre-processors、Linter、Unit、E2E
   • 使用类风格的组件语法？是的
   • 使用 Babel 和 TypeScript 来自动检测 polyfill？是的
   • 选择 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：SCSS/SASS
   • 选择一个 linter / formatter 配置：TSLint
   • 选择其他 lint 功能：Lint on save
   • 选择单元测试解决方案：Mocha
   • 选择端到端测试解决方案：赛普拉斯
   • 您更喜欢将 Babel、PostCSS、ESLint 等的配置放在哪里？在专用配置文件中
   • 将此保存为未来项目的预设？没有

6. 然后导航到dashboard/src/views/Home.vue

这就是它在 Visual Studio 中的样子：

这就是 VSCode 中的样子：

Answer 1

你看过这个post 吗？

也许你应该尝试： 转到文件 => 首选项 => 设置（或 Control+逗号），它将打开用户设置文件。添加“javascript.implicitProjectConfig.experimentalDecorators”：true

编辑：

好的，所以在您的第一个示例中，您已经在experiment 目录中打开了您的项目，但是 tsconfig.json 位于子目录中，tsconfig 必须位于根目录中。尝试以 dashboard 作为 vscode 项目的根文件夹打开 vscode，然后重新启动编辑器。

Answer 2

事实证明，我必须在 tsconfig.json 文件所在文件夹的根目录下创建 jsconfig.json，并且 Visual Studio 中的错误消失了，但无论我设置的选项如何，VSCode 仍然显示错误，但是这似乎是 Vetur bug，而不是 VSCode、TypeScript 中的错误或配置问题。

打开Dashboard 文件夹而不是Src 文件夹，这是我项目的实际根目录“修复”了VSCode 中的问题，所以我猜Vetur 在嵌套时不会选择tsconfig.json 文件。