编辑旧的Vue 3组件时出现TypeScript错误，但在新组件上没有错误

Question

我正在尝试将我的Vue 3单页组件脚本转换为使用TypeScript。

当我创建一个全新的Test.vue组件时，我的Visual代码编辑器没有TypeScript错误：

<script lang="ts">
import { defineComponent, inject, ref } from "vue";
export default defineComponent({
  //Some code here
});
</script>

这与预期的一样，因为我的代码符合Vue 3 TypeScipt文档。

但是，当我将现有的其他ExternalApi.vue组件转换为相同的东西时，我在defineComponent、inject和ref上看到了错误。

Module '"vue"' has no exported member 'XXXX'. Did you mean to use 'import XXXX from "vue"' instead?

那么，为什么一个全新的Test.vue组件可以工作，而不是编辑的ExternalApi.vue组件呢？

下面是我试图转换为ExternalApi.vue的完整TypeScript组件：

<template>
  <div>
    <div class="mb-5">
      <h1>External API</h1>
      <p>
        Call Fauna.
      </p>

      <button class="btn btn-primary m-5" @click.prevent="callApi">
        Call API
      </button>
      <label for="product-name">Product Name:</label>
      <input
        type="text"
        v-model="productValue"
        id="product-name"
        name="product-name"
      /><br /><br />
      <button class="btn btn-primary m-5" @click.prevent="createProduct">
        Create Product
      </button>
    </div>

    <div class="result-block-container">
      <div :class="['result-block', executed ? 'show' : '']">
        <h6 class="muted">Result</h6>
        {{ JSON.stringify(apiMessage, null, 2) }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from "vue";
import { query as q, Client } from "faunadb";

export default defineComponent({
  name: "Api",
  setup() {
    let productValue = ref("");
    let apiMessage = ref(null);
    let executed = ref(false);
    const auth = inject("Auth");

    const callApi = async () => {
      const accessToken = await auth.getTokenSilently();
      try {
        const client = new Client({
          secret: accessToken,
          domain: "db.us.fauna.com",
          port: 443,
          scheme: "https",
        });
        const { Paginate, Documents, Collection } = q;

        const data = await client.query(
          Paginate(Documents(Collection("products")))
        );
        console.log(accessToken);
        console.log(data);
        apiMessage.value = data;
        executed.value = true;
      } catch (e) {
        console.log(e);
        apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
      }
    };

    const createProduct = async () => {
      const accessToken = await auth.getTokenSilently();
      try {
        const client = new Client({
          secret: accessToken,
          domain: "db.us.fauna.com",
          port: 443,
          scheme: "https",
        });
        const { Create, Collection, CurrentIdentity } = q;

        const data = await client.query(
          Create(Collection("products"), {
            data: {
              name: productValue.value,
              owner: CurrentIdentity(),
            },
          })
        );
        console.log("productValue data", data);
      } catch (e) {
        console.log(e);
        apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
      }
    };

    return {
      callApi,
      createProduct,
      apiMessage,
      executed,
      productValue,
    };
  },
});
</script>

最重要的是，当通过npm run serve编译时，终端会为Test.vue和ExternalApi.vue抛出相同的错误。

但是它根本不应该显示错误，因为它们都是符合Vue文档。

这是怎么回事？

更新：

这就是我的shims-vue.d.ts文件所包含的内容。我不确定这个文件是做什么的，但是它在克隆的回购中：

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

这是我的package.json文件：

{
  "name": "replicator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^1.13.6",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/vue-fontawesome": "3.0.0-3",
    "ansi-html": "^0.0.7",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-plus": "^1.0.2-beta.28",
    "faunadb": "^4.4.1",
    "glob-parent": "^6.0.2",
    "set-value": "^4.1.0",
    "vue": "^3.2.20",
    "vue-router": "^4.0.11",
    "vue-template-compiler": "^2.6.14",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-router": "4.5.13",
    "@vue/cli-plugin-typescript": "^4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.32.7",
    "sass-loader": "7.3.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-element-plus": "~0.0.13"
  }
}

Answer 1

通过将TypeScript从3.9.3升级到4.4.4：npm install typescript@latest，我能够修复这些导入错误

Vue 3.2.0及以上版本的利用TS特性似乎在其需要升级TypeScript的声明文件中。This release ships TypeScript typings that rely on Template Literal Types and requires TS >= 4.1.

为什么提问者在分叉式回购中遇到这个问题，而不是原来的问题？这是因为最初的回购需要vue ^3.0.0，但是TypeScript ~3.9.3。

通常，yarn.lock将确保安装相同的特定版本，但当它们从yarn切换到npm时，重新生成锁文件，当vue升级而不是类型记录时，会导致版本冲突。

这个问题是锁文件重要性的一个很好的例子！

Answer 2

如果您试图使用Vue 3组合API，但是已经安装了Vue 2，则会出现此错误。目前，如果您运行npm install vue，您将得到版本2；您需要运行npm install vue@next来获得版本3。

如果您想使用版本2，则组件定义的基本组件定义方法如下所示：

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  // type inference enabled
})
</script>

我建议您尝试vue-类组件和房产装饰师，如果您想在Vue 2中使用TypeScript，它们真的很棒！