之前长时间写 React，最近想了解下 vue3 的发展情况，更主要的是比较喜欢 naive ui 的风格。因此在官方文档的指引下搭建开发环境，安装好 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 插件。
在这个过程中还是遇到些问题，毕竟 vue 的 template 不像 VS Code 对于 jsx 那样直接提供官方支持，解决其中两个问题多花了些时间，在此记录下。
1. HTML element 添加任意属性没有报错提示
这个场景相对来说没有那么特别重要，但是如果不小心有些拼写错误，要等到运行时才能发现还是比较烦人的，有这个提示也可以对于遵循 HTML 属性规范起到一定的约束作用。比如对于下面的例子，
<template>
<h1 foo="foo" data-bar="bar">{{ msg }}</h1>
</template>
期望的结果是 foo 会有报错，但是通过 vite 模板创建的项目此时并不会有任何提示。需要在 tsconfig.json 中添加
"vueCompilerOptions": {
"strictTemplates": true
}
这时 VS Code 会提示非法属性
2. Custom Component 对于传递的属性没有校验
这个问题是由于 Typescript 升级 5.1 的一个改动，造成了 Volar 当前正式版(1.2.0) 的一个 bug，Types include unresolved imports will be turned into any。在 typescript 5.0 之前类型推导在遇到类型导入错误时也能返回正确结果，5.1 之后遇到错误直接返回 any 了，由此造成一系列后续类型都变成了 any。因此对于 HelloWorld 组件中声明的 msg 字符串类型，在 App 中可以向其传递任意值。
Volar 插件为了方便调试在 VS Code 中添加了一条命令：Volar (Debug): Write Virtual Files，运行后可以生成一些中间文件方便查看效果，在由 App.vue 生成的 App.vue.ts 文件中可以看到传递 msg 属性的地方此时 HelloWorld 是 any 类型，因此无法提供任何校验。查看 Volar 源码可以看到这个问题已经得到了修复，fix: compatible with TS 5.1.3，但是这些改动在 Pre-Release 版本，点击插件信息页面的 Switch to Pre-Release Version 按钮更新到最新版本，这个问题就可以解决了。
