TypeScript、Vue 和实验性装饰器

Posted 2023-02-22

【中文标题】TypeScript、Vue 和实验性装饰器

【英文标题】：TypeScript, Vue and experimentalDecorators

【发布时间】：2018-11-19 19:40:28

【问题描述】：

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

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

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

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

    "compilerOptions": 
        "experimentalDecorators": true
    

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

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

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

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

我使用了以下选项：

检查项目所需的功能：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 等的配置放在哪里？在专用配置文件中 将此保存为未来项目的预设？没有

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

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

这就是 VSCode 中的样子：

【问题讨论】：

我只是把这个从内存中扔掉，但几周 bakc 时我遇到了类似的错误，代码市场中的 vetur 版本未更新。更具体地说，检查您的%UserProfile%\.vscode\extensions\vetur\vetur\package.json，检查开发依赖项（最后在文件中并与github.com/vuejs/vetur/blob/master/package.json（我认为是tslint 版本）进行比较

很快就会尝试。 :)

【参考方案1】：

你看过这个post 吗？

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

编辑：

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

【讨论】：

是的，我试过了，但不幸的是它不起作用，我已经编辑了我的帖子并提供了更多详细信息。

你能在你的编辑器中显示你的项目树吗？也许您已经在 src 文件夹中打开了编辑器，如下面的post

不是这样，但我绝对可以发布它，也许，我错过了一些东西。

伙计，这是根目录，但是，我尝试将其移动到.experiment 目录，但仍然出现相同的错误。

将 tsconfig.json 文件移高会破坏一切，这绝对是它应该在的地方，因为仪表板目录实际上是 vue-cli 生成的所有内容以及默认模板包含的内容。

【参考方案2】：

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

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

【讨论】：

这对我也有用。为了添加它，我将原来的 tsconfig.json 保留在原处，并在根文件夹中创建了另一个，其中仅包含用于实验装饰器的单个 compilerOption，没有路径、包含、排除或其他任何内容。这似乎奏效了。

对我不起作用。我添加了带有experimentalDecorators 的jsconfig.json 并让我的tsconfig.json 保持联系。 Visual Studio 2019 社区仍然显示错误。

@DucVuNguyen 这似乎与这个问题无关，Vetur 是在 Visual Studio Code 中提供 Vue 体验的引擎（扩展），这个问题特别与 Vetur 有关，我不确定什么对您不起作用，但您可以使用报告功能直接在 VS2019 中向 Visual Studio 团队报告。