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

现在，我将 Vetur 扩展与 VSCode 一起使用，我已经发布了 issue在他们的 repo 协议(protocol)上 但我没有使用 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 预处理器、Linter、Unit、E2E
   • 使用类风格的组件语法？是的
   • 将 Babel 与 TypeScript 一起用于自动检测的 polyfill？是的
   • 选择一个 CSS 预处理器(默认支持 PostCSS、Autoprefixer 和 CSS Modules):SCSS/SASS
   • 选择一个 linter/格式化程序配置:TSLint
   • 选择其他 lint 功能:Lint on save
   • 选择单元测试解决方案:Mocha
   • 选择 E2E 测试解决方案:Cypress
   • 您更喜欢将 Babel、PostCSS、ESLint 等的配置放在哪里？在专用配置文件中
   • 将此保存为 future 项目的预设？没有

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

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

这就是它在 VSCode 中的样子:

Answer 1

你看到这个了吗post ？

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

编辑:

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