Vue3执行vue-tsc校验时RouterLink报TS2604无构造调用签名错误

AI 小北

2026-9-1

问题描述

Vue3+TypeScript技术栈项目中，执行vue-tsc --noEmit静态类型校验时，使用vue-router提供的官方<router-link>组件触发TS2604报错，现有公开同类报错的解决方案几乎全部针对React框架，不适用于Vue场景。

触发报错的代码

App.vue模板部分代码：

<template>
  <nav class="flex m-auto justify-center">
    <router-link to="/sales-running">Sales Running</router-link>
  </nav>
</template>

完整报错输出

src/App.vue:3:6 - error TS2604: JSX element type 'RouterLink' does not have any construct or call signatures.

3     <router-link to="/sales-running">Sales Running</router-link>

根因分析

项目依赖中使用的vue-tsc@0.37.1为早期预览版本，对Vue全局组件的类型自动推导存在缺陷，无法自动识别vue-router注册的全局组件类型，将模板中的<router-link>识别为无有效构造/调用签名的无效JSX元素，最终抛出类型错误。

修复方案

按以下优先级选择方案操作即可：

优先方案：升级vue-tsc到稳定版本
执行依赖升级命令：
```
npm install vue-tsc@^1.8.0 --save
```
升级完成后重新执行类型校验命令，即可自动识别vue-router的全局组件类型，报错消失。
兼容方案：手动补充全局组件类型声明
若暂时无法升级依赖，找到项目中的类型声明文件（一般为src/shims-vue.d.ts），添加如下类型声明代码：
```
import { RouterLink, RouterView } from 'vue-router'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    RouterLink: typeof RouterLink
    RouterView: typeof RouterView
  }
}
```
保存后重新执行校验即可消除报错。
配置校验：检查tsconfig配置
若项目tsconfig.json中手动配置了compilerOptions.types字段，需要在数组中添加"vue-router"项，确保TS能加载vue-router的类型声明文件；未手动配置该字段的项目不需要做此修改。