vue3 JSX的使用与警告【JSX 元素隐式具有类型 “any“，因为不存在接口 “JSX.IntrinsicElements“】解决办法

一、安装

pnpm i @vitejs/plugin-vue-jsx -D

二、配置

1、tsconfig.json

"compilerOptions":{
    "jsx":"preserve"
}

2、vite.config.ts

import VueJsx from "@vitejs/plugin-vue-jsx"

...plugin:[
    vue(),
    VueJsx()
]

三、简单使用案例

<script lang="tsx">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => (
      <div>FormTsx</div>
    )
  },
})
</script>

四、JSX 元素隐式具有类型 “any“，因为不存在接口 “JSX.IntrinsicElements“  的解决方法：

1、 不开启严格审查

{
	"compilerOptions": {
		"strict": false
	}
}

2、建议使用该方法

{
	"compilerOptions": {
		"noImplicitAny": false, // 是否在表达式和申明上有隐含的any类型时报错
	}
}