vue 3.3升级到3.4之后，SFC文件的script tsx中html标签类型缺失的解决方法

示例

更新到vue 3.4之后：

原因：github.com/vuejs/core/…

解决方法

1. 在入口文件中显式的引入vue/jsx，参考：jsx.d.ts

import 'vue/jsx'

2. 在tsconfig.json的compilerOptions.types中指定加载jsx类型声明文件，参考：typeRoots、types

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types","./node_modules/vue"],
    "types": ["jsx"]
  }
}

3. 设置tsconfig.json的compilerOptions.jsxImportSource为vue，使用vue/jsx-runtime，参考：jsxImportSource

{
  "compilerOptions": {
    "jsxImportSource": "vue"
  }
}

4. 在每个tsx文件或script部分的顶部添加/** @jsxImportSource vue */

<script lang="tsx" setup>
/** @jsxImportSource vue */
import {
  watch, onMounted, ref, computed,
} from 'vue'

...

</script>