TypeScript 与vue3进行项目开发，JSX 元素隐式具有类型 'any'"，template中引用方法与变量找不到的问题处理

一份执念2025-08-01 12:43

JSX 元素隐式具有类型 'any'",以及vue3中template 标签中,引用的方法与变量找不到的问题。template中相关的引用方法与变量报找不到的错误。

先说结论：JSX元素类型错误可能是由于TypeScript配置问题。需要检查并更新tsconfig.json以确保正确包含JSX类型定义。TypeScript能够正确理解和检查Vue组件中使用的JSX语法的类型

解决方案：

安装 Vue的JSX类型支持包

bash 复制代码

npm install --save-dev @vue/runtime-dom

需要更新 tsconfig.json以添加JSX导入源配置，确保TypeScript使用Vue的JSX类型定义。

json 复制代码

 "jsx": "preserve",
 "jsxImportSource": "vue",

需要确保 Vue的JSX类型定义被正确引入，更新shims-vue.d.ts文件以引用Vue的JSX运行时类型。

ts 复制代码

// 三个斜杠是引用的意思TypeScript中的 三斜线引用指令 ，主要作用是：
// 1. 告诉TypeScript编译器引入指定的类型定义文件
// 2. types="vue/jsx-runtime" 表示引入Vue框架提供的JSX运行时类型定义
// 3.  通过这个指令，TypeScript能够正确理解和检查Vue组件中使用的JSX语法的类型
/// <reference types="vue/jsx-runtime" />
import type { DefineComponent } from 'vue';

declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

declare module "animate.css"

已解决JSX元素隐式具有类型"any"的问题。通过以下步骤完成修复：

更新 tsconfig.json ，添加JSX支持配置
安装开发依赖@vue/runtime-dom 以提供Vue JSX类型定义
修改 shims-vue.d.ts ，添加Vue JSX运行时引用并移除自定义JSX声明

这些更改确保TypeScript能够正确识别Vue组件中的JSX元素类型。