vue3 jsx关于import vue组件错误无提示,编译时后ts报错情况猜想
比如写了一段代码```
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default defineComponent({
setup() {
return () => (
<div>
<HelloWorld></HelloWorld>
</div>
);
},
});
```
在写代码的时候是不会报错的
因为在shims-vue.d.ts
```
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
```
导出了一个默认类型，而没有导出组件自身的类型
所以我们写什么都不会报错
而在我们build的时候会检测各种各样的的类型，如prop等
会产生报错
这里个人感觉是intellsense与build的差异导致的
但是找了很久也没有找到答案
# 个人猜测
注意，该没有结果经过任何调试确认
仅为个人猜想
因为我实在不知道哪里下手调了
个人猜测是vue在编译的过程中变成了ts文件并推断出了类型
出现了具体类型
在require的时候得到了函数的类型
所以才在build得到了组件的具体类型导致错误
关于这个可以查看对于vue官网的
https://staging-cn.vuejs.org/guide/typescript/overview.html#note-on-vue-cli-and-ts-loader
# 对 Vue CLI 和 ts-loader 的说明
在像 Vue CLI 这样的基于 webpack 搭建的项目中，一般是在模块转换的管道中执行类型检查，例如使用 ts-loader。然而这并不是一个简洁的解决方案，因为类型系统需要了解整个模块关系才能执行类型检查。单个模块的转换步骤并不适合该任务。这导致了下面的问题：
ts-loader 只能对转换后的代码执行类型检查，这和我们在 IDE 或 vue-tsc 中看到的可以映射回源代码的错误并不一致。
类型检查可能会很慢。当它和代码转换在相同的线程/进程中执行时，它会显著影响整个应用程序的构建速度。
我们已经在 IDE 中通过单独的进程运行着类型检查了，因此这一步降低了开发体验但没有带来足够的收益。
如果你正通过 Vue CLI 使用 Vue 3 和 TypeScript，我们强烈建议你迁移到 Vite。我们也在为 CLI 开发仅执行 TS 语法转译的选项，以允许你切换至 vue-tsc 来执行类型检查。
页:
[1]