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 来执行类型检查。