关于volar插件，对于全局组件的类型提示异常，如何解决？

Question

1.扩展vue的类型，并且不引入其他组件，类型提示有效
2.扩展'@vue/runtime-core'类型，引入其他组件，类型提示有效
3.扩展'@vue/runtime-core'类型,不引入其他组件，类型提示无效

这是为什么？我懵了

Answer 1

这可能是因为你的 TypeScript 版本和 Vue 版本之间存在不兼容的情况。通常情况下，能够提供完整的类型提示，需要同步升级 Vue 与 TypeScript 的版本，具体可以参考 Vue 官方文档中关于 TypeScript 的配置。

对于你提到的三种情况，我提供以下解决方案：

1. 扩展 Vue 的类型并且不引入其他组件，类型提示有效

在这种情况下，你可以在你的项目的 src 目录下创建一个 shims-vue.d.ts 文件，并在其中扩展 Vue 的类型，例如：

import Vue from 'vue'

declare module 'vue' {
  interface MyCustomComponentOptions {
    myOption?: string
  }

  interface ComponentOptions<V extends Vue> {
    myOption?: string
  }

  interface ComponentCustomProperties {
    $myCustomProperty?: string
  }

  interface VueConstructor {
    myStaticMethod(): void
  }
}

在这个示例中，我们通过 declare module 'vue' 将 Vue 的类型进行了扩展，并添加了一些自定义的属性和方法。在具体的项目中，你可以根据实际情况进行相应的扩展。

同时，在 .vue 文件中使用自定义的属性和方法时，需要在 setup 函数中通过 inject 获取：

<template>
  <div>{{ myCustomProp }}</div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    const myCustomProp = inject('$myCustomProperty')
    return {
      myCustomProp
    }
  }
})
</script>

2. 扩展 '@vue/runtime-core' 类型，引入其他组件，类型提示有效

在这种情况下，你需要通过安装相关的 .d.ts 文件来扩展 TypeScript 对相关组件的类型定义。以 vue-router 为例，你可以通过以下命令来安装它的类型定义：

npm install --save-dev @types/vue-router

安装完成后，你可以在项目中另一个 .d.ts 文件中扩展 Vue Router 的类型：

import { RouteLocationNormalized, RouteLocationNormalizedLoaded, Router } from 'vue-router'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $router: Router
    $route: RouteLocationNormalizedLoaded
  }
}

在这个示例中，我们通过 import 引入了 Vue Router 的类型，然后通过 declare module '@vue/runtime-core' 对其进行了扩展。扩展完成后，你就可以在 .vue 文件中正常使用 Vue Router 提供的属性和方法，并获得正确的类型提示了。

3. 扩展 '@vue/runtime-core' 类型，不引入其他组件，类型提示无效

在这种情况下，你需要检查一下你的项目是否正确地安装了 TypeScript 和 Vue，并且它们的版本是否兼容。如果版本兼容，而仍然无法获得正确的类型提示，那么你可以尝试升级或降级 TypeScript 的版本，或者到 Vue 的官网或社区中提交问题寻求帮助。