TypeScript、Vue 和实验装饰器

TypeScript, Vue and experimentalDecorators

我已经通过 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

  4. 中的以下选项

现在,我正在使用带有 VSCode 的 Vetur 扩展,我已经在他们的回购 上发布了一个 issue,但我没有使用任何带有 [=108 的扩展=] 对于 Vue 但我得到了同样的错误 所以我不知道是什么触发了它但我认为有些东西没有选择 tsconfig.json 文件。

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

  1. mkdir 实验 && cd $_
  2. npm 初始化
  3. npm 安装-D @vue/cli
  4. ./node_modules/.bin/vue 创建仪表板
  5. 我使用了以下选项:

    • 检查项目所需的功能:Babel、TS、PWA、Router、Vuex、CSS Pre-processors、Linter、Unit、E2E
    • 使用class风格的组件语法?是
    • 将 Babel 与 TypeScript 一起用于自动检测的 polyfill?是
    • 选择一个CSS预处理器(默认支持PostCSS、Autoprefixer和CSS模块):SCSS/SASS
    • 选择一个 linter/格式化程序配置:TSLint
    • 选择其他 lint 功能:保存时 Lint
    • 选择单元测试解决方案:Mocha
    • 选择端到端测试解决方案:Cypress
    • 您更喜欢将 Babel、PostCSS、ESLint 等的配置放在哪里?在专用配置文件中
    • 将此保存为未来项目的预设?否
  6. 然后导航到dashboard/src/views/Home.vue

Visual Studio:

中是这样的

这就是 VSCode:

中的样子

你看过这个post吗?

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

编辑:

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

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

打开 Dashboard 文件夹而不是 Src 文件夹,它是我项目的实际根 "fixed" VSCode 中的问题所以我猜 Vetur 没有嵌套时选择 tsconfig.json 文件。